babel的初步了解

时间: 2018-12-25阅读: 1216标签: 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和webpack的协同开发,我也大概花了一张图表示他们之间的关系,但里面的原理,我后续会再去研究,研究好再分享一下:


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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1691

babel polyfill 的一些理解

为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。简单来讲,babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。

webpack中配置babel

因为在webpack中,默认只能处理一部分es6的语法,一些更高级的es6和es7语法webpack不能处理,这时就需要第三方的loader即babel来帮助webpack来处理这些高级的语法

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

如何实现一个 Babel Macros?

可以发现实现一个 Babel macros 的过程与开发 Babel 插件的流程类似,都是对 AST 进行操作。babel-plugin-macro 只是提供一个在“外部”进行 AST 修改的方式,通过这种方式能够灵活的对 Babel 编译时进行拓展

使用@babel/preset-typescript取代awesome-typescript-loader和ts-loader

谈@babel/preset-typescript的优越性之前,还是先说下awesome-typescript-loader方案是如何对TypeScript进行处理的。首先我们需要知道TypeScript是一个将TypeScript转换为指定版本JS代码的编译器

Babel是什么?

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情

Babel 7 转码的正确姿势

Babel 转码的配置是每位前端童鞋在日常工作中都会遇到的。刚开始我也是在网上搜索各种配置方法,升级到 Babel 7 的时候又折腾了一把,所以决定把自己的心得和理解记录下来,希望能帮助到有需要的童鞋。

从 Babel 转译过程浅谈 ES6 实现继承的原理

都说 ES6 的 Class 是 ES5 的语法糖,那么 ES6 的 Class 是如何实现的呢?其实现继承的原理又是什么呢?不妨我们通过 Babel 转译代码的方式,看看其中有什么门道。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!