本期推荐的 Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版浏览器或环境中向后兼容的 JavaScript 版本。

Babel 是一个帮助你用最新版本的 JavaScript 编写代码的工具。当您支持的环境本身不支持某些功能时，Babel 将帮助您将这些功能编译为受支持的版本。

in:

// ES2020 nullish coalescing
function greet(input) {
  return input ?? "Hello world";
}

out:

function greet(input) {
  return input != null ? input : "Hello world";
}

使用指南

Babel 工具链中有很多工具试图让您轻松使用 Babel，无论您是“最终用户”还是构建 Babel 本身的集成。

设置的整个过程包括：

1.运行这些命令来安装软件包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.使用以下内容在项目的根目录中创建一个名为babel.config.json（requires及以上）的配置文件：v7.8.0

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

或者babel.config.js，如果您使用的是较旧的 Babel 版本

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

并运行此命令将src目录中的所有代码编译为lib：

./node_modules/.bin/babel src --out-dir lib

CLI 的基本用法

您需要的所有 Babel 模块都作为单独的 npm 包发布@babel（从版本 7 开始）。这种模块化设计允许使用各种工具，每种工具都针对特定用例而设计。在这里，我们将看看@babel/core和@babel/cli。

核心库

Babel 的核心功能位于@babel/core模块中。安装后：

npm install --save-dev @babel/core

您可以require直接在您的 JavaScript 程序中使用它并像这样使用它：

const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

但是，作为最终用户，您可能希望安装其他工具，作为开发过程的接口@babel/core并与您的开发过程很好地集成。即便如此，您可能仍想查看其文档页面以了解选项，其中大部分也可以从其他工具中设置。

命令行工具

@babel/cli是一个允许你从终端使用 babel 的工具。这是安装命令和基本用法示例：

npm install --save-dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

这将解析src目录中的所有 JavaScript 文件，应用我们告诉它的任何转换，并将每个文件输出到lib目录。由于我们还没有告诉它应用任何转换，因此输出代码将与输入相同（不保留确切的代码样式）。我们可以通过将它们作为选项传递来指定我们想要的转换。

配置 Babel

许多其他工具也有类似的配置：ESLint ( .eslintrc)、 Prettier ( .prettierrc)。

允许所有 Babel API选项。但是，如果该选项需要 JavaScript，您可能需要使用 JavaScript配置文件。

babel.config.json

在项目的根目录（在哪里）创建一个名为babel.config.json以下内容的文件package.json。

{
  "presets": [...],
  "plugins": [...]
}

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

.babelrc.json

在您的项目中创建一个名为.babelrc.json以下内​​容的文件。

{
  "presets": [...],
  "plugins": [...]
}

package.json

或者，您可以选择使用以下键.babelrc.json从内部指定您的配置：package.jsonbabel

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

JavaScript 配置文件

您还可以使用 JavaScript编写babel.config.json和文件：.babelrc.json

const presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

您可以访问任何 Node.js API，例如基于进程环境的动态配置：

const presets = [ ... ];
const plugins = [ ... ];

if (process.env["ENV"] === "prod") {
  plugins.push(...);
}

module.exports = { presets, plugins };

常问问题

为什么在箭头函数this中arguments重新映射？

箭头函数不是普通函数的同义词。arguments内部this箭头函数引用它们的外部函数，例如：

const user = {
  firstName: "Sebastian",
  lastName: "McKenzie",
  getFullName: () => {
    // whoops! `this` doesn't actually reference `user` here
    return this.firstName + " " + this.lastName;
  },
  // use the method shorthand in objects
  getFullName2() {
    return this.firstName + " " + this.lastName;
  },
};

为什么this被重新映射到undefined？

Babel 假设所有输入代码都是一个 ES2015 模块。ES2015 模块是隐式严格模式，因此这意味着顶级this不在window浏览器中，也不exports在节点中。

从 Babel 5.x 升级到 Babel 6

Babel 6 的核心是插件。您需要哪些插件完全取决于您的特定配置，但只需添加以下配置文件即可获得与 Babel 5 中相同的所有转换：

{
  "presets": ["env", "react", "stage-2"]
}

npm install babel-preset-env babel-preset-react babel-preset-stage-2 --save-dev

—END—

开源协议：MIT license