babel升级至7版本踩坑

更新文档

使用上的变化如下：

• 不支持stage-2;以下写法报错；因为所有stage(0,1,2,3,4)在7版本都被移除；详情参考文档babel-preset-stage-2;参考blog;以下写法会报错；

   "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"
    ]

替代方案：以下为staged的组成插件；手动添加；

{
  "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"
  ]
}

• 最大的改动新增presets.useBuiltIns属性(如上代码)；链接；看文档应该很容易了接到该属性带来的好处；这里直接给出最佳值{"useBuiltIns": "usage"}；当值为usage的时候，babel会自动把你用到的方法给打包进去，没用到的不会打包。比如你用到了Array.from();他会自动把依赖给你引入；相比将其值设置成“entry”,可以减少很大的体积；entry意味着打包你目标环境不支持的所有方法，这些方法可能用不到
• "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"
        }]
    ]

入口文件 index.js 代码如下

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

当只针对ie11打包后体积为458kb;当只针对chrome打包后体积为121kb;打开打包后的文件可以看到，当针对ie11的时候引入了"../node_modules/core-js/modules/es6.array.from.js"(也引入所有ie11不支持的方法比如Object.entries())，而针对chrome打包后的文件不存在；

• "useBuiltIns": "usage"

console.log(Array.from([1, 2, 3], x => x + x));

• 按照上边的方法依次打包，ie11->57.6kb,打包后文件只包含"../node_modules/core-js/modules/es6.array.from.js"，不包含其他ie11不支持的方法。chrome->5.48kb,里面不包含"../node_modules/core-js/modules/es6.array.from.js"(chrome:58支持Array.from()所以不打包).相比{ "useBuiltIns": "entry"}，ie打包体积由458kb->57.6kb，chrome由121kb->5.48kb.体积大幅减少。
• 当使用一些[].flat,[].flatMap,Promise.try,Object.fromEntries 等一些Array，Objectti提案时需要手动从core-js中引入相应的包(说好的自动引入呢？后续再研究下。。。)。

总体配置代码

{
    "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
        }]
    ]
}