[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[34],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":16,"_30":31,"_32":33},"loginname","yuanliwei","page",1,"limit",20,"total","id","37448","avatar_url","https://avatars.githubusercontent.com/u/15871845?v=4","githubUsername","create_at","2019-06-29 02:10:29.674","score",95,"topic_count","reply_count",18,"is_star",false,{"_20":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":33,"_30":49,"_50":51,"_25":52,"_53":54},"42451","author_id","38335","tab","share","content","## 介绍\r\n\r\n[Babel](https://github.com/babel/babel) 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手，介绍 Babel 在解决这类问题时是如何划分模块。\r\n\r\n## Babel 的模块划分\r\n\r\n![Babel 的模块划分](https://qiniu.mdnice.com/2d77590394a73200940d90c582f5aeb1.svg+xml)\r\n\r\n其中 babel-loader 隶属于 webpack，不在 Babel 主仓库。\r\n\r\n## 框架层\r\n\r\n### 常见的编译器\r\n\r\n常见的解析器有 acorn、@babel/parser (babylon)、flow、traceur、typescript、uglify-js 等，各自的 AST 语法树大致相同。\r\n\r\n### @babel/parser 的实现\r\n\r\n#### 关键词说明\r\n\r\n- Literal：字面量。包括：Boolean、Number、String。\r\n- Identifier：识别量。包括变量名、undefined、null 等。\r\n- Val：值。常分为左值和右值。左值表示一个可以被赋值的节点，如：[a] 等，左值往往是 Pattern、Identifier 等类型。右值表示一个代表具体值的节点，如：b.c 等，右值往往是 Expression、Identifier、Literal 等类型。左值与右值之间通过等号联结，代表赋值表达式，如：[a] = b.c。\r\n- Declaration：赋值。\r\n- Expression：表达式。常用来表示右值。常见的 Expression 有：MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression 等。\r\n- Statement：语句。往往由 Expression 组合而成。常见的 Statement 有：ExpressionStatement。\r\n- Program：程序。所有代码在一个 Program 下，一个 Program 包含多个并列的 Statement。\r\n\r\n```js\r\nlet c = 0;\r\nwhile (a < 10) {\r\n const b = a % 2;\r\n if (b == 0) {\r\n c++;\r\n }\r\n}\r\nconsole.log(c);\r\n```\r\n\r\n上面的这段代码通过 @babel/parser 解析后得到的 AST 语法树如下：\r\n\r\n![示例 AST 语法树](https://qiniu.mdnice.com/2f50bc83533a5946b2d06c66705bed68.svg+xml)\r\n\r\n#### @babel/parser 的 9 层继承\r\n\r\n![@babel/parser 的 9 层继承](https://qiniu.mdnice.com/2316bd41cf30f1731b015f988b3d3746.svg+xml)\r\n\r\n- Parser：初始化\r\n- StatementParser：解析语句，拼装成 program，代码大约有 2100+ 行\r\n- ExpressionParser：解析表达式，代码大约有 2400+ 行\r\n- LValParser：左值处理，将节点变为可以被赋值的节点。如：ArrayExpression 转为 ArrayPattern\r\n- NodeUtils：AST 节点操作，如复制等\r\n- UtilParser：工具函数，如判断行末等\r\n- Tokenizer：词法分析，大约有 1400+ 行\r\n- LocationParser：文件位置信息\r\n- CommentsParser：解析注释\r\n- BaseParser：插件能力\r\n\r\n大部分模块代码量在百行左右，其中 StatementParser、ExpressionParser 和 Tokenizer 有较多复杂逻辑。\r\n\r\n### @babel/traverse\r\n\r\n提供遍历 AST 语法树的能力，如：\r\n\r\n```js\r\ntraverse(ast, {\r\n FunctionDeclaration: function(path) {\r\n path.node.id.name = \"x\";\r\n }\r\n});\r\n\r\ntraverse(ast, {\r\n enter(path) {\r\n if (path.isIdentifier({ name: \"n\" })) {\r\n path.node.name = \"x\";\r\n }\r\n }\r\n});\r\n```\r\n\r\n`path` 对象上有下面的属性和方法：\r\n\r\n- 属性\r\n - node：节点\r\n - parent：父节点\r\n - parentPath：父节点的 path\r\n - scope：作用域\r\n- 方法\r\n - get：获取子节点属性\r\n - findParent：向父节点搜寻节点\r\n - getSibling：获取兄弟路径\r\n - getFunctionParent：获取包含该节点最近的父路径，并且是 function\r\n - getStatementParent：获取最近的 Statement 类型的父节点\r\n - replaceWith：用 AST 节点替换该节点\r\n - replaceWithMultiple：用多个 AST 节点替换该节点\r\n - replaceWithSourceString：用源码解析后的 AST 节点替换该节点\r\n - insertBefore：在该节点前插入兄弟节点\r\n - insertAfter：在该节点后插入兄弟节点\r\n - remove：删除节点\r\n - pushContainer：将 AST 节点 push 到节点的属性里面，类似数组操作\r\n\r\n### @babel/generator\r\n\r\n将 AST 转为代码文本。示例用法：\r\n\r\n```js\r\nimport { parse } from '@babel/parser';\r\nimport generate from '@babel/generator';\r\n\r\nconst ast = parse('class Example {}');\r\ngenerate(ast); // => { code: 'class Example {}' }\r\n```\r\n\r\n可以生成 source map。\r\n\r\n```js\r\nimport { parse } from '@babel/parser';\r\nimport generate from '@babel/generator';\r\n\r\nconst code = 'class Example {}';\r\nconst ast = parse(code);\r\n\r\nconst output = generate(ast, { sourceMaps: true, sourceFileName: code }); // => { code: 'class Example {}', rawMappings: ... }\r\n// or\r\nconst output = generate(ast, { sourceMaps: true, sourceFileName: 'source.js' }, code); // => { code: 'class Example {}', rawMappings: ... }\r\n```\r\n\r\n还可以合并多个文件，同时生成 source map。\r\n\r\n```js\r\nimport { parse } from '@babel/parser';\r\nimport generate from '@babel/generator';\r\n\r\nconst a = 'var a = 1;';\r\nconst b = 'var b = 2;';\r\nconst astA = parse(a, { sourceFilename: 'a.js' });\r\nconst astB = parse(b, { sourceFilename: 'b.js' });\r\nconst ast = {\r\n type: 'Program',\r\n body: [...astA.program.body, ...astB.program.body]\r\n};\r\n\r\nconst { code, map } = generate(ast, { sourceMaps: true }, {\r\n 'a.js': a,\r\n 'b.js': b\r\n});\r\n```\r\n\r\n### @babel/core\r\n\r\n主要提供 transform 和 parse 相关的 API。\r\n\r\ntransform 的流程主要是 parse -> traverse -> generate。\r\n\r\nparse 主要提供对 @babel/parser 的封装。\r\n\r\n## 实现层\r\n\r\n### @babel/plugin\r\n\r\n#### @babel/plugin-syntax-x\r\n\r\n通过插件开关打卡语法解析能力。@babel/parser 中判断了 plugin 开关，实现了这些语法解析能力。如 @babel/plugin-syntax-jsx：\r\n\r\n```js\r\nparserOpts.plugins.push(\"jsx\");\r\n```\r\n\r\n#### @babel/plugin-transform-x\r\n\r\n实现语法的转换。如 @babel/plugin-transform-exponentiation-operator：\r\n\r\n```js\r\nexport default {\r\n name: \"transform-exponentiation-operator\",\r\n visitor: build({\r\n operator: \"**\",\r\n build(left, right) {\r\n return t.callExpression(\r\n t.memberExpression(t.identifier(\"Math\"), t.identifier(\"pow\")),\r\n [left, right],\r\n );\r\n },\r\n }),\r\n}\r\n```\r\n\r\n#### @babel/plugin-proposal-x\r\n\r\n支持草案级别的语法转换。如 @babel/plugin-proposal-numeric-separator：\r\n\r\n```js\r\nexport default {\r\n name: \"proposal-numeric-separator\",\r\n inherits: syntaxNumericSeparator,\r\n\r\n visitor: {\r\n CallExpression: replaceNumberArg,\r\n NewExpression: replaceNumberArg,\r\n NumericLiteral({ node }) {\r\n const { extra } = node;\r\n if (extra && /_/.test(extra.raw)) {\r\n extra.raw = extra.raw.replace(/_/g, \"\");\r\n }\r\n },\r\n },\r\n}\r\n```\r\n\r\n### @babel/preset-x\r\n\r\n提供各类组合好的 plugins、syntax 和 helpers。\r\n\r\n常用的是 @babel/preset-env，结合 browserslist 设置代码的兼容性。\r\n\r\n### @babel/polyfill\r\n\r\n从 Babel 7.4.0 起废弃，推荐使用 core-js 和 regenerator-runtime。其中 core-js 提供了 ECMAScript 的所有兼容代码，regenerator-runtime 提供了 async、generator 等函数的执行环境。\r\n\r\n### @babel/helpers\r\n\r\n定义了 Babel 运行环境的辅助函数。如在 class 模块前插入 classCallCheck 的 helper。\r\n\r\nplugin 内的函数调用方式：\r\n\r\n```js\r\nexport default {\r\n visitor: {\r\n ClassExpression(path) {\r\n\t this.addHelper(\"classCallCheck\");\r\n // ...\r\n }\r\n};\r\n```\r\n\r\n生成的代码中将包含 classCallCheck：\r\n\r\n```js\r\nfunction _classCallCheck(instance, Constructor) {\r\n if (!(instance instanceof Constructor)) {\r\n throw new TypeError(\"Cannot call a class as a function\");\r\n }\r\n}\r\n\r\nvar Circle = function Circle() {\r\n _classCallCheck(this, Circle);\r\n};\r\n```\r\n\r\n### @babel/runtime\r\n\r\n提供 Babel 的运行环境，包括 regenerator-runtime。运行环境会提供一些辅助代码，如：\r\n\r\n使用 @babel/helpers 的情况：\r\n\r\n```js\r\nfunction _classCallCheck(instance, Constructor) {\r\n if (!(instance instanceof Constructor)) {\r\n throw new TypeError(\"Cannot call a class as a function\");\r\n }\r\n}\r\n\r\nvar Circle = function Circle() {\r\n _classCallCheck(this, Circle);\r\n};\r\n```\r\n\r\n使用 @babel/plugin-transform-runtime 可以把这些代码复用起来：\r\n\r\n```js\r\nvar _classCallCheck = require(\"@babel/runtime/helpers/classCallCheck\");\r\n\r\nvar Circle = function Circle() {\r\n _classCallCheck(this, Circle);\r\n};\r\n```\r\n\r\n@babel/runtime 源码中没有内容，依赖构建脚本将 @babel/helpers 中的代码复制过去。\r\n\r\n除了这个运行环境之外，Babel 还提供了 @babel/runtime-corejs2 和 @babel/runtime-corejs3，分别是基于 core-js v2 和 v3 提供的运行环境。可以在 @babel/plugin-transform-runtime 的 corejs 参数中设置使用的运行环境。\r\n\r\n## 辅助层\r\n\r\n### @babel/types\r\n\r\n提供基础的类型值，创建类型的函数，便于 @babel/plugin、@babel/parser 等使用。\r\n\r\n```js\r\nconst binaryExpression = t.binaryExpression('+', t.numericLiteral(1), t.numericLiteral(2))\r\n```\r\n\r\n### @babel/code-frame\r\n\r\n打印出错位置。示例代码：\r\n\r\n```js\r\nimport { codeFrameColumns } from '@babel/code-frame';\r\n\r\nconst rawLines = `class Foo {\r\n constructor()\r\n}`;\r\nconst location = { start: { line: 2, column: 16 } };\r\ncodeFrameColumns(rawLines, location);\r\n```\r\n\r\n输出的结果是：\r\n\r\n```\r\n 1 | class Foo {\r\n> 2 | constructor()\r\n | ^\r\n 3 | }\r\n```\r\n\r\n### @babel/highlight\r\n\r\n面向控制台输出有颜色的代码片段。\r\n\r\n```js\r\nimport highlight from \"@babel/highlight\";\r\n\r\nconst code = `class Foo {\r\n constructor()\r\n}`;\r\nhighlight(code);\t\t\t\t\t\t\t\t\t\t\t\t// => \"\\u001b[36mclass\\u001b[39m \\u001b[33mFoo\\u001b[39m {\\n constructor()\\n}\"\r\n```\r\n\r\n展示在控制台上：\r\n\r\n![@babel/highlight](https://qiniu.mdnice.com/b0d1af6522873c1ea4d8c240847fc846.png)\r\n\r\n### @babel/template\r\n\r\n模板引擎。\r\n\r\n```js\r\nimport template from \"@babel/template\";\r\nimport generate from \"@babel/generator\";\r\nimport * as t from \"@babel/types\";\r\n\r\nconst buildRequire = template(`\r\n var %%importName%% = require(%%source%%);\r\n`);\r\n\r\nconst ast = buildRequire({\r\n importName: t.identifier(\"myModule\"),\r\n source: t.stringLiteral(\"my-module\"),\r\n});\r\n\r\ngenerate(ast).code\t\t\t\t\t\t\t\t\t\t\t// => var myModule = require('my-module');\r\n```\r\n\r\n### @babel/helper-x\r\n\r\nBabel 的辅助函数，包含常用操作、测试函数等，内容比较庞杂。\r\n\r\n## 应用层\r\n\r\n### @babel/cli\r\n\r\n在命令行编译。\r\n\r\n```sh\r\nbabel script.js # 输出编译的结果\r\n```\r\n\r\n### @babel/standalone\r\n\r\n在浏览器编译。如：Babel 官网等会用到。\r\n\r\n```html\r\n

\r\n

\r\n\r\n\r\n\r\n\r\n```\r\n\r\n@babel/standalone 也会自动编译和执行 `` 和 `` 中的代码。\r\n\r\n```html\r\n

\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### @babel/node\r\n\r\n提供在命令行执行高级语法的环境。@babel/cli 只转换，不执行，@babel/node 会执行。不适合生产环境使用。\r\n\r\n```sh\r\nbabel-node -e script.js # script.js 里面可以使用高级语法\r\n```\r\n\r\n### @babel/register\r\n\r\n提供在 Node.js 运行环境内编译和执行高级语法。不适合生产环境使用。\r\n\r\n```js\r\nrequire(\"@babel/register\")();\r\nrequire(\"./script.js\"); \t\t\t\t\t// script.js 里面可以使用高级语法\r\n```\r\n\r\n## 常见的语法转换结果\r\n\r\n### `Array.from`\r\n\r\n```js\r\n// input\r\nArray.from([1, 2, 3])\r\n\r\n// output\r\nvar _array_from_ = require('@babel/runtime-corejs3/core-js-stable/array/from');\r\n_array_from_([1, 2, 3]);\r\n```\r\n\r\n### JSX\r\n\r\n```js\r\n// input\r\n

{content}

\r\n\r\n// output\r\nReact.createElement('div', { className: 'text' }, content);\r\n```\r\n\r\n### `class`\r\n\r\n```js\r\n// input\r\nclass Example extends Component { constructor(props) { super(props) } }\r\n\r\n// output\r\nvar _inherits_ = require('@babel/runtime-corejs3/helpers/interits');\r\nvar _class_call_check_ = require('@babel/runtime-corejs3/helpers/classCallCheck');\r\nvar _possible_constructor_return_ = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');\r\nvar _get_prototype_of_ = require('@babel/runtime-corejs3/helpers/getPrototypeOf');\r\nvar _create_class_ = require('@babel/runtime-corejs3/helpers/createClass');\r\n\r\nvar Example = function (_Component) {\r\n _inherits_(Example, _Component);\r\n\r\n function Example(props) {\r\n _class_call_check_(this, Example);\r\n\r\n return _possible_constructor_return_(this, _get_prototype_of_(Example).call(this, props));\r\n }\r\n\r\n _create_class_(Example, []);\r\n\r\n return Example;\r\n}(Component);\r\n```\r\n\r\n## 参考资料\r\n\r\n- [剖析 Babel——Babel 总览](http://www.alloyteam.com/2017/04/analysis-of-babel-babel-overview/)\r\n- [从AST编译解析谈到写babel插件](https://juejin.im/post/5b56e5636fb9a04fd26098bd)\r\n- [Babel是如何读懂JS代码的](https://zhuanlan.zhihu.com/p/27289600)","title","Babel 的工程化实现","last_reply_at","2020-01-11 03:44:44.611","good",true,"top",9,"visit_count",10094,"2020-01-05 13:52:06.869","author",{"_13":55,"_22":56},"vivaxy","https://avatars0.githubusercontent.com/u/4216856?v=4"]