React源代码解析(1):jsx语法是如何解析 - 掘金 (juejin.cn)
jsx是用babel插件转译的
从零开始编写一个babel插件 - 掘金 (juejin.cn)
在这里,我主要想强调一下babel参数的配置,如果我写了一个名叫fiveone的babel插件,我在参数中这么配置
{presets:["react-app", "es2015"],plugins:[["fiveone", {libraryName:"lodash"}],["transform-runtime", {}]],}起作用的顺序为fiveone->transform-runtime->es2015->react-app
复制代码
编译顺序为首先plugins从左往右然后presets从右往左
解释一下plugin如何起作用?
babylon解释器把代码字符串转化为AST树, 例如import {uniq, extend, flatten, cloneDeep } from "lodash"转化为AST树
babel-traverse对AST树进行解析遍历出整个树的path.
plugin转换出新的AST树.
输出新的代码字符串 文献地址
我们要编写的plugin在第三步.通过path来转换出新的AST树?下面我们就开始如何进行第三步!
首先我们需要安装二个工具babel-core和babel-types;
npm install --save babel-core babel-types;
babel-core提供transform方法将代码字符串转换为AST树
babel-types提供各种操作AST节点的工具库
明白了,基本上就是汇编原理那一类,我可太懂了