5分钟了解 Babel

40 阅读3分钟

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-envplugin-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只发挥语法转换的功能,polyfillplugin-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的官方文档。