网站建设 之 jojo jox

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如何起作用?

1. babylon解释器把代码字符串转化为AST树, 例如import {uniq, extend, flatten, cloneDeep } from "lodash"转化为AST树

2. babel-traverse对AST树进行解析遍历出整个树的path.

3. plugin转换出新的AST树.

4. 输出新的代码字符串 文献地址

我们要编写的plugin在第三步.通过path来转换出新的AST树?下面我们就开始如何进行第三步!

首先我们需要安装二个工具babel-core和babel-types;

npm install --save babel-core babel-types;

5. babel-core提供transform方法将代码字符串转换为AST树

6. babel-types提供各种操作AST节点的工具库

明白了，基本上就是汇编原理那一类，我可太懂了