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-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 等

core-js@3

注意

没有编译高级语法

• 检查是否忽略了编辑文件, 比如说使用 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