Reacquainted with a different Babel

By default, Babel only escapes Es6+ JS syntax

New global API objects like Promise, Generator, and Symbol are not escaped

1. @babel/core: core package

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

@babel/cli: command line compilation

• npm install –save-dev @babel/cli
• npx babel study.js –watch –out-file study-compiled.js
  • Out-file: Outputs the compiled target file to the corresponding location
  • Watch: Real-time compilation

3. @babel/plugin: Babel is plug-in based

/* babel.config.js */
module.exports = {
    presets: [].plugins: [// Plug-in configuration
        "@babel/plugin-transform-arrow-functions".// Handle the arrow function
         "@babel/plugin-transform-exponentiation-operator"// Index operator]}Copy the code

// Handle the arrow function
/* study.js */
const study = () = > {}

/* study-compiled.js */
const study = function () {};
Copy the code

// Use es6 to add exponents to values
/* study.js */
const exponentiation = 2支那2

/* study-compiled.js */
const exponentiation = Math.pow(2.2);
Copy the code

4, @ Babel/preset – env

• Presets stand for presets and provide a collection of plug-ins
• There are many presets available
  • Preset -env (set of plug-ins to handle ES6 + specification syntax)
  • Preset -stage (set of plug-ins to deal with the syntax of the proposal stage, the preset mode Babel 7+ is obsolete)
  • Preset – React (set of plug-ins to handle react syntax)

/* babel.config.js */
module.exports = {
    presets: [/ / configuration preset - env
        "@babel/preset-env".'targets': {
            'browsers': ['ie >= 8'.'iOS 7'] // Specify the browser runtime environment}].plugins: []}Copy the code

// Handle es6 syntax
/* study.js */
const study = () = > {}
const arr1 = [1.2.33]
const arr2 = [...arr1]
const exponentiation = 2支那2

/* study-compiled.js */
var study = function study() {};
var arr1 = [1.2.33];
var arr2 = [].concat(arr1);
var exponentiation = Math.pow(2.2);
Copy the code

// The corresponding ES6 syntax becomes:
/* study.js */
const study = () = > {}
const arr1 = [1.2.33]
const arr2 = [...arr1]
const exponentiation = 2支那2
new Promise(() = > {})
new Map(a)/* study-compiled.js */
var study = function study() {};
var arr1 = [1.2.33];
var arr2 = [].concat(arr1);
var exponentiation = Math.pow(2.2);
new Promise(function () {});// Not compiled
new Map(a);// Not compiled
Copy the code

5, @ Babel/polyfill (An integration package consisting of core-js2 and Regenerator-Runtime )

• Simulating a complete ES2015+ environment will pollute the whole world
• Babel only escapes JS syntax by default
• You need to use @babel/ Polyfill to translate the Promise, Generator, and Symbole global apis
• Simply introduce @babel/ Polyfill at the top of the entry file to use the new API
• Modules of the options
  • Systemjs umd “amd” | “” |” “|” commonjs “|” CJS “| |” auto “false, the default value is” auto”
  • “Import” if false
  • The default import is “require”
• UseBuiltIns: "usage" | | "entry" false, the default is false
  • Usage:
    • Babel scans each file to see which new apis are being used
    • Depending on the browser compatibility of the configuration, only polyfill of the corresponding API is introduced
    • Configuration:
      • “useBuiltIns”: “usage”,
      • “corejs”: 2
  • Entry:
    • Introduce browser-incompatible polyfill based on configured browser compatibility
    • Need to manually add import ‘@babel/polyfill’ to the entry file
    • It automatically replaces all polyfills that are not compatible with the browser based on Browserslist
    • If core-js version is specified, if “corejs”: 3
    • Import ‘@babel/polyfill’ needs to be changed
      • import ‘core-js/stable’;
      • import ‘regenerator-runtime/runtime’;
  • False: Import all unsupported apis in the target browser environment based on the configured browser compatibility
• Pay attention toAs mentioned earlier, @babel/ Polyfil is a core-js2 and Regenerator-Runtime integration package. Core-js3 is now available and stable. But core-JS2 was no longer maintained at 18; @babel/polyfil introduces 2 instead of 3, and @babel/polyfill is no longer recommended in Babel7.4.0. So the core-JS official now recommends that we introduce core-js and Regenerator-Runtime/Runtime directly when using polyfill instead of @babel/ Polyfil to prevent major changes. Of course, we need to specify the core-js version in the preset-env configuration item so there are no more warnings:

/* babel.config.js */
module.exports = {
    presets: [["@babel/preset-env", {
                "modules": false.// Set the file import mode: false is import
                "useBuiltIns": "entry".// Introduce polyfill on demand
                "corejs": "2".// Specify the version of Corejs
                'targets': {
                    'browsers': ['ie >= 8'.'iOS 7']}}]],plugins: []}Copy the code

/* study.js */
import '@babel/polyfill'
new Promise(function () {});

/* study-compiled.js */
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.promise";
new Promise(function () {});
Copy the code

6. @ Babel /helpers @babel/helpers regenerator-Runtime

• Does not pollute global variables
• Multiple uses will only pack once
• Dependency unification is introduced on demand, without repeated introduction and redundant introduction
• @ Babel/plugin – transform – runtime:
• Automatically import polyfill from babel-Runtime
• Corejs: provides a sandbox environment

/* babel.config.js */
module.exports = {
    presets: [["@babel/preset-env",
        {
            "modules": false."useBuiltIns": "usage"."corejs": "3".'targets': {
                    'browsers': ["ie >= 8"."iOS 7"]}}]],plugins: [["@babel/plugin-transform-runtime",
            {
                "corejs": 2// Create sandbox mode}}]]Copy the code

/* study.js */
new Promise(() = > {})
class Test {}

/* study-compiled.js */
import _classCallCheck from "@babel/runtime-corejs2/helpers/classCallCheck";
import _Promise from "@babel/runtime-corejs2/core-js/promise";

new _Promise(function () {});
var Test = function Test() {
    _classCallCheck(this, Test);
};
Copy the code