Babel

[hushicai]

记录一些babel知识点。

[hushicai]

babel polyfill

babel如何打补丁？

@babel/presets-env

最简单的办法，就是使用@babel/presets-env：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

babel自动引入corejs的polyfill：

这种是比较简单地在Array.prototype上添加include api。

babel对于一些语法（syntax），有时候会引入一些helpers来协助转译：

class 语法中，babel 就自定义了 一个_classCallCheck函数来辅助。

从上图中可以看到，babel会在每个需要转译的地方直接定义helper，A和B两个文件都定义了helpers，这会导致最终合并后的bundle存在重复的定义，文件体积冗余，显然不合理。

这就是@babel/plugin-transform-runtime要解决的问题。

@babel/plugin-transform-runtime

{
    "presets":[
        [
            "@babel/preset-env"
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
               // 这里的配置同`presets-env`比较相似
               // 无需设置useBuiltsIn、polyfill，默认就是true
               // 只需要设置一个corejs即可
                "corejs": 3
            }
        ]
    ]
}

现在babel不会直接定义helpers，而是统一引用@babel/runtime中的实现：

最终打包后的文件，helpers代码就只有一份了。

总结

最佳实践就是@babel/presets-env和@babel/plugin-transform-runtime配合使用，presets-env不需要配置任何polyfill选项，由@babel/plugin-transform-runtime处理。