5分钟了解 Babel

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的官方文档。