babel的初步了解

前段时间开始研究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的初步了解

而babel和webpack的协同开发,我也大概花了一张图表示他们之间的关系,但里面的原理,我后续会再去研究,研究好再分享一下:

babel的初步了解

以上是我对babel的初步理解,如果有不正确的地方,欢迎指出。

来源:https://segmentfault.com/a/1190000017499449

上一篇:企业级时间轴插件Vue-timelinepick


下一篇:JavaScript中的工厂方法、构造函数与class