Babel Quick Start Guide (based on Babel7)

1. What is Babel?

Babel is a JavaScript compiler. Use next generation JavaScript, today.
    
Copy the code

The official explanation is that Javascript compilers allow us to use the next generation of Javascript today.

By compiler, I mean the ability to use new javascript features (ES6+) in our projects without having to worry about compatibility with browser versions,

Babel is more than that, of course. Babel itself is a tool chain, with many, many different plug-ins making up the entire compiler. , but does not compile/migrate itself. The ES6+ translation mentioned above actually converts ES6+ code to ES5 code, in addition to typescript, JSX compilation

2. Basic concepts of Babel

The Babel configuration has two options, plug-in plugins and preset Presets, which you can think of as a collection of plug-ins.

If we don’t do any configuration, Babel itself is just a tool-chain, a pipe, with no built-in compilation:

code => code
Copy the code

Babel input code will print the original without doing anything.

We need to configure Babel in the configuration file.babelrc.json or babel.config.json or package.json:

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

3. Plugins plugin

Plug-in classification

  1. Transform Plugins: Primarily used to compile/translate code, syntax Plugins are enabled by defaultSyntax Plugins
  2. Synctax Plugins: Only allow Babel to parse specific syntax, but does not compile/migrate itself. When you set up a compiled plug-in, you no longer need to set up a syntax plug-in.

Plug-in configuration path

You can refer directly to the plug-in name, which can omit the prefix babel-plugin, as can plug-ins in the package

{
  "plugins": [
    "babel-plugin-myPlugin"."babel-plugin-myPlugin" // equivalent,
    "@org/babel-plugin-name"."@org/name" // equivalent],}Copy the code

Or refer to the corresponding plug-in entry directory (index.js) in node_modules


{
  "plugins": ["./node_modules/asdf/plugin"]}Copy the code

Plug-in configuration sequence

  • Plug-ins are executed from front to back

    Copy the code

    Run transform-decorators-Legacy before running transform-class0Properties

  • Plugins are executed before presets, which means that the plugins contained in presets are executed after plugins

  • Presets are executed from back to front, as opposed to plugins

The order is important in configuring plug-ins, because the plug-in that executes later receives code after the plug-in that executes first, and the order determines the final processing result.

Consider two plug-ins A (const => let) and B (let => const).

Configuration options

{
  "plugins": [["transform-decorators-legacy"}, {}]]Copy the code

4. Presets the preset

For example, babel-plugin-arrow-functions converts ES6 arrow functions to normal functions. If you need to add a large number of plugins in order to support ES6, If we don’t want to build our own plug-in set, we can use official or other presets.

Official preset (available for download in NPM/YARN):

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

Presets are the packaging of plugins, as described below

module.exports = () = > ({
 presets: [
   require("@babel/preset-env")],plugins: [[require("@babel/plugin-proposal-class-properties"), { loose: true}].require("@babel/plugin-proposal-object-rest-spread")]});Copy the code

However, the Presets option does not allow plugins instances.

Configure the order

  • Plug-ins will precedepresetsperformThat is to saypresetsThe plug-ins contained in theplugins
  • presetsExecute from back to front, andpluginsRather, it is to ensure backward compatibility, executing the latter before the former 
        {
  "presets": [
    "a"."b"."c"]}Copy the code

    This will be done in order C > B > A

Configuration options

{
  "presets": [["@babel/preset-env", {
      "loose": true."modules": false}}]]Copy the code

Override the default

The official documentation states that presets are executed after plugin

If we need to use this preset but don’t want to use some of its features, we have to fork and recreate a preset unless it has options for us to configure itself

By talking to Babel maintainers, we can override it by creating presets

module.exports = {
  "presets": [
    () = > ({
      "plugins": ["pluginB"]}),"presetA"]}Copy the code

5. Refer to the article

IO /docs/en/