BabelJs - Babel 预设

BabelJS - 理解 Babel 预设 (Presets)

Babel 预设（presets）是将一组 Babel 插件（plugins）打包在一起以方便使用的方式。你无需指定数十个用于常见 JavaScript 特性的独立插件，而是可以直接使用一个预设。预设显著简化了 Babel 的配置。

我们将讨论一些最重要且广泛使用的 Babel 预设：

• @babel/preset-env: 用于现代 Web 开发最重要的预设。
• @babel/preset-react: 用于转换 JSX 和其他 React 特有特性。
• @babel/preset-typescript: 用于处理 TypeScript。
• @babel/preset-flow: 用于处理 Flow 类型注解（目前不如以前常见，但仍受支持）。

要使用预设，你通常在 Babel 配置文件（例如 babel.config.json 或 .babelrc.json）中定义它们。

初始项目设置

首先，确保你有一个 Node.js 项目。如果没有，创建一个：

npm init -y

安装 Babel 的核心和 CLI 工具：

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

1. @babel/preset-env

@babel/preset-env 是一个智能预设，它允许你使用最新的 JavaScript 特性，而无需微观管理语法转换。它会根据你指定的目标环境自动确定所需的 Babel 插件和 polyfill。

安装：

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

配置 (babel.config.json)：

{
  "presets": ["@babel/preset-env"]
}

默认情况下，没有任何选项时，@babel/preset-env 会将所有 ECMAScript 2015+ 语法转译为 ES5。然而，它真正的强大之处在于其配置选项：

• targets: 指定你要支持的环境（例如，特定的浏览器版本，Node.js 版本）。然后 Babel 只会转译那些目标环境不支持的特性。
• useBuiltIns: 配置 @babel/preset-env 如何处理 polyfill（与 core-js 结合）。选项包括 "entry"、"usage" 或 false（默认）。
• corejs: 指定当 useBuiltIns 激活时使用的 core-js 版本，用于提供 polyfill。

示例：使用 @babel/preset-env

创建 main.js：

const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));

转译它：

npx babel main.js --out-file main_compiled.js

main_compiled.js (使用默认 @babel/preset-env 设置)：

"use strict";

var greet = function greet(name) {
  return "Hello, ".concat(name, "!");
};

console.log(greet('World'));

示例：带有 Targets 的 @babel/preset-env

如果你配置 babel.config.json 以 targeting 支持箭头函数和模板字面量的现代环境：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "chrome": "80",
        "firefox": "70"
      }
    }]
  ]
}

然后，转译相同的 main.js 可能会导致较少的转换，因为这些浏览器支持这些特性：

main_compiled.js (带有现代目标)：

"use strict";

const greet = name => `Hello, ${name}!`;

console.log(greet('World'));

这演示了 @babel/preset-env 如何根据你指定的目标调整其输出，从而在可能的情况下生成更高效和更现代的代码。

2. @babel/preset-react

此预设对于使用 React 的项目至关重要。它包含了将 JSX 转换为 React.createElement 调用以及其他 React 特有语法的插件，例如 Display Name 转换。

安装：

npm install --save-dev @babel/preset-react

配置 (babel.config.json，通常与 @babel/preset-env 一起使用)：

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
        "runtime": "automatic" // Recommended for modern React (17+)
    }]
  ]
}

"runtime": "automatic" 选项（Babel 8 中的默认设置，React 17+ 可用）会自动导入必要的 JSX 运行时函数，这样你就不必为了使用 JSX 而在每个文件中 import React from 'react'。

示例：JSX 转换

创建 app.jsx：

const element = <h1>Hello, React World!</h1>;

转译它：

npx babel app.jsx --out-file app_compiled.js

app_compiled.js (使用 runtime: "automatic")：

"use strict";

var _jsxRuntime = require("react/jsx-runtime");

var element = /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
  children: "Hello, React World!"
});

如果使用 classic runtime（"runtime": "classic" 或 React 17 之前的默认设置），它将看起来像这样，需要 React 在作用域内：

"use strict";

// Assuming React is imported or globally available
var element = React.createElement("h1", null, "Hello, React World!");

3. @babel/preset-typescript

对于使用 TypeScript 的项目，@babel/preset-typescript 允许 Babel 去除 TypeScript 类型注解，使你能够使用 Babel 生态系统进行进一步的转换或打包。

安装：

npm install --save-dev @babel/preset-typescript

配置 (babel.config.json)：

{
  "presets": [
    "@babel/preset-env", // For general JS features
    "@babel/preset-typescript"
  ]
}

重要提示：Babel 只执行 TypeScript 的类型剥离。它不执行类型检查。你仍然需要使用 TypeScript 编译器（tsc --noEmit）或具有 TypeScript 支持的 IDE 进行实际的类型检查。

示例：TypeScript 转换

创建 utils.ts：

function add(a: number, b: number): number {
    return a + b;
}
const result: number = add(5, 10);

转译它：

npx babel utils.ts --out-file utils_compiled.js --extensions ".ts,.tsx,.js,.jsx"

utils_compiled.js：

"use strict";

function add(a, b) {
  return a + b;
}

const result = add(5, 10);

类型注解被移除，只剩下纯 JavaScript。

使用预设显著简化了 Babel 配置，使开发者能够快速为常见的 JavaScript 方言和特性设置转译。请始终参考 Babel 官方文档以获取有关预设及其选项的最新信息。