Update the document

The changes in use are as follows:

  • Does not support stage – 2; The following writing error; Because all stages (0,1,2,3,4) were removed in version 7; Refer to babel-preset-stage-2 for details; Refer to the blog; The following is an error;
   "presets": [["@babel/preset-env", {
            "modules": false."targets": {
                // "browsers": ["1%" >."last 2 versions"."not ie < 11"]."chrome": "58"."ie": "11"."safari": "tp"
            },
            "useBuiltIns": "usage"}]."stage-2"
    ]
Copy the code

Alternatives: The following components are staged plug-ins; Manually add;


{
  "plugins": [
    // Stage 1
    "@babel/plugin-proposal-export-default-from"."@babel/plugin-proposal-logical-assignment-operators"["@babel/plugin-proposal-optional-chaining", { "loose": false }],
    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false}]."@babel/plugin-proposal-do-expressions",

    // Stage 2
    ["@babel/plugin-proposal-decorators", { "legacy": true}]."@babel/plugin-proposal-function-sent"."@babel/plugin-proposal-export-namespace-from"."@babel/plugin-proposal-numeric-separator"."@babel/plugin-proposal-throw-expressions",

    // Stage 3
    "@babel/plugin-syntax-dynamic-import"."@babel/plugin-syntax-import-meta"["@babel/plugin-proposal-class-properties", { "loose": false}]."@babel/plugin-proposal-json-strings"]}Copy the code
  • The biggest change is the addition of the presets. UseBuiltIns property (code above); Links; It should be easy to read the documentation to see the benefits of this property; {“useBuiltIns”: “usage”}; When usage is set, Babel will automatically package the methods you use, but not the ones you don’t use. For example, you use array.from (); He automatically introduces dependencies to you; Compared with setting its value to “Entry”, the volume can be greatly reduced. Entry means to package all methods that are not supported by your target environment and may not be needed
  • “useBuiltIns”: “entry”
 "presets": [["@babel/preset-env", {
            "modules": false."targets": {
                // "browsers": ["1%" >."last 2 versions"."not ie < 11"], / /"chrome": "58"."ie": "11"
                    // "safari": "tp"
            },
            "useBuiltIns": "entry"}]]Copy the code

The code for the entry file index.js is as follows

require("@babel/polyfill");
console.log(Array.from([1, 2, 3], x => x + x));
Copy the code

If only Internet explorer 11 is packed, the volume is 458kb. 121KB when packaged for Chrome only; When you open the packaged file, you can see that the “.. / node_modules/core – js/modules/es6 array. From the js “(also introduced all ie11 does not support methods such as Object. The entries ()), and in view of the chrome after packaging file does not exist;

  • “useBuiltIns”: “usage”
console.log(Array.from([1, 2, 3], x => x + x));
Copy the code
  • Package Internet Explorer 11->57.6 KB in sequence as described above. After the package, only “.. / node_modules/core – js/modules/es6 array. From the js “, does not contain other ie11 does not support method. Chrome -> 5.48KB does not contain “.. / node_modules/core – js/modules/es6 array. From the js “(chrome: 58 support array. The from () so don’t pack). Compared to {“useBuiltIns”: “Entry “}, the ie package size is 458KB ->57.6 KB, and Chrome package size is 121KB ->5.48 KB. The volume is greatly reduced.
  • When using some []. Flat, [] flatMap, Promise. Try to Object. Some Array of fromEntries, Objectti proposal need to manually from the core – js, the introduction of the corresponding package (say good automatically bring? Follow up…) .

General configuration code

{
    "presets": [["@babel/preset-env", {
            "modules": false."targets": {
                // "browsers": ["1%" >."last 2 versions"."not ie < 11"]."chrome": "58"."ie": "11"."safari": "tp"
            },
            "useBuiltIns": "usage"}]],"plugins": [
        "@babel/plugin-transform-runtime"["@babel/plugin-proposal-pipeline-operator", {
            "proposal": "minimal"}]."@babel/plugin-syntax-dynamic-import"["@babel/plugin-proposal-decorators", {
            "legacy": true
        }],
        ["@babel/plugin-proposal-class-properties", {
            "loose": false}}]]Copy the code