Babel: compiler for the next generation of JavaScript syntax.

Why use Babel?

We wrote a web page using ES6 syntax. Google browser supports ES6 syntax, so we can run it directly. But other browsers (IE, etc.) that don’t support ES6 syntax won’t run our code. So what’s the solution? Use Babel to convert ES6 to ES5 syntax, and other browsers will recognize it.

Specific operation

1. Use Babel to convert ES6 to ES5 syntax

Webpack configuration Babel (select Webpack)

(1)babel-loader

Babel-loader: Bridges webpack and Babel.

Download:


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

Webpack.config.js configures Babel:

Module: {rules: [// exclude: /node_modules/, loader: // exclude: /node_modules/ "babel-loader" } ] }Copy the code

Exclude [ɪk’sklʊd] We don’t use babel-loader if our js files are in node_modules. Because the node_modules folder contains third-party code that has been compiled, there is no need to process it again.

(2)@babel/preset-env

**@babel/preset-env: Support conversion of ES6 syntax to ES5.

You’ve configured Babel, but you haven’t actually had it do anything, and now you’ve just built a bridge between WebPack and Babel, not yet ES6 to ES5. So env Preset.

Download:

// Can switch ES6 to ES5 NPM install@babel/env --save-devCopy the code

Webpack.config. js configuration options:

Module: {rules: [// exclude: /node_modules/, loader: // exclude: /node_modules/ "Babel-loader ", // bridge options: {presets: [["@babel/preset-env",// Upgrade ES6 syntax to ES5 {useBuiltIns: "usage"}]]}}]}Copy the code

Now you can see the code written in ES6 being converted to ES5 in the packaged JS.

2. Use@babel/polyfillEnable all ES6 syntaxes to be supported in lower versions of browsers as well

Official document @babel/ Polyfill

It’s a grammatical translation, but only part of it. There are still no maps for promises, arrays, etc. So not only use @babel/preset-env for ES6 to ES5, but also use @babel/polyfill to update the missing variables or functions to the earlier version of the browser.

This will emulate a full ES2015+ environment (i.e. ES6) (without the < Stage 4 proposal) and will be used for applications rather than libraries/tools. This polyfill is automatically loaded when using babel-Node. This means you can use new built-in functions like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.Prototype, and so on. To do this, Polyfill adds global scopes and native stereotypes, such as Strings.

With Polyfill, the packaged entry file size is considerably larger than it would have been otherwise (since it is equivalent to configuring a full ES6 environment). It is recommended to use useBuiltIns: “Usage” for preset if you just want to update the ES6 syntax used in the code instead of preset all at once.

Download:

npm install --save @babel/polyfill
Copy the code

Note: Because this is a polyfill(it will run before your source code), we need it to be a dependency, not a devDependency. So –save-dev should not be used

At the top of the entry js file introduce :(entry configuration js file)

import "@babel/polyfill";
Copy the code

If we were writing the business logic for the project, we would use “@babel/polyfill”. But if we were writing a third-party library, “@babel/polyfill” would pollute the world. So it needs to be modified to use a different processing method.

Here we use the new babel7 feature, useBuiltIns, which takes three parameters:

// Import "@babel/polyfill" once in the webpack entry file. Babel will import shim based on your usage, unused functions will not be imported into the appropriate shim: "Entry ", // On demand injection, no import required, automatic detection, but to install @babel/polyfill useBuiltIns: "Usage ", // If you import "@babel/polyfill", it will not exclude unused spacers, and the program will be bulky. (Not recommended) useBuiltIns: "false" copies codeCopy the code

How to configure this feature, there are two ways:

// First type: configure options in webpack.config.js: {presets: [["@babel/preset-env", {targets: {edge: "17", Firefox: "60", Chrome: "67", Safari: "11.1"}, corejs: 2,// New version needs to specify core library version useBuiltIns: "usage"// inject on demand}]]} copy codeCopy the code
{presets: [["@babel/preset-env", {targets: {edge: "17", Firefox: presets: [["@babel/preset-env", "60", Chrome: "67", Safari: "11.1"}, corejs: 2, // New version needs to specify core library version useBuiltIns: "usage" // inject on demand}]]} copy codeCopy the code

Note: One caveat here is that if you are using a higher version of a feature such as ES11, you will need to use corejs 3.x, which has more features than 2.

Reference Documents:

  • Caiyichen. Me/archives / 10…
  • Juejin. Cn/post / 696802…
  • www.zoo.team/article/bab…