关于Babel

[Luin-Li]

关于Babel

• Babel 编译的三个阶段
• Babel使用
• polyfill和runtime差别

• Babel插件开发流程

Babel 编译的三个阶段

Babel 的编译过程可以分为三个阶段：

• 解析（Parsing）：将代码字符串解析成抽象语法树。
• 转换（Transformation）：对抽象语法树进行转换操作。
• 生成（Code Generation）: 根据变换后的抽象语法树再生成代码字符串。

1. 解析（Parsing）

使用 babylon 解析器对输入的源代码字符串进行解析并生成初始 AST。整个解析过程分为两个步骤：1）词法分析(lexical analyzer或scanner)：将整个代码字符串分割成语法单元数组在线分词工具。2）语法分析(syntax analyzer)：它会将词法分析出来的数组转化成树形的表达形式。同时，验证语法，语法如果有错的话，抛出语法错误。

babel 内部使用的解析类库叫做 babylon，并非 babel 自行开发。

简单来说语法分析是对语句和表达式识别，这是个递归过程，在解析中，Babel 会在解析每个语句和表达式的过程中设置一个暂存器，用来暂存当前读取到的语法单元，如果解析失败，就会返回之前的暂存点，再按照另一种方式进行解析，如果解析成功，则将暂存点销毁，不断重复以上操作，直到最后生成对应的语法树。

*可以通过astexplorer.net 网站在线生成抽象语法树AST*

2. 转换（Transformation）

babel中最核心的是 babel-core ，它向外暴露出 babel.transform 接口，遍历 AST 树并应用各 transformers（plugin）。

const babel = require('babel-core');
let result = babel.transform(code, {
    presets: ['env'],
    plugins: ['transform-runtime']
})

3. 生成（Code Generation） 利用 babel-generator 将 AST 树生成转码后的代码

Babel使用

将插件的名字增加到配置文件中 (根目录下创建.babelrc或者 package.json的babel中),然后npm install babel-plugin-xxx进行安装。 示例：

{
  "presets": [
    ["env", // 带了配置项，自己变成数组。第一个元素依然是名字
      {  // 第二个元素是对象，列出配置项
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ],
    // 不带配置项，直接列出名字
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  "env": {
    // 基于环境来配置 Babel 
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

env:Babel 将根据当前环境来开启 env 下的配置。当前环境可以使用 process.env.BABEL_ENV 来获得。 如果 BABEL_ENV 不可用，将会替换成 NODE_ENV，并且如果后者也没有设置，那么缺省值是development。

Presets

因为一套类似es2015的规范，包含了很多个转译插件。为了每次要开发者一个个添加并安装转译插件问题，babel提供了一组插件的集合。理解为单点和套餐的差别

preset分为以下几种：

• 官方内容：目前包括 env, react, flow, minify 等。
• Stage 0 - 稻草人: 只是一个想法，经过 TC39 成员提出即可。
• Stage 1 - 提案: 初步尝试。
• Stage 2 - 初稿: 完成初步规范。
• Stage 3 - 候选: 完成规范和浏览器初步实现。
• Stage 4 - 完成: 将被添加到下一年度发布。在下一年更新会直接放到env中，所以没有单独的 stage-4 可供使用。

env配置参数

• 如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加。env包含的插件列表
• targets:描述所需要支持的环境

  {
  "presets": [
  ["env", {
    "targets": "> 0.25%, not dead"
  }]
  ]
  }

  {
  "presets": [
  ["env", {
    "targets": {
      "chrome": "58",
      "ie": "11"
    }
  }]
  ]
  }

  {
  "presets": [
  ["env", {
    "targets": {
      "browsers": ["last 2 versions", "safari >= 7"]
    }
  }]
  ]
  }

语法可以参考browserslist

• modules:它的取值可以是amd, umd, systemjs, commonjs和false。转换es6模块语法到其他模块规范， false不会转换。默认为commonjs。

执行顺序

• Plugin 会运行在 Preset 之前。
• Plugin 会从前到后顺序执行。
• Preset 的顺序则从后向前。（preset的逆向顺序主要是为了保证向后兼容）

其他工具

• babel-register只会对 require 命令加载的文件转码，而不会对当前文件转码。由于它是实时转码，所以 只适合在开发环境使用。
• babel-loader: 希望在 uglify 之前就加入 babel 处理，所以就有了babel 插入到构建工具内部这样的需求。

• babel-plugin-component:按需引入需要的组件，以达到减小项目体积的目的。

  {
  
  "plugins": [
  [
    "component",
    {
      "libraryName": "element-ui", "styleLibraryName": "theme-chalk"
    },
    { "libraryName": "mint-ui", "style": true }
  ]
  ]
  }

  babel-plugin-component部分源码:

  var _options = options,
  _options$libDir = _options.libDir,//这是组件所在根目录下的路径element-ui/lib/
  libDir = _options$libDir === void 0 ? 'lib' : _options$libDir,
  _options$libraryName = _options.libraryName,//这是ui库的名字--elementui
  libraryName = _options$libraryName === void 0 ? defaultLibraryName : _options$libraryName,
  _options$style = _options.style,
  style = _options$style === void 0 ? true : _options$style,
  styleLibrary = _options.styleLibrary,//这是引入组件时，所需要引入对应组件样式的配置对象
  _options$root = _options.root,
  root = _options$root === void 0 ? '' : _options$root,
  _options$camel2Dash = _options.camel2Dash,
  camel2Dash = _options$camel2Dash === void 0 ? true : _options$camel2Dash;
  
  var styleLibraryName = options.styleLibraryName;//这是组件所需样式的路径（相对于上面的lib）
  var _root = root;
  var isBaseStyle = true;
  var modulePathTpl;
  var styleRoot;
  var mixin = false;
  var ext = options.ext || '.css';//这是加载样式的后缀，默认css

  所以，如果在.babelrc文件配置过styleLibraryName属性的，就不需要在全局引入element的css样式。

polyfill和runtime差别

背景： Babel 把 Javascript 语法 分为 syntax 和 api：

api指那些我们可以通过 函数重新覆盖的语法 ，类似 includes,map,includes,Promise,凡是我们能想到重写的都可以归属到 api

syntax像箭头函数，let,const,class, 依赖注入Decorators,等等这些，我们在 Javascript 在运行是无法重写的，想象下，在不支持的浏览器里不管怎么样，你都用不了 let 这个关键字

babel 默认只转换syntax层语法，而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法(比如 Object.assign)都不会转码。对于API, Babel 把这个放在了 单独放在了 polyfill 这个模块处理。

polyfill(垫片)

使用时，在所有代码运行之前增加 require('babel-polyfill')。或者更常规的操作是在 webpack.config.js 中将 babel-polyfill 作为第一个 entry。

babel-polyfill主要有两个缺点：

• 使用babel-polyfill会导致打出来的包非常大，因为 babel-polyfill 是一个整体，把所有方法都加到原型链上。
• babel-polyfill会污染全局变量，给很多类的原型链上都作了修改，如果我们开发的也是一个类库供其他开发者使用，这种情况就会变得非常不可控。

改进方案： 使用useBuiltIns设置:取值可以是usage（按需引入）, entry（全部引入,会根据browserlist 过滤出需要的polyfill）和false。默认值为false。Babel 7该配置才会生效

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

使用上面的配置，打包后如下：

runtime

为了解决babel-polyfill会污染全局空间的问题，有了babel-plugin-transform-runtime。babel-plugin-transform-runtime的目的是为您的代码创建沙盒环境，不会污染全局空间和内置对象原型。它适用于开发供其他人使用的库，或者如果您无法准确控制代码运行的环境。

{
  "presets": [
    [
      "env"
    ]
  ],
  "plugins": ["transform-runtime"]
}

babel配置如上，打包后的结果：

例如,你的代码中用了Promise,babel-plugin-transform-runtime会自动重写你使用Promise的代码，转换为使用babel-runtime导出（export）的Promise-like对象。 所以plugin-transform-runtime一般用于开发（devDependencies），而runtime自身用于部署的代码（dependencies），两者配合来一起工作。

babel-runtime内部集成了：

• core-js: 转换一些内置类 (Promise, Symbols等等) 和静态方法 (Array.from 等)。它几乎包含了所有 JavaScript 最新标准的垫片。
• regenerator:作为 core-js 的拾遗补漏，主要是 generator/yield 和 async/await 两组的支持。
• helpers: babel的辅助函数，例如 toArray函数， jsx转化函数。

babel-runtime缺点: babel-plugin-transform-runtime不支持实例方法 (例如 [1,2,3].includes(1)),这时还是需要使用babel-polyfill

*总结：Babel 只是转换syntax层语法,所有需要 @babel/polyfill 来处理API兼容,又因为 polyfill 体积太大，所以通过 preset的 useBuiltIns 来实现按需加载,再接着为了满足 npm 组件开发的需要 出现了@babel/runtime 来做隔离。*

Babel插件开发流程

Babel的插件模块需要你暴露一个function，function内返回visitor,visitor是对各类型的AST节点做处理的地方。类似这样：

module.export = function(babel){
  return {
    visitor: {
    //   ...你的插件代码
    }
  }
}

通过AST explorer知道要处理的AST节点，如下：

基本流程：

1. 定义需要转换的节点

   BinaryExpression(path) {
   ...
   }

2. 在node节点上找到替换的节点(通过babel-types)

   var t = require('babel-types');
   if (t.isNumericLiteral(node.left) && t.isNumericLiteral(node.right)) {
   ...
   }

3. 创建用来替换的节点(通过babel-types),replaceWith(替换)

   var t = require('babel-types');
   ...
   path.replaceWith(t.numericLiteral(result));

【参考】 前端工程师需要了解的 Babel 知识 一口（很长的）气了解 babel Babel学习系列4-polyfill和runtime差别(必看) @babel/polyfill 与 @babel/plugin-transform-runtime 详解 你真的会用 Babel 吗? 了解 Babel 6 & 7 生态 深入浅出的webpack构建工具---babel之配置文件.babelrc(三)