preface

In order to support a small number of ES6 + advanced features in the business, we have recently taken a look at Babel gaskets, which are now sorted into words as follows. (The purpose of this article is to explain the relationship between Babel and the related packages around Babel, how to use them, and application scenarios.)

2020/02/13 First update: Babel-polyfill vs babel-plugins

Babel and Babel Ployfill

1. What does Babel really do?

In short, Babel solves problems at the syntactic level. Used to convert ES6+ advanced syntax to ES5.

2. What does Babel Polyfill do?

If you want to solve problems at the API level, you need to use gaskets. Common examples are babel-polyfill, babel-Runtime and babel-plugin-transform-Runtime.

After clarifying the relationship between them, let’s talk about two or three things about Polyfill formally.

Types of polyfill

Babel Polyfill comes in three varieties

* babel-polyfill
* babel-runtime
* babel-plugin-transform-runtime
Copy the code

babel-polyfill

Babel-polyfill is implemented by adding methods to both the global object and the prototype of the built-in object. So this will cause global space pollution.

babel-polyfillTwo ways to use it

[‘babel-polyfill’,path.join(__dirname, ‘index.js’)]

2. In business JS: Type at the top level of the index.js file, the main entry of the webpack.config.js configuration

import 'babel-polyfill'
Copy the code

Both print the same size, 280KB when packed, or 3.43KB if babel-polyfill is not used. The difference is about 81.6 times. The reason is that Webpack packs babel-Polyfill as a whole. Babel-polyfill is sure to implement all of the new ES6 API gaskets as well, and the files must not be small.

Is there a way to use the corresponding gasket based on the new ES6 API used in the actual code, rather than loading it all in? Yes, there is. Babel-runtime & babel-plugin-transform-Runtime, which can be loaded on demand.

babel-runtime

In short, Babel-Runtime is more of an on-demand implementation, like where do you need to use Promises, just in the header of this file

import Promise from 'babel-runtime/core-js/promise'
Copy the code

Will do.

But if you’re going to use Promises for many files, shouldn’t you import every one? Of course not, Babel has already considered this situation, just use babel-plugin-transform-Runtime to solve the problem of manual import.

babel-plugin-transform-runtime

There is no need to install babel-runtime because the former relies on the latter. In general, babel-plugin-transform-Runtime automatically imports polyfill from babel-Runtime when using the new API. The plugin does three things:

  • Babel-runtime /regenerator is automatically introduced when we use async/await
  • Babel-runtime /core-js is automatically introduced when we use ES6 static events or built-in objects
  • Remove inline Babel helpers and replace them with babel-Runtime /helpers

Babel – plugin – transform – runtime advantages:

  • Does not pollute global variables
  • Multiple uses will only pack once
  • Dependency unification is introduced on demand, without repeated introduction and redundant introduction
  • Avoid repeating utility functions compiled by Babel in each module and reduce the size of libraries and toolkits

use

Configure in.babelrc:

plugins: ["tranform-runtime"]
Copy the code

The packaged size is 17.4 KB, much smaller than the previous 280kb.

The Plugin plug-in

1. Official Presets

Env, React, and flow Presets are available if you don’t want to configure them yourself. That is, the plugins configuration is preinstalled.

The presets attribute, which is a collection of Plugins, tells Babel what new syntax features are being used in the source code being transformed. Such as:

Babel-preset – ES2015: It is possible to compile ES6 code to ES5 babel-preset- ES2016: It is possible to compile ES7 code to ES6 babel-preset- ES2017: Es8 code can be compiled to ES7 babel-preset-latest: a new feature that supports all existing ECMAScript versions

When we need to convert es6 syntax, we can use plugins in.babelrc as needed, such as: Check-es2015-constants, ES2015-arrow-Functions, ES2015-block-scoped-Functions and dozens of plugins with different functions. Configuration items in. Babelrc can be as follows:

{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}
Copy the code

But for convenience, the Babel team gathered dozens of Transform Plugins belonging to ES2015 into Babel-preset — ES2015 a preset, We only need to add an ES2015 configuration to the.babelrc presets to complete the ES2015 syntax support. Babelrc is configured as follows:

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

2, Stage-x (test Presets)

This is the presets developed to support TC39’s latest ES feature for the draft phase.

  • Stage 0 – Draft: Just an idea that could be a Babel plugin
  • Stage 1 – Proposal: Something worth moving forward
  • Stage 2 – Draft: Initialization specification
  • Stage 3 – Candidates: Full specification and initialization browser implementation
  • Stage 4 – Completed: will be added to the next release

3. Conversion plug-ins

There are a number of conversion plug-ins available officially and unofficially that specify the parsing and conversion of an ES advanced feature, such as the arrow function. IO /docs/en/plu…

It has to do with Babel polyfillThe difference betweenIs this:

4. Syntax plug-ins

This plug-in allows Babel to parse special types of syntax.

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}
Copy the code

5. Plug-in development

See the documentation: github.com/jamiebuilds…

The development uses the AST abstract syntax tree, similar to Eslint plug-in development.

export default function () { return { visitor: { Identifier(path) { const name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split("").reverse().join(""); }}}; }Copy the code

Tips for using Babel in Webpack

Babel is used for syntax conversion, so you need to use babel-loader in Webpack. Babel-core is the core of the Babel compiler, so if we need to use babel-Loader for ES6 transcoding, we need to install babel-core first.

conclusion

Recommended usage scenarios:

  • It is recommended to use Babel-Polyfill to create new methods globally
  • The development framework recommends that babel-plugin-transform-Runtime local variables do not pollute the world, and use es6 functions or methods locally

Above, if there is any incorrect or question place please leave a message.

To be continued, this article will keep you updated on Babel.