资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/babel的初步了解

babel的初步了解

_Dreams / 440人阅读

摘要：表示的是在严格模式下解析并且允许模块定义即能识别和语法识别不了。

前段时间开始研究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的初步理解，如果有不正确的地方，欢迎指出。

云服务器 GPU云服务器 计算机的初步学习 深度学习的了解 对大数据的了解 了解域名的注册过程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100357.html

相关文章

  • webpack 项目构建：（二）ES6 编译环境搭建

    摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网 注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。   在上一章 webpack 项目构建：（一）基本架构搭建 我们搭建了一个最基本的 webpack 项目，现...

    marser 评论0 收藏0

  • webpack的Babel加载器

    摘要：的转译过程分为三个阶段。标准为例，提供了如下的一些的只转译该年份批准的标准，而则代指最新的标准，包括和。未完待续，继续学习继续补充哦参考文献深入理解原理及其使用 Babel Babel的转译过程分为三个阶段: parsing, transforming, generating。babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的原生对象，部分原生对...

    Ali_ 评论0 收藏0

  • ES2015入门系列9-Babel和Rollup

    摘要：虽然够好用，奈何没有浏览器对其可以完全支持，本文书写时间，开发版号称已经支持的特性。开始安装本系列假定读者都有使用经验，如果还没有，赶紧去这里了解并安装吧。到此，我们的已经准备就绪。 通过前面章节的讲解，大家对ES2015的一些新语法有了初步的理解，之前我们的测试代码都可以直接放入 Chrome Console 中直接运行，为了更好的学习后面的面向对象和模块开发，我先用一章介绍一下 B...

    eccozhou 评论0 收藏0

  • 揭秘babel的魔法之class魔法处理

    摘要：年，很多人已经开始接触环境，并且早已经用在了生产当中。我们发现，关键字会被编译成构造函数，于是我们便可以通过来实现实例的生成。下一篇文章我会继续介绍如何处理子类的并会通过一段函数桥梁，使得环境下也能够继承定义的。 2017年，很多人已经开始接触ES6环境，并且早已经用在了生产当中。我们知道ES6在大部分浏览器还是跑不通的，因此我们使用了伟大的Babel来进行编译。很多人可能没有关心过，...

    wqj97 评论0 收藏0

  • vue2首页加载慢的问题

    摘要：开发完了，并部署到服务器后，就遇到了一个非常明显的问题。所以可以利用按需加载来进一步缩小文件的体积。另外图片还可以去下面这个网上压缩一下经过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。 本次开发的项目中使用了vue2.5.2和自带的vue-cli生成了前端的基本架构。随后在项目开发当中，添加了自己写的UI组件，和复杂的业务逻辑。整个项目...

    canopus4u 评论0 收藏0

发表评论

登陆后可评论

0条评论

_Dreams

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<