babel相关

babel编译流程

babel的编译流程分为3布：

• parse：通过parser将源码转换为抽象语法树（AST）
• transform：遍历AST，调用各种transform插件对AST进行增删改操作
• generate：把转换后的AST打印成目标代码，并生成sourcemap

预设

插件集合

预设的执行顺序是倒序的，即从后往前加载预设

插件

插件的加载顺序是正序的，即从前往后加载插件

插件在预设之前加载

书写babel的插件需要向外暴露一个函数，函数中返回一个visitor对象，visitor对象中定义了需要处理的节点的对应函数，babel在递归遍历AST语法树时，遇到对应的节点会调用注册的处理函数，完成对AST的增删改操作，从而实现一个babel插件。

babel配置

babel@7

babel.config.json文件配置如下：

{
  "presets": [
     ["@babel/preset-env", {
        "useBuiltIns": "usage", // 按需引入polyfill
        "targets": {
          "chrome": "58",
          "ie": "10"
        }
      },
     ]
  ],
  "plugins": [ "@babel/plugin-transform-runtime"] // 语法转换
}
复制代码

以上配置是基于@babel/polyfill，而@babel/polyfill是基于core-js2.x版本的。

从babel7.4版本开始，Babel官方已经不推荐再使用@babel/polyfill，这也包括官方的polyfill.js库文件。因此从2019年年中开始，我就的新项目都应该使用core-js@3和regenerator-runtime这两个包。

{
  "presets": [
     ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": 3,
        "modules": false,
        "targets": {
          "chrome": "58",
          "ie": "10"
        }
      }
     ]
  ],
  "plugins": [ "@babel/plugin-transform-runtime"]
}
复制代码