Jiyu Shao's Blogjiyu-shao.vercel.app

Babel

Last Edited Time
Feb 9, 2022 07:34 AM
date
Nov 22, 2019
slug
babel
status
Published
tags
Babel
Notebook
前端工程
必读系列
summary
Babel vs Babel 7
type
Post
目录

总结

  • 使用 @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