Is Babel a compiler or transpiler?

Asked
Active3 hr before
Viewed126 times

6 Answers

compilerbabel
90%

Is Babel a transpiler or a compiler, or perhaps offers both options?,I believe a compiler is something very different from a transpiler.,Is Babel a transpiler or a compiler, or perhaps offers both options? Or is the website's title simply incorrect?,Babel is both a transpiler and compiler as the words can be used interchangeably.

load more v
88%

Source-to-source compilers,Google Closure Compiler,^ "first commit". Babel Github. Retrieved 2021-01-26. ,^ "Why Babel Matters | codemix". codemix.com. Retrieved 2018-05-12.

Babel plugins are used to transform syntax that is not widely supported into a backwards-compatible version. For example, arrow functions, which are specified in ES6, are converted into regular function declarations.[8] Non-standard JavaScript syntax such as JSX can also be transformed.[9][10]

Babel can automatically inject polyfills provided by core-js[11] for support features that are missing entirely from JavaScript environments. For example, static methods like Array.from and built-ins like Promise are only available in ES6+, but they can be used in older environments if core-js is used.

Array.from
load more v
72%

A good example of transpiler is the Typescript transpiler which converts Typescript code to JavaScript. Similarily, Babel transpiler can also be used for converting the ES6 JS code to ES5 JS sourcecode.,The above javascript code has been generated from the typescript transpiler after converting the typescript code into javascript code.,To compile typescript code to javascript code, use command “tsc helloworld.ts“. It will generate helloworld.js file in same folder.,A transpiler is a compiler-like program, which converts ES6 JavaScript code to ES5 JavaScript code so that it can run in browsers. When the transpiler sees an expression that uses a language feature that needs to be translated, it produces a logically equivalent expression.

Transpiler configuration for typescript is given in tsconfig.json file.

{
   "compileOnSave": false,
   "compilerOptions": {
      "baseUrl": "./",
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": [
         "node_modules/@types"
      ],
      "lib": [
         "es2017",
         "dom"
      ]
   }
}
load more v
65%

Babel is a compiler that converts your modern JavaScript to run in older browsers. It can also perform other jobs such as converting JSX syntax, but it is not the only tool for that.,Here is an example of transpiling the let statement:,Write your test file into src, then issue the following command to transpile.,Create the following .eslintrc.json file or add these settings to your current one.

Here is an example of transpiling the let statement:

// the new syntax `let` was added in ECMAScript 2015 aka ES6
let x = 11;

// `let` transpiles to the old syntax `var` if your transpiler target was ES5
var x = 11;
load more v
75%

I've been using Babel for a while now, and I've always been under the impression that Babel was a transpiler for converting my ES6 and ES7 JavaScript into ES5 JavaScript, as I was under the assumption that you could technically treat ES5 and ES6 as two different language.,However, I couldn't help but notice that Babel's website title describes it as a compiler, which I believe is something very different from a transpiler. ,We usually name it a "transpiler" when its output is on a similar level as the input, e.g. Python to JavaScript or the other way round. However, there always will be parts that use an abstraction available in one language that need to be "compiled" to a lower-level implementation in the other language.,Or is the website's title 'Babel - The compiler for writing next generation JavaScript' simply incorrect?

According to my reading of the spec, this should be parseable, but it doesn't mean what you think. It would be parsed from right-to-left as

const env = ({
   ENV_VAR_X,
   ENV_VAR_Y,
   ENV_VAR_Z
} = process.env);

where the production

({
   ENV_VAR_X,
   ENV_VAR_Y,
   ENV_VAR_Z
} = process.env)

Therefore, your code is equivalent to

const {
   ENV_VAR_X,
   ENV_VAR_Y,
   ENV_VAR_Z
} = process.env;
const env = process.env;

It's quite easy to validate this:

const foo = {
   a: 1,
   b: 2
};
const bar = {
   a
} = foo;

What you are trying to do has been discussed many times here on SO and also in the ES discuss group. The bottom line is that there is no way to do this. All you can do is:

const {
   ENV_VAR_X,
   ENV_VAR_Y,
   ENV_VAR_Z
} = process.env;
const env = {
   ENV_VAR_X,
   ENV_VAR_Y,
   ENV_VAR_Z
};

You could fall back to the old-fashioned way:

const env = {
      ENV_VAR_X: process.env.ENV_VAR_X,
      ...

You could use the pick function from underscore or write your own, but that requires you to say

const env = _.pick(process.env, 'ENV_VAR_X', "ENV_VAR_Y', 'ENV_VAR_Z');

What we need is a new syntax for picking properties into another object. There have been various proposals made for this, none of which has gained much traction. One is the "extended dot notation", which allows a curly-bracketed construct to be put after a dot. In your case, you would write

const env = process.env. {
   ENV_VAR_X,
   ENV_VAR_Y,
   ENV_VAR_Z
}; ^
^
load more v
40%

Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpile to JavaScript are often called compile-to-JS languages, and are said to target JavaScript. ,We took a look at using the Babel CLI to transpile ES2015 with source maps, and learned about tools that streamline transpilation in more complicated projects. ,Transpilers also play an important role in guiding the decisions of the TC39 committee, which is the group in charge of designing the ECMAScript standard. ,It's hard to get away from Transpilers: You need them whether you plan to write a language that compiles to JavaScript, or simply use ES015 reliably. We saw that feedback from people in that latter group is an important source of guidance for the TC39 committee in its decisions about the future direction of JavaScript, as well.

Anything you can write in JavaScript, you can write in CoffeeScript or TypeScript.

"use strict";

// Good 'ol JS
function printSecret(secret) {
   console.log(`${secret}. But don't tell anyone.`);
}

printSecret("I don't like CoffeeScript");
load more v

Other "compiler-babel" queries related to "Is Babel a compiler or transpiler?"