The article gives an overview of

This article mainly covers: what is Babel Plugin, Babel Preset, the difference and connection between the two, how to use Plugin/Preset, how to create a custom Preset, and Preset notices.

All examples of this article can be found on github.

Introduction of Babel Plugin

Babel is a code translator that converts ES6 to ES5, or JSX to JS, etc. With Babel, developers can use new JS features in advance, which can greatly improve productivity.

At the heart of implementing Babel code transformation is the Babel plug-in (plugin).

Original code –> [Babel Plugin] –> transformed code

Babel Plugin example

The source code below uses two new ES6 features: arrow functions, for… Of. On es5-only browsers, these two pieces of code report errors.

Therefore, you can use plug-ins to convert your code to ES5.

// index.js // arrow function [1,2,3].map(n => n + 1); // let Nick = 'program '; let desc = `hello ${nick}`;Copy the code

Install dependencies:

npm install --save-dev babel-cli 
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
npm install --save-dev babel-plugin-babel-plugin-transform-es2015-template-literals
Copy the code

Perform the transformation, using –plugins to declare dependent plug-ins that are adopted between multiple plug-ins and separated.

`npm bin`/babel --plugins babel-plugin-transform-es2015-arrow-functions,babel-plugin-transform-es2015-template-literals index.js
Copy the code

The conversion result is as follows:

[1, 2, 3].map(function (n) { return n + 1; }); Let Nick = 'program '; let desc = 'hello ' + nick;Copy the code

In the transformation command, the plug-in name can be omitted from the prefix babel-plugin:

`npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js
Copy the code

This can also be changed to the configuration file.babelrc, where the plugins declared in the plugins field are executed sequentially.

{
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-es2015-template-literals"
  ]
}
Copy the code

Execute the conversion command again:

`npm bin`/babel
Copy the code

Babel Preset profile

The Babel plugin is usually broken down as small as possible and can be introduced as needed. For example, for ES6 to ES5 functions, Babel has officially split into 20+ plug-ins.

The benefits are obvious, both in terms of improved performance and scalability. For example, if a developer wants to experience the arrow functions of ES6, he can simply introduce transform-ES2015-arrow-Functions instead of loading an ES6 bucket.

But many times, plug-in by plug-in introduction is inefficient. For example, in a project where a developer wants to convert all of ES6 code to ES5, the plug-in by plug-in approach is maddeningly laborious and error-prone.

At this time, Babel Preset can be used.

The Babel Preset can simply be regarded as a set of the Babel Plugin. For example, babel-Preset – ES2015 contains all the plug-ins related to ES6 transitions.

The following is an example.

Babel Preset example

The same code is used, this time using babel-PRESET – ES2015 for conversion.

First, install dependencies:

npm install --save-dev babel-cli 
npm install --save-dev babel-preset-es2015
Copy the code

Perform the conversion and declare a dependent preset with –presets, used as a separator between multiple preset preset.

'NPM bin'/Babel --presets babel-es2015 index.js' NPM bin '/ Babel --presets es2015 index.js # Can also be preset to drop the babel-preset prefixCopy the code

The configuration file.babelrc can also be used.

{
  "presets": [ "es2015" ]
}
Copy the code

Conversion command:

`npm bin`/babel
Copy the code

Plugin and Preset run order

Multiple plugins and Preset can be used at the same time, where their execution order is important.

  1. Run out of plugins and run Preset.
  2. Multiple plugins, executed in declarative order.
  3. Multiple Preset are executed in reverse order of declaration.

For example. Babelrc is configured in the following order:

  1. Plugin: transform-react-jsx, transform-async-to-generator
  2. Preset: ES2016, ES2015
{
  "plugins": [ 
    "transform-react-jsx",
    "transform-async-to-generator"
  ],
  "presets": [ 
    "es2015",
    "es2016"    
  ]
}
Copy the code

The following is a simple example.

Plugin and Preset are mixed examples

Example: compile index.jsx to index.js using the ES5 specification. There are two steps:

  1. willjsxGrammar intojsSyntax.
  2. Convert ES6 specification to ES5 specification.

Source code is as follows:

// index.jsx
var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

var foo = () => "foo";
Copy the code

Install dependencies:

npm install --save-dev babel-cli 
npm install --save-dev babel-plugin-transform-react-jsx 
npm install --save-dev babel-preset-es2015
Copy the code

Configuration file.babelrc:

{
  "plugins": [ "transform-react-jsx" ],
  "presets": [ "es2015" ]
}
Copy the code

Perform conversion:

`npm bin`/babel index.jsx
Copy the code

The conversion result is as follows:

"use strict";

var profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement(
    "h3",
    null,
    [user.firstName, user.lastName].join(' ')
  )
);

var foo = function foo() {
  return "foo";
};
Copy the code

Readers can try bebel-preset- ES2015 alone for a code-conversion, the result is a syntax error. This confirms the Plugin’s execution order precedes Preset.

`npm bin`/babel --presets es2015 index.jsx
Copy the code

Custom Babel Preset

As mentioned earlier, Preset is a set of plugins. With a strong community, common transformation features are already being implemented, and in many cases developers just need to reference them on demand.

In actual development, the Plugin/Preset we need is relatively fixed, and it can be tedious and error prone to repeat writing or copying the Babel configuration file every time. At this time, consider a custom Babel Preset.

JSJSX, we used babel-preth-es2015, babel-plugin-transform-react-jsx, and can create a custom preset to include them :()

// mypreset.js
module.exports = {
  presets: [
    require("babel-preset-es2015"),
  ],
  plugins: [    
    require("babel-plugin-transform-react-jsx"),
  ]
};
Copy the code

Then, modify.babelrc. Since it is a local file, the relative path is used. If you publish to NPM, you can use the package name directly.

{
  "presets": [
    "./mypreset.js"
  ]
}
Copy the code

Transcoding process slightly, the reader to try.

The Plugin/Preset configuration items

Both Babel Plugin and Babel Preset support configuration items, and the configuration item syntax is the same, as shown below (plug-ins are similar).

{"presets": [presetName01, // not configured [presetName02, presetOptions02] // configured]}Copy the code

Examples are as follows:

{
  "presets": [
    ["es2015", {
      "loose": true,
      "modules": false
    }]
  ]
}
Copy the code

Different Plugin/Preset configuration items may have different effects. Refer to their official documentation for details.

A link to the

Babeljs. IO/docs/plugin…

2018.05.31 – Babel – plugin – preset