前段时间开始研究ast,然后慢慢的顺便把babel都研究了,至于ast稍后的时间会写一篇介绍性博客专门介绍ast,本博客先介绍一下babel的基本知识点。
- 背景:
由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法,如果要在浏览器的设备上识别并执行,需要额外将这些非传统格式的语法转成传统的es5格式,而babel插件,就是用来将非es5格式的语法转成es5语法。
babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。其中babel插件或者其他插件都是在转换阶段起作用。
- babel核心包:
babel既然是个解释器,那么就会拥有解释,遍历,以及生成的一系列工具和api:
1)babylon:babel里面用来将js代码词法分析,生成ast,他的结构有些像acron,它的返回的结构里面包含着ast和tokens。
require("babylon").parse("code", {
// parse in strict mode and allow module declarations
sourceType: "module",
plugins: [
// enable jsx and flow syntax
"jsx",
"flow"
]
});
sourceType: module表示的是在严格模式下解析并且允许模块定义(即能识别import和expor语法);script识别不了。
2)babel-traverse:功能就像estraverse一样,主要是给plugin提供遍历ast节点的功能;
var babylon = require('babylon');
var result = babylon.parse(code, { sourceType: "module",});
console.log('result:', result);
import traverse from "babel-traverse";
traverse(result, {
enter(node) {
console.log(node);
}
});
3)babel-generator:将ast生成js代码;
var babylon = require('babylon');
var result = babylon.parse(code, { sourceType: "module",});
console.log('result:', result);
import traverse from "babel-traverse";
import generate from 'babel-generator';
traverse(result, {
enter(node) {
console.log(node);
}
});
var conde1 = generate(result);
console.log('generate:', conde1);
- babel工具包:
要完成复杂的转换工作,单靠核心包是不能完成的,所以必要还要依赖于其他工具包辅助。
1)babel-types:包含着ast中的所有类型,可以生成一个ast的节点,然后替换真是ast的节点,从而改变ast的内容(ast工具库,类似于lodash,具有校验,创建和转换ast的方法)。
import * as t from "babel-types";
console.log(t.stringLiteral("my-module"));
语法:t.anyTypeAnnotation(内容) // 最终返回一个类型的对象
2)babel-template:可以通过字符串的形式生成一个ast;
import template from "babel-template";
const buildRequire = template(`
var IMPORT_NAME = require(SOURCE);
`);
const ast2 = buildRequire({
IMPORT_NAME: t.identifier("myModule"),
SOURCE: t.stringLiteral("my-module")
});
console.log('ast2', ast2);
3)babel-helps: 主要是用来协助babel转换;
4)babel-core-frame: 主要是用来将错误信息打印出来;
5)babel-cli:babel的命令行工具,通过命令行对js代码进行转译;
6)babel-register: 因为babel工具文件,插件里面使用了很多require,而 该文件可以将node中的require于babel中的require绑定,从而可以使用require引入文件;
7)babel-plugin-xxx: 在转换过程中使用的插件;
8)babel-plugin-transform-xxx: 在transerform过程中使用到的插件;
(.babelrc文件:该文件会在babel编译过程中,自动配置babel的参数,babel的运行环境--env,babel的设置---preset,babel的所需要用到的插件---plugins等)
9)babel-core:该核心包包含着babel的核心(babel-lon,babel-traverse,babel-generate),提供了更多更友善的api给开发者使用。
- babel编译原理:
编译器就是讲高级的语言或者语法,编译成更进阶机器识别的语言和语法;
babel其实更像一个转译器,因为它主要是将高级的js语法转成低级的语法;
他们两者虽然有区别,但有很多相似之处(都是经历三个过程:解析,处理,生成);
以es6转成es5为例:
ES6代码输入 ==》 babylon进行解析 ==》 得到AST ==》 plugin用babel-traverse对AST树进行遍历转译 ==》 得到新的AST树 ==》 用babel-generator通过AST树生成ES5代码
- babel-pollfill,babel-runtime,transfer-runtime的区别:
babel-pollfill是针对于应用和页面范围内,对新的对象和新的语法进行兼容,主要是通过一些辅助函数进行兼容新的语法,但如果针对外部的库使用,就会产生污染全局环境的影响,一般对项目代码使用;
babel-runtime是对于外部插件和库的语法兼容,能将新的对象和语法,通过在运行时,把对应的可识别的语法和对象匹配出来并进行转换,从而显示在运行时进行语法降级兼容,且不会产生全局污染,一般对外部的插件使用;
transfer-babel是对babel-runtime进行封装,新的语法,对象能通过该插件,换种形式引用runtime的东西;
(其实runtime,pollfill都是建立在core-js之上的)。
对于babel的插件,主要是因为生成的ast的底层中有一个accept方法,专门用来接收visitor(插件)访问者对象,然后在visitor中定义各种节点类型的操作-visite,每个visite都可以接受一个path参数(节点信息,节点和位置信息的对象,其包含很多有用的方法),在visit中处理path,从而实现转换的作用。
const result = babel.transform(code, {
plugins: [{
visitor
}]
})
console.log(result.code);
至于visitor后续会详细介绍。
整个babel的结构图,我大概花了一张图表示出来:
而babel和webpack的协同开发,我也大概花了一张图表示他们之间的关系,但里面的原理,我后续会再去研究,研究好再分享一下:
以上是我对babel的初步理解,如果有不正确的地方,欢迎指出。