疑问

书摘&心得

第一步要明确转换什么：划定一个集合放要转换的特性，再划定一个集合放转换到的目标特性
- 做事要有条理！
babel 插件需要转换的特性包括 es 标准、proposal，还有 react、flow、typescript 等
babel7 内置的实现这些特性的插件分为 syntax、transform、proposal 3类
- syntax plugin： parser 知道要 parse 什么语法
- transform plugin 是对 AST 的转换【核心】
- proposal plugin：未加入语言标准的特性的 AST 转换插件
不同版本的语言标准支持：
- preset-es2015、preset-es2016 等
- babel7 后用 preset-env 代替
  - 替换理由：preset 经常变化
  - 解决方案：废弃 stage-x 和 es20xx 的 preset，改成 preset-env 和 plugin-proposal-xx 的方式来解决，这样不需要指定用的是 es 几了，默认会全部支持
    helper
helper：可以理解为babel插件中抽取出来的通用函数
- 比如babel-plugin-import使用的@babel/helper-module-imports
- @babel/runtime 包下的相同的 api
  - helper 是在编译时注入 AST
  - runtime 会随代码一起被打包，在运行时被引入，会被打包工具打包到产物中。
一些实用的helper
- @babel/helper-hoist-variables ：变量提升的逻辑
- @babel/helper-module-imports ：改写import逻辑（babel-plugin-import就是基于这个写的）
  @babel/preset-env
  更多配置项可以在文档中查看。
```
{
"presets": [["@babel/preset-env", { 
   "targets": "> 0.25%, not dead",
   /*
   "targets": {
     "chrome": "58",
     "ie": "11"
   },
   */
   "useBuiltIns": "usage",// or "entry" or "false"
   "corejs": 3
}]]
}
```
  babel7 后用 preset-env 代替preset-es2015、preset-es2016 等
从前：都转成 es5
现在：根据目标环境确定不支持的特性，只转换这部分特性

不再手动引入 polyfill，需要配置下 corejs 和 useBuiltIns：

corejs 就是 babel 7 所用的 polyfill
- corejs 3 才支持实例方法（比如 Array.prototype.fill ）的 polyfill。
useBuiltIns 就是使用 polyfill （corejs）的方式
- entry：在入口处全部引入
- usage：每个文件引入用到的
- false：不引入

babel7中同时使用@babel/plugin-transform-runtime和preset-env时，可能会做一些多余的转换和 polyfill

为什么要同用：单独使用preset-env会导致以下问题：
- 重复注入 helper 的实现，导致代码冗余
- polyfill 污染全局环境
babel8会解决该同用冗余问题
babel8 不再需要 transform-runtime 插件了，而且还支持了 polyfill provider 的配置。

前端读书笔记

babel的内置功能

疑问

书摘&心得

helper

@babel/preset-env