新的一年babel了解一下
参考文档 Babel 插件手册
Babel
的作用
Babel
是一个JavaScript
编译器
很多浏览器目前还不支持ES6的代码,Babel
的作用就是把浏览器不资辞的代码编译成资辞的代码。
注意很重要的一点就是,Babel
只是转译新标准引入的语法,比如ES6的箭头函数转译成ES5的函数, 但是对于新标准引入的新的原生对象,部分原生对象新增的原型方法,新增的API等(如Set
、Promise
),这些Babel
是不会转译的,需要引入polyfill
来解决。
API
Babel
实际上是一组模块的集合。
@babel/core
Babel
的编译器,核心 API 都在这里面,比如常见的transform
、parse
。
npm i @babel/core -D
复制代码
- 使用
import { transform } from '@babel/core';
import * as babel from '@babel/core';
复制代码
- transform
babel.transform(code: string, options?: Object)
babel.transform(code, options, function(err, result) {result; // => { code, map, ast }
});
复制代码
- parse
babel.parse(code: string, options?: Object, callback: Function)
@babel/cli
cli
是命令行工具, 安装了@babel/cli
就能够在命令行中使用babel
命令来编译文件。
npm i @babel/core @babel/cli -D
复制代码
- 使用
babel script.js
复制代码
Note: 因为没有全局安装
@babel/cli
, 建议用npx
命令来运行,或者./node_modules/.bin/babel
,关于npx
命令,可以看下官方文档
@babel/node
直接在node
环境中,运行 ES6 的代码
- 使用
npx babel-node script.js
复制代码
babylon
Babel
的解析器
首先,安装一下这个插件。
npm i babylon -S
复制代码
先从解析一个代码字符串开始:
// src/index.js
import * as babylon from 'babylon';const code = `function add(m, n) {return m + n;
}`;babylon.parse(code);
复制代码
npx babel-node src/index.js
复制代码
Node {type: "File",start: 0,end: 38,loc: SourceLocation {...},program: Node {...},comments: [],tokens: [...]
}
复制代码
babel-traverse
用于对 AST 的遍历,维护了整棵树的状态,并且负责替换、移除和添加节点。
运行以下命令安装:
npm i babel-traverse -S
复制代码
import * as babylon from 'babylon';
import traverse from 'babel-traverse';const code = `function add(m, n) {return m + n;
}`;const ast = babylon.parse(code);traverse(ast, {enter(path) {if (path.node.type === 'Identifier' &&path.node.name === 'm') {// do something}}
});
复制代码
babel-types
用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法,对编写处理 AST 逻辑非常有用。
npm i babel-types -S
复制代码
import traverse from 'babel-traverse';
import * as t from 'babel-types';traverse(ast, {enter(path) {if (t.isIdentifier(path.node, { name: 'm' })) {// do something}}
});
复制代码
babel-generator
Babel 的代码生成器,它读取AST并将其转换为代码和源码映射(sourcemaps)
npm i babel-generator -S
复制代码
import * as babylon from 'babylon';
import generate from 'babel-generator';const code = `function add(m, n) {return m + n;
}`;const ast = babylon.parse(code);generate(ast, {}, code);
// {// code: "...",
// map: "...",
// rawMappings: "..."
// }
复制代码
Babel
是怎么工作的
为了理解Babel
,我们从ES6最受欢迎的特性箭头函数入手。
假设要把下面这个箭头函数的Javascript
代码
(foo, bar) => foo + bar;
复制代码
编译成浏览器支持的代码:
'use strict';
(function (foo, bar) {return foo + bar;
});
复制代码
Babel的编译过程和大多数其他语言的编译器相似,可以分为三个阶段:
- 解析(Parsing):将代码字符串解析成抽象语法树。
- 转换(Transformation):对抽象语法树进行转换操作。
- 生成(Code Generation): 根据变换后的抽象语法树再生成代码字符串。
解析(Parsing)
Babel
拿到源代码会把代码抽象出来,变成AST
(抽象语法树),洋文是Abstract Syntax Tree
。
抽象语法树是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现。它们主要用于源代码的简单转换。
箭头函数(foo, bar) => foo + bar;
的AST长这样:
{"type": "Program","start": 0,"end": 202,"body": [{"type": "ExpressionStatement","start": 179,"end": 202,"expression": {"type": "ArrowFunctionExpression","start": 179,"end": 202,"id": null,"expression": true,"generator": false,"params": [{"type": "Identifier","start": 180,"end": 183,"name": "foo"},{"type": "Identifier","start": 185,"end": 188,"name": "bar"}],"body": {"type": "BinaryExpression","start": 193,"end": 202,"left": {"type": "Identifier","start": 193,"end": 196,"name": "foo"},"operator": "+","right": {"type": "Identifier","start": 199,"end": 202,"name": "bar"}}}}],"sourceType": "module"
}
复制代码
上面的AST
描述了源代码的每个部分以及它们之间的关系,可以自己在这里试一下astexplorer。
AST
是怎么来的?解析过程分为两个步骤:
- 分词:将整个代码字符串分割成语法单元数组
Javascript
代码中的语法单元主要指如标识符(if/else、return、function)、运算符、括号、数字、字符串、空格等等能被解析的最小单元
[{"type": "Punctuator","value": "("},{"type": "Identifier","value": "foo"},{"type": "Punctuator","value": ","},{"type": "Identifier","value": "bar"},{"type": "Punctuator","value": ")"},{"type": "Punctuator","value": "=>"},{"type": "Identifier","value": "foo"},{"type": "Punctuator","value": "+"},{"type": "Identifier","value": "bar"}
]
复制代码
- 语法分析:建立分析语法单元之间的关系
语义分析则是将得到的词汇进行一个立体的组合,确定词语之间的关系。考虑到编程语言的各种从属关系的复杂性,语义分析的过程又是在遍历得到的语法单元组,相对而言就会变得更复杂。
简单来说语义分析既是对语句和表达式识别,这是个递归过程,在解析中,Babel
会在解析每个语句和表达式的过程中设置一个暂存器,用来暂存当前读取到的语法单元,如果解析失败,就会返回之前的暂存点,再按照另一种方式进行解析,如果解析成功,则将暂存点销毁,不断重复以上操作,直到最后生成对应的语法树。
转换(Transformation)
Plugins
插件应用于babel
的转译过程,尤其是第二个阶段Transformation
,如果这个阶段不使用任何插件,那么babel
会原样输出代码。
Presets
babel
官方帮我们做了一些预设的插件集,称之为preset
,这样我们只需要使用对应的preset就可以了。每年每个preset
只编译当年批准的内容。 而babel-preset-env
相当于 es2015 ,es2016 ,es2017 及最新版本。
Plugin/Preset 路径
如果 plugin 是通过 npm 安装,可以传入 plugin 名字给 babel,babel 将检查它是否安装在node_modules
中
"plugins": ["babel-plugin-myPlugin"]
复制代码
也可以指定你的 plugin/preset 的相对或绝对路径。
"plugins": ["./node_modules/asdf/plugin"]
复制代码
Plugin/Preset 排序
如果两次转译都访问相同的节点,则转译将按照 plugin 或 preset 的规则进行排序然后执行。
- Plugin 会运行在 Preset 之前。
- Plugin 会从第一个开始顺序执行。
- Preset 的顺序则刚好相反(从最后一个逆序执行)。
例如:
{"plugins": ["transform-decorators-legacy","transform-class-properties"]
}
复制代码
将先执行transform-decorators-legacy
再执行transform-class-properties
但 preset 是反向的
{"presets": ["es2015","react","stage-2"]
}
复制代码
会按以下顺序运行: stage-2
, react
, 最后es2015
。
生成(Code Generation)
用babel-generator
通过 AST 树生成 ES5 代码
编写一个Babel
插件
基础的东西讲了些,下面说下具体如何写插件。
插件格式
先从一个接收了当前babel对象作为参数的function
开始。
export default function(babel) {// plugin contents
}
复制代码
我们经常会这样写
export default function({ types: t }) {//
}
复制代码
接着返回一个对象,其visitor
属性是这个插件的主要访问者。
export default function({ types: t }) {return {visitor: {// visitor contents}};
};
复制代码
visitor
中的每个函数接收2个参数:path
和state
export default function({ types: t }) {return {visitor: {CallExpression(path, state) {}}};
};
复制代码
写一个简单的插件
我们写一个简单的插件,把所有定义变量名为a
的换成b
, 先从astexplorer看下var a = 1
的 AST
{"type": "Program","start": 0,"end": 10,"body": [{"type": "VariableDeclaration","start": 0,"end": 9,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 9,"id": {"type": "Identifier","start": 4,"end": 5,"name": "a"},"init": {"type": "Literal","start": 8,"end": 9,"value": 1,"raw": "1"}}],"kind": "var"}],"sourceType": "module"
}
复制代码
从这里看,要找的节点类型就是VariableDeclarator
,下面开搞
export default function({ types: t }) {return {visitor: {VariableDeclarator(path, state) {if (path.node.id.name == 'a') {path.node.id = t.identifier('b')}}}}
}
复制代码
我们要把id
属性是 a 的替换成 b 就好了。但是这里不能直接path.node.id.name = 'b'
。如果操作的是object,就没问题,但是这里是 AST 语法树,所以想改变某个值,就是用对应的 AST 来替换,现在我们用新的标识符来替换这个属性。
测试一下
import * as babel from '@babel/core';
const c = `var a = 1`;const { code } = babel.transform(c, {plugins: [function({ types: t }) {return {visitor: {VariableDeclarator(path, state) {if (path.node.id.name == 'a') {path.node.id = t.identifier('b')}}}}}]
})console.log(code); // var b = 1
复制代码
实现一个简单的按需打包功能
例如我们要实现把import { Button } from 'antd'
转成import Button from 'antd/lib/button'
通过对比 AST 发现,specifiers
里的type
和source
不同。
// import { Button } from 'antd'
"specifiers": [{"type": "ImportSpecifier",...}
]
复制代码
// import Button from 'antd/lib/button'
"specifiers": [{"type": "ImportDefaultSpecifier",...}
]
复制代码
import * as babel from '@babel/core';
const c = `import { Button } from 'antd'`;const { code } = babel.transform(c, {plugins: [function({ types: t }) {return {visitor: {ImportDeclaration(path) {const { node: { specifiers, source } } = path;if (!t.isImportDefaultSpecifier(specifiers[0])) { // 对 specifiers 进行判断const newImport = specifiers.map(specifier => (t.importDeclaration([t.ImportDefaultSpecifier(specifier.local)],t.stringLiteral(`${source.value}/lib/${specifier.local.name}`))))path.replaceWithMultiple(newImport)}}}}}]
})console.log(code); // import Button from "antd/lib/Button";
复制代码
总结
主要介绍了一下几个babel
的 API,和babel
编译代码的过程以及简单编写了一个babel
插件
新的一年babel了解一下相关推荐
- ES6新特性_使用babel对ES6模块化代码转换_使用browserify对代码进行打包_实现es6兼容其他浏览器--JavaScript_ECMAScript_ES6-ES11新特性工作笔记045
然后我们再来看一下, 我们一直在学ES6,但是,现在并不是,所有的浏览器对es6支持的都很好 一般我们用chorme浏览器,支持的还不错. 那么怎么让所有的浏览器都支持我们用es6写的代码呢? 我们可 ...
- 面试官(7): 聊一聊 Babel?
往期 面试官系列(1): 如何实现深克隆 面试官系列(2): Event Bus的实现 面试官系列(3): 前端路由的实现 面试官系列(4): 基于Proxy 数据劫持的双向绑定优势所在 面试官系列( ...
- babel 7.0.0-0_我们即将接近7.0 Babel版本。 这是我们一直在做的所有很酷的事情。...
babel 7.0.0-0 by Henry Zhu 朱Henry 我们即将接近7.0 Babel版本. 这是我们一直在做的所有很酷的事情. (We're nearing the 7.0 Babel ...
- AST基础知识:环境的搭建与babel库的安装
本文环境为win10系统,兼容各win系统(只需区分32位及64位操作系统),linux环境请自行下载测试. 一.安装nodejs 安装地址: https://nodejs.org/zh-cn/dow ...
- ES6 系列之 let 和 const
块级作用域的出现 通过 var 声明的变量存在变量提升的特性: if (condition) {var value = 1; } console.log(value); 复制代码 初学者可能会觉得只有 ...
- es6学习---.babelrc文件
babel是用来进行转码的,在不支持es6的环境下,需要将es6的语法转码成es5的语法格式,就用到了babel. .babelrc 文件的配置 在项目的根目录下创建 .babelrc 文件 文件包括 ...
- 记一次 react 15.3.1 老项目升级到 react 16.7.0 之路
互相交流学习,请加我微信: iyangyuanjian,QQ:624508914 1.前言 该项目是公司内部服务与外部服务的中台系统,我称之为大杂烩 项目始于:2015年10月8号 18:31:39秒 ...
- antd + react model自定义footer_更骚的create-react-app开发环境配置craco
背景 使用 CRA 脚手架创建的项目,如果想要修改编译配置,通常可能会选择 npm run eject 弹出配置后魔改.但是,eject 是不可逆操作,弹出配置后,你将无法跟随官方的脚步去升级项目的 ...
- webpack — 概述 (2)
webpack学前必备 webpack中文网 webpack官网 1. Webpack 介绍 Webpack 是什么?? (面试) 前端模块化打包工具 WebPack可以看做是模块打包机:它做的事情是 ...
最新文章
- python3精简笔记——开篇
- 在线计算机扫描软件,virscan多引擎在线扫描软件
- WordPress+Markdown+为知笔记,实现高质量笔记和博客
- 让我们Core在一起:ASP.NET Core amp; .NET Core
- 使用SharePoint 2010 母版页
- MCGS 无限配方数据存储及U盘导入导出-第一集
- Unity3D之Mecanim动画系统学习笔记(五):Animator Controller
- java特殊字符转义html_java转义html特殊字符
- leetcode python3 简单题198. House Robber
- 登录状态 token
- LINUX下载编译sqlite-jdbc的jar包
- VTD学习记录——八大进程概括(一)
- CS之攻击菜单详解-后门生成与上线
- 软件工程概论 课堂练习【用例图——门诊挂号】
- 图像处理-Sobel边缘检测(C++实现,不依赖opencv)
- 机器学习中矩阵求导法则
- DIV根据里面文字自动撑开
- Pytorch简单一览表
- 操作系统之短作业优先实现代码
- 判断Checkbox选中两种方法
热门文章
- 集群系统 刀片服务器,刀片服务器集群原理
- python绘图turtle小猪_turtle作图:用turtle画一个小猪佩奇(详解!)
- python super用法
- USACO1.1.2|贪婪的送礼者
- npm install 报错 :stack Error: Can't find Python executable python
- java数据库连接类,已经把数据库操作的方法都封装好了
- JavaScriptSerializer序列化与反序列化--备忘
- C#学习笔记——软件注册与注册机
- error LNK2001: unresolved external symbol QtCored.lib	using staic Qt lib
- 2009年最贱的18句话