babel相关

236 阅读1分钟

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"]
}