Babel 是一个广泛使用的 JavaScript 编译器,可以将新版本的 JavaScript 代码转换为向后兼容的代码。这篇教程将向你介绍如何使用Babel来编译你的JavaScript代码。
步骤1:安装Babel
首先,你需要安装Babel。你可以使用以下命令来安装Babel:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这个命令会在你的项目中安装Babel的核心库、命令行工具和一个名为@babel/preset-env
的预设。预设是一组插件,用于将ES6+代码转换为ES5代码。
步骤2:创建Babel配置文件
接下来,你需要创建一个Babel配置文件,告诉Babel哪些转换需要进行。在项目的根目录下创建一个名为.babelrc
的文件,并将以下内容添加到文件中:
{
"presets": ["@babel/preset-env"]
}
这个配置文件告诉 Babel 使用@babel/preset-env
预设来转换代码。
步骤3:运行Babel
现在,你可以使用 Babel 来转换你的JavaScript代码了。使用以下命令来转换代码:
npx babel src --out-dir lib
这个命令将src
目录中的所有JavaScript文件转换为ES5代码,并将它们保存在lib
目录中。
步骤4:使用Babel插件
你还可以使用Babel插件来进行更高级的转换。例如,你可以使用@babel/plugin-transform-runtime
插件来转换ES6+的异步代码,更好的打包体积和效率等。首先,你需要安装插件:
npm install --save-dev @babel/plugin-transform-runtime @babel/runtime
如果使用 core-js v3 的 runtime,则需要安装 @babel/runtime-corejs3
然后,在.babelrc
文件中添加以下内容:
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 3
}]
]
}
plugin-transform-runtime
可以主要做了三件事:
- 当开发者使用异步或生成器的时候,自动引入
@babel/runtime/regenerator
,开发者不必在入口文件做额外引入 - 提供沙盒环境,避免全局环境的污染
- 移除
babel
内联的helpers
,统一使用@babel/runtime/helpers
代替,减小打包体积
这个配置文件告诉 Babel 使用 @babel/plugin-transform-runtime
插件来转换异步代码,并指定使用 core-js
版本3。
最佳实践
@babel/preset-env
和plugin-transform-runtime
二者都可以设置使用corejs
来处理polyfill
,二者各有使用场景,在项目开发和类库开发的时候可以使用不同的配置。
不要同时为二者配置core-js的功能
,以免产生复杂的不良后果。
最后,让我们来看看两个场景下的babel
配置项:
项目开发
useBuiltIns
使用usage
,尽量使用社区广泛使用的优质库以优化打包体积,不使用暂未进入规范的特性。plugin-transform-runtime
只使用其移除内联复用的辅助函数的特性,减小打包体积。
{
"presets": [
[
"@babel/preset-env",
{
// targets 官方推荐使用 .browserslistrc 配置
"useBuiltIns": "usage",
"corejs": {
"version": 3,
"proposals": false
}
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false // 默认值,即使如此依然需要 yarn add @babel/runtime
}
]
]
}
复制代码
类库开发
类库开发尽量不使用污染全局环境的polyfill
,因此@babel/preset-env
只发挥语法转换的功能,polyfill
由plugin-transform-runtime
来处理,推荐使用core-js@3
,并且不使用未进入规范的特性。
{
"presets": [
[
"@babel/preset-env",
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": {
"version": 3,
"proposals": true
},
"useESModules": true
}
]
]
}
复制代码
结论
现在,你已经知道了如何使用Babel来转换你的JavaScript代码。希望这篇教程能够帮助你更好地使用Babel。如果你想了解更多关于Babel的信息,请参阅Babel的官方文档。