Babel is a widely used ES6 transcoder (the next generation of JavaScript compilers) that can convert ES6 code into ES5 code for execution in older browsers. This means that you can write in ES6 style without worrying about whether your current environment will support it. Here’s an example.

/ / code before
input.map(item= > item + 1);

/ / after transcoding
input.map(function (item) {
  return item + 1;
});
Copy the code

The original code above uses the arrow function, which Babel turns into a normal function that can be executed in JavaScript environments that do not support arrow functions.

The following command installs Babel in the project directory.

$ npm install --save-dev @babel/core
Copy the code

Configuration file. Babelrc

The configuration file for Babel is.babelrc, which is stored in the root directory of the project. The first step to using Babel is to configure this file.

This file is used to set transcoding rules and plug-ins. The basic format is as follows.

{
  "presets": []."plugins": []}Copy the code

The presets field sets transcoding rules. The following rule sets are available for installation.

# Latest transcoding rules
$ npm install --save-dev @babel/preset-env

React transcode rule
$ npm install --save-dev @babel/preset-react
Copy the code

Then, add these rules to. Babelrc.

 {
    "presets": [
      "@babel/env"."@babel/preset-react"]."plugins": []}Copy the code

Note that all of the following Babel tools and modules must be written. Babelrc.

Command line transcoding

Babel provides the command line tool @babel/cli for command line transcoding.

Its installation commands are as follows.

$ npm install --save-dev @babel/cli
Copy the code

The basic usage is as follows.

The transcoding result is output to standard output
$ npx babel example.js

The transcoding result is written to a file
The # --out-file or -o argument specifies the output file
$ npx babel example.js --out-file compiled.js
# or
$ npx babel example.js -o compiled.js

Whole directory transcoding
The # --out-dir or -d argument specifies the output directory
$ npx babel src --out-dir lib
# or
$ npx babel src -d lib

The -s parameter generates the source map file
$ npx babel src -d lib -s
Copy the code

polyfill

By default, Babel only converts new JavaScript syntax, not new apis, such as Iterator, Generator, Set, Map, Proxy, Reflect, Symbol, Promise, etc. And some methods defined on global objects (such as Object.assign) do not transcode.

For example, ES6 adds the array. from method to Array objects. Babel doesn’t transcode this method. If you want this method to work, you can use core-js and regenerator-Runtime (the latter provides transcoding for the generator function) to provide a shim for the current environment.

The installation command is as follows.

$ npm install --save-dev core-js regenerator-runtime
Copy the code

Then, in the header of the script, add the following two lines of code.

import 'core-js';
import 'regenerator-runtime/runtime';
/ / or
require('core-js');
require('regenerator-runtime/runtime);
Copy the code

There are a number of apis for Babel that do not transcode by default. See the definitions. Js file of the babel-plugin-transform-Runtime module for a full list.