Babel知识点总结

Babel知识点总结

一、babel是什么？

官方定义：

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
下面列出的是 Babel 能为你做的事情：
1.语法转换
2.通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)
3.源码转换 (codemods)

babel的工作流程可以分为三个阶段：

1. parsing(解析)：parsing阶段babel内部的 babylon 负责将es6代码进行语法分析和词法分析后转换成抽象语法树
2. transforming阶段内部的 babel-traverse 负责对抽象语法树进行变换操作
3. printing阶段内部的 babel-generator 负责生成对应的代码

二、preset-env

preset-env是一组babel相关的plugin集合（如将箭头函数转换为function，let, const转换为var等一些列插件的集合）。

注意！这里的转换仅限于语法上的转换，而不涉及到API的转换，如Promise，Array.prototype.includes等都不能转换。这就需要引出@bable/polyfill

三、@babel/polyfill

@bable/polyfill是用来对API进行转换的，会在其调用前引入API相关的环境。

// webpack.config.js
module.exports = {
  presets: [
    [
      "@babel/env",
      {
        useBuiltIns: "usage", // 实现按需加载
        corejs: { 
          version: 3, 
          proposals: true 
        }
      }
    ]
  ],
  plugins: []
};

但是，在使用@bable/polyfill会造成全局变量的污染，同时每个编译的文件里都会生成重复的辅助函数（用来辅助babel进行编译）。因此，需要引出@babel/plugin-transform-runtime。

四、@babel/plugin-transform-runtime

// webpack.config.js
module.exports = {
  presets: ["@babel/env"],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        corejs: { version: 3 }
      }
    ]
  ]
};

这里解决了两个问题：

1. 解决了辅助函数的重复使用
   2. 解决了编译API出现的全局污染

参考博文：
[1]: https://juejin.cn/post/6845166891015602190
[2]: https://juejin.cn/post/6844904065223098381#heading-10