What is Transpilation?

33

I started reading a article on EcmaScript 6 and I came across the term Transpilation , which in Portuguese would be Transpilation . Besides that, I noticed that other articles use this term.

It's the first time in my programming life that I come across this term.

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

    
asked by anonymous 14.03.2017 / 12:58

3 answers

38

Thought I already knew : P

In fact transpilation is a translation, in the background transpilation is a compilation specialization. The whole process is done just like 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, whereas the transpiler targets a source code of a language, different or the same written in another way.

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

So you can program in ES6 without fear because even if you want to support older browsers that are still in the older version of the EcmaScript specification, you just have to transpose ES6 to an older version and run everywhere. This is very easy since the news of JS are almost all practically syntax sugar . Other examples are Flow and Babel .

It can be advantageous to make this language available on several platforms and to get optimizations that this language does. It can also have some disadvantages like more difficulty for debugging needing to do a mapping, there may be impedance of the memory model between the source language and the target language, among others.

A #.

    
14.03.2017 / 13:05
23

Transpilar is a mixture of compiling and translating. 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 slow down and can not keep up with the pace, solutions have begun to emerge for developers to be able to use the new technologies in the code they write, and then at the time of using that code it will be transpiled into a JavaScript version 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);

Using future, approved, or transpilated technologies 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);

So compatible with ECMAScript 5.

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

    
14.03.2017 / 13:08
8

It would be a conversion from one language to another.

When, for example, you program in TypeScript, you need a transpiler 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 using LESS or SASS, for example, a transpiler transforms it into CSS.

In addition, there are transpilers that 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.

    
14.03.2017 / 13:53