什么是 Babel?
官方的解释 Babel 是一个 JavaScript 编译器,用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前版本和旧版本的浏览器或其他环境中。
通俗来讲,Babel 是 Javascript 编译器 ,将 ES6,ES7 ,ES8 转换成 浏览器都支持的ES5 语法,并提供一些插件来兼容浏览器API的工具。
简单说 Babel 的工作就是:
- 语法转换
- 通过 Polyfill 的方式在目标环境中添加缺失的特性
- JS 源码转换
Babel 的基本原理
原理很简单,核心就是 AST (抽象语法树)。首先将源码转成抽象语法树,然后对语法树进行处理生成新的语法树,最后将新语法树生成新的 JS 代码,整个编译过程可以分为 3 个阶段 parsing (解析)、transforming (转换)、generating (生成),都是在围绕着 AST 去做文章,话不多说上图:
Babel 只负责编译新标准引入的新语法,比如 Arrow function、Class、ES Modul 等,它不会编译原生对象新引入的方法和 API,比如 Array.includes,Map,Set 等,这些需要通过 Polyfill 来解决
组成
Babel 的核心是在 @babel/core 这个npm 包,围绕在它周围的分别是
@babel/core AST转换的核心
@babel/cli 打包工具
@babel/plugin* Babel 插件机制,Babel基础功能不满足的时候,手动添加些
@babel/preset-env 把许多 @babel/plugin 综合了下,减少配置
@babel/polyfill 把浏览器某些不支持API,兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大
@babel/runtime 把你使用到的浏览器某些不支持API,按需导入,代码少
上面这些配置总得放在一个地方,.babelrc/babel.config.js 就是放这些配置地方,例如
{
"presets": [
["@babel/preset-env"]
],
"plugins": ["@babel/plugin-syntax-dynamic-import"],
]
}
Babel 只是转换 syntax 层语法,所有需要 @babel/polyfill 来处理API兼容,又因为 polyfill 体积太大,所以通过 preset的 useBuiltIns 来实现按需加载,再接着为了满足 npm 组件开发的需要 出现了 @babel/runtime 来做隔离
安装
安装命令行转码工具
Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:
npm install -g babel-cli
#查看是否安装成功
babel --version
Babel的使用
1、创建babel文件夹
2、初始化项目
npm init -y
3、创建文件 src/example.js ,下面是一段ES6代码:
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
4、配置 .babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则,将es2015规则加入 .babelrc:
{
"presets": ["es2015"],
"plugins": []
}
5、安装转码器,在项目中安装
npm install --save-dev babel-preset-es2015
6、转码
# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
自定义脚本
1、改写package.json
{
// ...
"scripts": {
// ...
"build": "babel src\\example.js -o dist\\compiled.js"
},
}
2、转码的时候,执行下面的命令
mkdir dist
npm run build
参考:
Babel学习系列
对 babel polyfill 的一些理解
前端工程师的自我修养-关于 Babel 那些事儿
babel归纳总结