What is transpilation?

I started reading an article about EcmaScript 6 and came across the term Transpilation , which in Portuguese would be transpilation . In addition to that, I noticed that other articles use this term.

Is the first time in my programming life that I have come across this term.

What does that mean? Does this trans have to do with translating code or something?

Author: Wallace Maxters, 2017-03-14

3 answers

I thought I already knew : P

In fact transpilation is a translation, basically transpilation is a specialization of compilation. The whole process is done the same as what the compiler does, the difference is only that in the traditional compiler the target is a lower-level code, probably some form of Assembly or machine code, while the transpilator targets a source code of a different high-level language or the same writing of another way.

Is used by CoffeeScript, TypeScript, and JavaScript itself to make versions compatible, just to name the most obvious cases of JavaScript. It has a lot of language that generates a source in C instead of generating low-level code.

So you can program in ES6 without fear because even if you want to support old browsers that are still in older version of the EcmaScript specification just do the transpilation of ES6 to an older version and power rotate everywhere. This is quite easy since the new features of JS are almost all of them syntax sugar. Other examples are Flow and Babel.

Can be advantageous by making this language available on multiple platforms and getting optimizations that this language does. It may also have some disadvantages such as more difficulty for debugging needing to do a mapping, there may be impedance of the memory model between the source language and the one used as target, among others.

A example of TS doing transpilation .

 47
Author: Maniero, 2020-05-07 15:25:40

Transpilar is a mixture of Compile and translate. In other words it is a tool to generate a new version of a given code.

In recent years in JavaScript the language has advanced a lot. As browsers go slower and can not keep up with the pace Solutions began to emerge for developers to be able to use the new technologies in the code they write, and then at the time of using this code it be transpiled to a version of JavaScript that browsers accept. Babel is the best example of this, and a practical example would be:

var optionsA = {um: 1};
var optionsB = {...optionsA, dois: 2};
console.log(optionsB);

That uses future technologies, already approved or in the approval phase and transpiled is:

"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var optionsA = { um: 1 };
var optionsB = _extends({}, optionsA, { dois: 2 });
console.log(optionsB);

Thus compatible with ECMAScript 5.

If we add to this the concept of AST, which allows us to analyze the code and its components, then we can transpile not only to different versions of JavaScript but to other languages, raw or not.

 28
Author: Sergio, 2017-03-14 12:11:46

Would be a conversion from one language to another.

When, for example, you program in TypeScript, a transpiler is required to convert it to Javascript.

When you are going to use React and write in Jsx, you need a transpiler to convert the code to Vanilla Javascript, or with CoffeeScript, for example. Or when you use LESS or SASS, for example, a transpiler turns it into CSS.

Inclusive, there are transpilers that they allow you to write the Javascript language with features not yet compatible with all browsers (features still under test, "future" features such as classes, inheritance, spread operator, rest parameters, async away, etc.) and convert your code to a more legacy version, making it available to all current browsers.

 10
Author: José Neto, 2018-10-19 11:38:12