babel

原始代码 --> [Babel Plugin] --> 转换后的代码

转译

安装以下依赖:

@babel/core调用 Babel 的 API 进行转码
babel-loader[webpack 的 loader]（https://github.com/babel/babel-loader)
@babel/preset-env 在没有任何配置选项的情况下, babel-preset-env 与 babel-preset-latest（或者 babel-preset-es2015, babel-preset-es2016 和 babel-preset-es2017 一起）的行为完全相同.
~~@babel/preset-stage-0稻草人提案(babel7 已移除)~~通过 npx babel-upgrade --write 升级为各种插件
@babel/preset-reactreact 语法转译
preset 即 plugin 的套餐, 无需针对一个个语法规则去安装 plugin

注:plugin 分为转译 plugin/语法 plugin/混合 plugin

env = es2015 + es2016 + es2017
stage-0 = stage-1 + stage-2 + stage-3

preset 具体包含了哪些插件可去官网查询.

通过配置 targets 可以避免浏览器已经支持的特性被转译, 如果同时设置"IE >= 9"与 "chrome >= 66", 以 "IE >= 9" 为准进行转译

polyfill

方案	优点	缺点	推荐使用环境
@babel/runtime + @babel/plugin-transform-runtime	按需引入, 打包体积小, 移除冗余工具函数(helper function)	不模拟实例方法	开发库、工具中使用
@babel/polyfill	完整模拟 ES2015+环境	体积过大, 污染全局对象和内置的对象原型	应用中使用
@babel/preset-env[useBuiltIns:"entry"] + babel-polyfill	按需浏览器引入, 以 target 最低要求为准	可配置性高	-

注:方案 1 中的@babel/runtime + @babel/plugin-transform-runtime 在 babel7 下只包含 helper function(即 Babel 进行处理时需要的帮助函数), 如果想实现 polyfill , 需要使用@babel/runtime-corejs2, 升级详情

["@babel/plugin-transform-runtime",  {
    "corejs": 2
}],

要实现真正的按需引入,即使用什么新特性打包什么新特性,可以使用实验性的 useBuildIns:"usage".

Babel 正在向每个文件中注入 helper 并使代码膨胀

解决方案:@babel/runtime + @babel/plugin-transform-runtime

{
  "plugins":["@babel/plugin-transform-runtime", {
            "corejs": false,
            "helpers": true,
            "regenerator": false,
            "useESModules": false
        }],
}