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