代码编译 - Babel Compiler

Question

代码编译 - Babel Compiler

pfan123 opened this issue 4 years ago · comments

ning chen commented 4 years ago

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。 Babel 能帮我们做的的事情：

语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)，Babel 7.0 后 core-js ( 推荐使用 V3 版本 ) 已经内置了 Polyfill 通过 useBuiltIns 开启
源码转换 (codemods)

JavaScript 社区其实有非常多 parser 实现，比如 Acorn、Esprima、Recast、Traceur、Cherow 等等。但我们还是选择使用 Babel，主要有以下几个原因：

Babel 可以解析还没有进入 ECMAScript 规范的语法。例如装饰器这样的提案，虽然现在没有进入标准，但是已经广泛使用有一段时间了
Babel 提供插件机制解析 TypeScript、Flow、JSX这样的 JavaScript 超集，不必单独处理这些语言
Babel 拥有庞大的生态，有非常多的文档和样例代码可供参考
除去 parser 本身，Babel 还提供各种方便的工具库可以优化、生成、调试代码

代码的本质

不管是任意语言的代码，其实它们都有两个共同点

都是由字符串构成的文本
都要遵循自己的语言规范

第一点很好理解，既然代码是字符串构成的，我们要修改/编译代码的最简单的方法就是使用字符串的各种正则表达式。例如我们要将 JSON 中一个键名 foo 改为 bar，只要写一个简单的正则表达式就能做到：

jsonStr.replace(/(?<=")foo(?="\s*:)/i, 'bar')

编译就是把一段字符串改成另外一段字符串。

Babel

JavaScript 社区其实有非常多 parser 实现，比如 Acorn、Esprima、Recast、Traceur、Cherow 等等。但我们还是选择使用 Babel，主要有以下几个原因：

Babel 可以解析还没有进入 ECMAScript 规范的语法。例如装饰器这样的提案，虽然现在没有进入标准，但是已经广泛使用有一段时间了
Babel 提供插件机制解析 TypeScript、Flow、JSX这样的 JavaScript 超集，不必单独处理这些语言
Babel 拥有庞大的生态，有非常多的文档和样例代码可供参考
除去 parser 本身，Babel 还提供各种方便的工具库可以优化、生成、调试代码

Babel-core(@babel/core)

@babel/core 功能可以 js 代码转换为低版本代码 / ast / parse ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。

 提供 API 方法
transform
transformSync
transformAsync
transformFile
transformFileSync
transformFromAst
transformFromAstSync
transformFromAstAsync
parse
parseSync
parseAsync

plugin-transform-runtime(@babel/plugin-transform-runtime)

@babel/plugin-transform-runtime 使用上依赖 @babel/runtime（可以在 @babel/plugin-transform-runtime 包中package.json中查看），babel 编译 es6 到 es5 的过程中，plugin-transform-runtime 为新特性的 API 添加私有 Helper 方法实现非侵入式不污染全局 API，私有 Helper 方法实现存在 @babel/runtime 中。

提到 plugin-transform-runtime 通常会与 babel-polyfill 对比，babel-polyfill 实现是改 API Prototype 进行实现会造成全局污染，因此开发过程中通常针对第三方模块或者组件库时使用 plugin-transform-runtime，平常的项目使用 babel-polyfill 即可

Babel-parser(@babel/parser)

@babel/parser 就是 Babel 的 parser。它可以把一段符合规范的 JavaScript 代码输出成一个符合 Esprima 规范的 AST。大部分 parser 生成的 AST 数据结构都遵循 Esprima 规范，包括 ESLint 的 parser ESTree。这就意味着我们熟悉了 Esprima 规范的 AST 数据结构还能去写 ESLint 插件。

我们可以尝试解析 n * n 这句简单的表达式：

import * as parser from "@babel/parser";

const code = `n * n`

parser.parse(code)

最终 @babel/parser 会解析成这样的数据结构：

结构：

可以使用 ASTExploroer 快速地查看代码的 AST

Babel-traverse (@babel/traverse)

babel-traverse 可以遍历由 Babylon 生成的抽象语法树，并把抽象语法树的各个节点从拓扑数据结构转化成一颗路径（Path）树，Path 表示两个节点之间连接的响应式（Reactive）对象，它拥有添加、删除、替换节点等方法。当你调用这些修改树的方法之后，路径信息也会被更新。除此之外，Path 还提供了一些操作作用域（Scope）和标识符绑定（Identifier Binding）的方法可以去做处理一些更精细复杂的需求。可以说 babel-traverse 是使用 Babel 作为编译器最核心的模块。

尝试一下把一段代码中的 n * n 变为 x * x：

import * as parser from "@babel/parser";
import traverse from "@babel/traverse";

const code = `function square(n) {
  return n * n;
}`;

const ast = parser.parse(code);

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: "n" })) {
      path.node.name = "x";
    }
  }
})

Babel-types（@babel/types）

babel-types 是一个用于 AST 节点的 Lodash 式工具库，它包含了构造、验证以及变换 AST节点的方法。该工具库包含考虑周到的工具方法，对编写处理 AST 逻辑非常有用。例如我们之前在 babel-traverse中改变标识符 n 的代码可以简写为：

发现使用 babel-types能提高我们转换代码的可读性，在配合 TypeScript 这样的静态类型语言后，babel-types 的方法还能提供类型校验的功能，能有效地提高我们转换代码的健壮性和可靠性

Other Resources