The Babel featured in this issue is a tool chain primarily used to convert ECMAScript 2015+ code into backward compatible JavaScript versions in current and legacy browsers or environments.

Babel is a tool to help you write code with the latest version of JavaScript. When features are not supported by your supported environment itself, Babel will help you compile those features to a supported version.

in:

// ES2020 nullish coalescing
function greet(input) {
return input ??  "Hello world";
}

out:

function greet(input) {
return input ! = null ?  input : "Hello world";
}

User Guide

There are many tools in the Babel toolchain that try to make it easy for you to use Babel, whether you’re an “end user” or building an integration of Babel itself.

The whole process of setting up includes:

1. Run these commands to install the package:

npm install --save-dev @babel/core  @babel/cli @babel/preset-env

2. Create a configuration file named babel.config.json (requires and above) in the root directory of the project with the following: v7.8.0

{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
< span class = "HLJS - attr" > "safari" : < / span > < span class = "HLJS - string" > < / span > "11.1"
},
"useBuiltIns": "usage",
< span class = "HLJS attr" - > "corejs" < / span > : < span class = "HLJS - string" > < / span > "3.6.5"
}
]
]
}

or babel.config.js if you are using an older version of Babel

const presets = [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
corejs: "3.6.4",
},
].
];

module.exports = { presets }; 

and run this command to compile all the code in the src directory into lib:

./node_modules/.bin/babel src  --out-dir lib

Basic CLI usage

All the Babel modules you need are released as separate npm packages @babel (starting with version 7). This modular design allows for the use of a variety of tools, each designed for a specific use case. Here we will look at @babel/core and @babel/cli.

Core library

Babel’s core functionality is located in the @babel/core module. After installation:

npm install --save-dev  @babel/core

You can require to use it directly in your JavaScript program and use it like this:

const babel = require("@babel/core");

babel.transformSync("code", optionsObject); 

However, as an end user, you may want to install other tools that act as interfaces to your development process @babel/core and integrate well with your development process. Even so, you may still want to check out its documentation page for options, most of which can also be set up from other tools.

Command line tools

@babel/cli is a tool that allows you to use babel from the terminal. Here is the installation command and basic usage example:

npm install --save-dev @babel/core  @babel/cli

./node_modules/.bin/babel src --out-dir lib

This will parse all the JavaScript files in the src directory, apply any transformations we tell it, and output each file to the lib directory. Since we haven’t told it to apply any transformations, the output code will be the same as the input (without preserving the exact code style). We can specify the transformation we want by passing them as options.

Configuration Babel

Many other tools have similar configurations: ESLint (.eslintrc), Prettier (.prettierrc).

Allows all Babel API options. However, if this option requires JavaScript, you may need to use a JavaScript configuration file.

babel.config.json

Create a package.json file named babel.config.json in the root directory of the project (where).

{
"presets": [...] ,
"plugins": [...]
}

module.exports = function (api) {
api.cache(true);

const presets = [ ... ] ;
const plugins = [ ... ] ;

return {
presets,
plugins
};
}

.babelrc.json

Create a file in your project named.babelrc.json with the following contents.

{
  "presets": [...],
  "plugins": [...]
}

package.json

Alternatively, you can choose to specify your configuration internally using the following key.babelrc.json: package.jsonbabel

{
"name": "my-package",
< span class = "HLJS - attr" > "version" : < / span > < span class = "HLJS - string" > < / span > "1.0.0",
"babel": {
"presets": [ ... ] ,
"plugins": [ ... ] ,
}
}

JavaScript configuration file

You can also use JavaScript to write babel.config.json and files:.babelrc.json

const presets = [ ... ] ;
const plugins = [ ... ] ;

module.exports = { presets, plugins }; 

You can access any Node.js API, such as dynamic configuration based on process environment:

const presets = [ ... ] ;
const plugins = [ ... ] ;

if (process.env["ENV"] === "prod") {
plugins.push(...) ;
}

module.exports = { presets, plugins }; 

Frequently Asked Questions

Why do arguments remap in this arrow function?

The arrow function is not a synonym for the ordinary function . arguments internal this arrow functions refer to their external functions , e.g.

const user = {
firstName: "Sebastian",
lastName: "McKenzie",
getFullName: () =>  {
// whoops!  `this` doesn't actually reference `user` here
return this.firstName + "  " + this.lastName;
},
// use the method shorthand in objects
getFullName2() {
return this.firstName + "  " + this.lastName;
},
}; 

Why is this remapped to undefined?

Babel assumes that all input code is an ES2015 module. The ES2015 module is implicitly strict mode, so this means that the top-level This is not in the window browser, nor is it exported in the node.

Upgrade from Babel 5.x to Babel 6

The core of Babel 6 is the plugin. Which plugins you need depends entirely on your specific configuration, but just add the following profile to get all the same conversions as in Babel 5:

{
"presets":  ["env", "react",  "stage-2"]
}

npm install babel-preset-env  babel-preset-react babel-preset-stage-2 --save-dev

—END—

Open Source license: MIT license