Babel

#总结

• 使用 @babel/plugin-transform-runtime 注入的 polyfill 是会污染全局的(entry, usage, false)

• 通过 @babel/plugin-transform-runtime 插件实现的 polyfill 是不会影响全局的，所以更适合 Library 作者使用，但是需要注意的是，一旦采用 @babel/plugin-transform-runtime, @babel/preset-env 中的 targets 将会失效，言下之意，你的包会变大

• 现有的 babel 正式体系下还没好办法来解决这个问题，当然 babel 也意识到了这个问题，于是有了 babel-polyfills(entry-global, usage-global, usage-pure)

#其他

#Babel vs Babel 7

现在 Babel 的版本是 Babel7, 其中相关的包也进行了更新:

• babel-preset-env ==> @babel/preset-env

• babel-polyfill ==> @babel/polyfill (deprecated in 7.4.0)

• babel-runtime ==> @babel/runtime

• babel-plugin-trnsform-runtime ==> @babel/plugin-transform-runtime

#babel-preset-env vs @babel/preset-env

• 之前 useBuiltIns 为布尔值(如果为 true 则代表是 entry), 现在为字符串, 相当于增加了一个 usage 的值

• usage: 不需要手动引入 polyfill 或 corejs, babel 会自动在每个文件中引入相应的 polyfill

• entry: 只需要在项目中导入 core-js 和 regenerator-runtime/runtime 一次就可以, 这两个包是 @babel/polyfill 的替代

#@babel/runtime vs @babel/preset-env

这两个的区别是 runtime 不会引入会影响到全局的垫片, 比如说 Promise, Set, Map, Array.prototype.includes 等

corejs 与 env、runtime

#core-js@3

core-js@3 废弃了 @babel/polyfill，实现了完全无污染的 API 转译，非常有潜力，但是其暂时会增加打包体积，这个还得看未来普及度上来之后的权衡

core-js@3, babel 展望未来

#注意

#没有编译高级语法

• 检查是否忽略了编辑文件, 比如说使用 babel-loader 的时候使用了 exclude

• 检查是否 babel 会编译该高级功能, 比如说 fetch, Proxy 等

#pug-loader

• 目前写在 pug-loader 中的 js 代码并不会被 babel 编译, 尽量把计算逻辑都放到 JS 文件中

• pug-loader 输出参数的时候是会 encode 一下, 比如说图片的 publicPath 是 <%= locals.config.cdnPrefix %> 的情况下需要使用 != 来输出参数

• pug-loader 目前不支持更改模板默认标记, 所以项目中使用的都是 pug => ejs, 调用时再把变量注入 ejs 模板

#Reference

• 99% 开发者没弄明白的 babel 知识

• https://github.com/babel/babel-polyfills

• RFC: Rethink polyfilling story