javascript

演示网站：https://astexplorer.net/

各种 AST 解析器

JavaScript

最知名的当属 babylon，因为他是 babel 的御用解析器，一般 JavaScript 的 AST 这个库比较常用

acron:babylon 就是从这个库 fork 来的

HTML

htmlparser2：比较常用

parse5：不太好用，还需要配合 jsdom 这个类库

CSS

cssom、csstree 等

less/sass

XML

XmlParser

babel用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "presets": [
    [
      "env",
      {
        "targets": { // 配支持的环境
          "browsers": [ // 兼容浏览器类型和版本
            "last 2 versions",
            "safari >= 7"
          ],
          "node": "current" // 兼容Node类型和版本
        },
        "modules": true,  //设置ES6 模块转译的模块格式 默认是 commonjs。 但是推荐将 modules 设置为 false，即交由 Webpack 来处理模块化，通过其 TreeShaking 特性将有效减少打包出来的 JS 文件大小：
        "debug": true, // debug，编译的时候 console
        "useBuiltIns": false, // 是否开启自动支持 polyfill，还是不推荐用这个，因为推荐在plugins自己添加需要的垫片例如：transform-object-assign
        "include": [], // 总是启用哪些 plugins
        "exclude": []  // 强制不启用哪些 plugins，用来防止某些插件被启用
      }
    ]
  ],
  "plugins": [
    "transform-react-jsx" //如果是需要支持 jsx 这个东西要单独装一下。
  ]
}

AST

AST转化器https://astexplorer.net/

Babel的AST

解析原理

从babel讲到AST
babel插件入门-AST

解析方法

Babel 的三个主要处理步骤分别是：

解析（parse），转换（transform），生成（generate）。

  1. 解析
    使用 babylon 解析器,现在已变为babel-parser对输入的源代码字符串进行解析并生成初始 AST（File.prototype.parse）
    利用 babel-traverse 这个独立的包对 AST 进行遍历，并解析出整个树的 path，通过挂载的 metadataVisitor 读取对应的元信息，这一步叫 set AST 过程
    解析结果：

  2. 转换
    transform 过程：遍历 AST 树并应用各 transformers（plugin） 生成变换后的 AST 树
    babel 中最核心的是 babel-core，它向外暴露出 babel.transform 接口。

6
1
2
3
4
5
let result = babel.transform(code, {
    plugins: [
        arrayPlugin
    ]
})
  1. 生成
    利用 babel-generator 将 AST 树输出为转码后的代码字符串

解析模板的AST

解析原理

构建一个使用 Virtual-DOM 的前端模版引擎

Babel 插件

再写代码之前，你需要明白Babel它的原理，简单点说： Babel解析成AST，然后插件更改AST，最后由Babel输出代码
babel-coreBabel 的核心依赖包
babel-types包含里处理AST的一系列工具方法，具体可以查看文档,实际编写的时候，建议在astexplorer.net/中输入编译前后的代码，对比AST的区别，然后通过babel.types提供的方法修改AST即可。
那么Babel的插件模块需要你暴露一个function，function内返回visitor：

6
1
2
3
4
5
6
module.export = function(babel){
  return {
    visitor:{
    }
  }
}

练习写一个babel插件

写一个babel插件

AST实战从零开始写一个wepy转VUE的工具

javascript, js
← Prev Next →