What is the difference between preprocessor and transpiler?

Question

What is the difference between preprocessors and transpilers (or transcompilers)?

I already found the difference between compiler and transpiler, when searching for the answer.

For example CSS preprocessors (Sass, Less) and JS transpilers (CoffeeScript, TypeScript). Are they the same thing? I mean, do they do the same thing?

In some places it is read "JS preprocessors", but then, when I Google that, I can't find any worthy information.

For now, I'm thinking, that preprocessors just convert for example sass to CSS, to more "readable" for the browser. And transpilers compile the whole thing, from coffee script language to JavaScript language.

So am I right here, that the transpiler just compiles the whole thing (which is bigger process), and preprocessor just converts to more "readable"?

Or is Sass, for example, just as different language from CSS as CoffeeScript is from JavaScript?

Answer 1

Preprocessors

The Term Preprocessor is defined in a wikipedia article as:

In computer science, a preprocessor is a program that processes its input data to produce output that is used as input to another program. The output is said to be a preprocessed form of the input data, which is often used by some subsequent programs like compilers.

It is a piece of software that is used to prepare the code to be compiled. A good example is the C Preprocessor.

The C Preprocessor according to the documentation of gcc provided by gnu is:

The C preprocessor, often known as cpp, is a macro processor that is used automatically by the C compiler to transform your program before compilation.

For example, it looks for lines beginning with # and take an action such as: replacing them with some other text.

Transpilers

According to this wikipedia article transpilers are:

A source-to-source compiler, transcompiler or transpiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language.

One example is Babel. Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

It helps you take advantage of edge javascript and have it run in environments that still do not support it by transpiling it down to a version of javascript that it understands.

The following is taken from Babel's github page

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.

Hope this helps!

Answer 2

This answer by Steve Baker, quoted below, explains it well.

Generally, a pre-processor takes in code in language X - transforms it in some way - and outputs language X code.

Generally, a compiler takes in code in language X - and output it in machine code (or possibly assembly language).

A third class of thing is a “transpiler” - which takes in code in language X and outputs code in language Y…another human-readable language.

A great example of a preprocessor is the C language preprocessor. It doesn’t know much about the C language - except for comments and lines that begin with the “#” character.

So in C, you can say things like:

#define HW “Hello World”

…and everywhere it sees HW after that, it’ll replace it with “Hello World”.

It also knows things like

    #ifdef HW 
    ….stuff… 
    #endif 

…which says if the #define for “HW” exists then include the lines up to #endif - otherwise delete them.

So the input to the C preprocessor is C code (with a bunch of lines that start with “#”) and the output is C code with a bunch of substitutions, some code removed - other code included from other files, etc.