Babel是什么
Babel 是一个 JavaScript 编译器。
Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
下面列出了 Babel 的主要功能:
- 语法转换
- 通过 Polyfill 方式在目标环境中添加缺失的特性(core-js)
- 源码转换(codemods)
ini
// Babel 输入: ES2015 箭头函数
[1, 2, 3].map(n => n + 1);
// Babel 输出: ES5 语法实现的同等功能
[1, 2, 3].map(function(n){ return n + 1;});
Babel配置
首先安装相关插件:
scss
npm install --save-dev @babel/core @babel/cli @babel/preset-env
创建babel.config.js文件:
ini
const presets = [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
corejs: "3.6.4",
},
],
];
module.exports = { presets };
preset预设
预设就是一堆插件的集合,如@babel/preset-env
这个预设里面就装了不下几十个plugins插件。
@babel/preset-env
智能预设,可以使用最新的 JavaScript 语法,不需要关心目标环境所支持的语法需要设置哪些语法转换插件(以及可选的 polyfills)。这样能让你的工作更轻松,也能让打出来的 JavaScript 包更小!
安装插件:
css
npm install --save-dev @babel/preset-env
开启智能预设:
perl
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry",
"corejs": "3.22"
}
]
]
}
配置参数:
targets
:编译目标浏览器的版本,默认为{}
modules
:是否启用 ES 模块语法到其他模块类型的转换,默认是auto
include
:需要编译的目录,默认是[]
exclude
:编译排除项目,默认是[]
useBuiltIns
:按需加载 默认是entry
corejs
:需要使用的corejs版本
@babel/preset-typescript
当使用TypeScript时,建议使用此预设。
安装插件:
css
npm install --save-dev @babel/preset-typescript
开启智能预设:
perl
{
"presets": [ "@babel/preset-typescript"]
}
配置参数:
isTSX
:开启 jsx 解析,默认为falsejsxPragma
:替换编译 JSX 表达式时所使用的函数,默认是React
jsxPragmaFrag
:替换编译 JSX 片段时使用的函数,默认是React.Fragment
plugins插件
正确转化源码,必须使用对应的 plugins。Babel 推崇功能的单一性,就是每个插件的功能尽可能的单一。比如想使用 ES6 的箭头函数,需要插件@babel/plugin-transform-arrow-functions
。
less
{
"plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}
Babel处理逻辑
Babel编译流程
作为JS
编译器,Babel
接收输入的JS
代码,经过内部处理流程,最终输出修改后的JS
代码。
在Babel
内部,会执行如下步骤:
-
将
Input Code
解析为AST
(抽象语法树),这一步称为parsing
-
编辑
AST
,这一步称为transforming
-
将编辑后的
AST
输出为Output Code
,这一步称为printing
babel-core
包含了这三个能力:
@babel/parser
将输入代码转化为AST@babel/traverse
通过深度优先 的方式遍历AST
树- 对于遍历到的每条路径,
@babel/types
提供用于修改AST
节点的节点类型数据 @babel/generator
将编辑后的代码转换为Output Code
core-js
core-js
是一套模块化的JS
标准库,包括:
- 一直到
ES2021
的polyfill
promise
、symbols
、iterators
等一些特性的实现ES
提案中的特性实现- 跨平台的
WHATWG / W3C
特性,比如URL