BabelJs - Babel CLI

BabelJS - 掌握 Babel CLI

Babel 命令行接口（CLI），即 @babel/cli，是一个强大的工具，可以直接从终端转译（transpile）JavaScript 文件。本章将深入探讨其用法、选项和实际应用。虽然许多复杂的项目通过 Webpack 等打包工具（bundlers）使用 Babel，但 CLI 非常适合服务器端代码、构建脚本或更简单的项目。

在继续之前，请确保你已按照 ‘BabelJS - CLI’ 和 ‘项目设置’ 章中所述，设置好项目并安装了必需的 Babel 包。这包括 @babel/core、@babel/cli 和 @babel/preset-env，以及一个 babel.config.json 文件。

项目回顾（先决条件）

1. 初始化项目并安装依赖：

mkdir advanced-babel-cli
cd advanced-babel-cli
npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env

2. Babel 配置 (babel.config.json)：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current" // 示例：指定当前 Node.js 版本为目标环境
        }
      }
    ]
  ]
}

3. 示例源文件：

创建一个 src 目录，并在其中放入几个文件：

src/main.js 文件内容：

import { greet } from './utils/helper.js';

const user = "World";
console.log(greet(user));

async function delayedMessage() {
  await new Promise(resolve => setTimeout(resolve, 100));
  console.log('This message is delayed!');
}
delayedMessage();

src/utils/helper.js 文件内容：

export const greet = (name) => `Hello, ${name} from a module!`;

export class Calculator {
  add(a, b) {
    return a + b;
  }
}

注意：如果目标环境支持 ES 模块语法（如现代 Node.js），@babel/preset-env 默认不会转译 import/export 等语法。如果你需要转译为 CommonJS（例如，为了兼容旧版 Node 或满足特定打包工具的要求），你可能需要调整 @babel/preset-env 的 modules 选项，例如在其配置中设置 "modules": "commonjs"。在本例中，我们假设目标环境可能需要模块转换，或者我们稍后希望演示打包过程。

深入探讨 CLI 命令和选项

编译文件和目录

如前所述，--out-file 用于单个文件，--out-dir 用于目录，它们是基础命令：

# Compile a single file
npx babel src/main.js --out-file lib/main.compiled.js

# Compile entire src directory to lib directory
npx babel src --out-dir lib

监听文件变化 (--watch 或 -w)

在开发过程中，监听文件变化并自动重新编译：

npx babel src --out-dir lib --watch

Babel 现在将监控 src 目录中的文件，并在文件修改时将其重新编译到 lib 目录。

生成 Source Maps (--source-maps)

Source maps 对于调试至关重要，因为它们将编译后的代码映射回你的原始源代码。选项包括：true（生成单独的 .map 文件）、inline（将 source map 嵌入到 JS 文件中）或 both。

npx babel src --out-dir lib --source-maps

这将在 lib 目录中，在编译后的 .js 文件旁边创建相应的 .js.map 文件。

忽略文件 (--ignore <pattern>)

从编译中排除特定文件或模式。这对于测试文件、文档等非常有用。模式类似于 glob 模式。

# 忽略所有 .test.js 文件以及所有 __tests__ 目录中的文件
npx babel src --out-dir lib --ignore "**/*.test.js","**/__tests__/**"

复制非 JS 文件 (--copy-files)

当编译一个目录时，Babel 只会处理它识别为 JavaScript 的文件。如果你的 src 目录中有需要复制到 lib 目录的其他资源（例如 JSON 数据、模板文件），可以使用 --copy-files 选项。

npx babel src --out-dir lib --copy-files

指定文件扩展名 (--extensions)

如果你使用非标准的文件扩展名（例如 ES 模块的 .mjs 或 TypeScript 的 .ts），需要告诉 Babel 处理它们：

# 假设已配置 @babel/preset-typescript 来处理 .ts 文件
npx babel src --out-dir lib --extensions ".ts,.js"

控制配置文件的使用

• --no-babelrc：忽略 .babelrc 和 .babelrc.js 文件。不会忽略 babel.config.json 或 babel.config.js。
• --config-file <path>：指定 babel.config.json（或 .js, .cjs, .mjs）文件的路径。使用 --config-file false 来禁用项目范围的配置。
• --presets <list> 和 --plugins <list>：逗号分隔的 preset/plugin 列表。通常，出于可维护性考虑，更推荐使用配置文件。

将多个源文件合并成一个（谨慎使用）

Babel CLI 可以将多个输入文件连接（concatenate）成一个输出文件。然而，这只是简单的文件连接，它不像打包工具（Webpack, Rollup, Parcel）那样处理模块依赖。 对于使用 import/export 等 ES 模块的项目，通常不建议这样做，除非你有非常特定的用例并清楚其影响。

# 将 src/utils/helper.js 和 src/main.js 合并到 lib/bundle.js
# 警告：这不会正确地解析这些文件之间的 ES 模块导入。
# npx babel src/utils/helper.js src/main.js --out-file lib/bundle.js (不推荐用于模块)

为了正确地进行模块打包，请使用 Webpack、Rollup 或 Parcel 等工具，它们通过编程方式使用 @babel/core。

实用的 npm 脚本

最好将 CLI 命令封装到 package.json 的 scripts 中，以提高一致性和易用性。

// package.json (scripts 部分)
"scripts": {
  "clean": "rm -rf lib", // 清理输出目录的辅助脚本
  "build": "npm run clean && babel src --out-dir lib --source-maps --copy-files",
  "start:dev": "npm run build -- --watch", // 使用 -- 将 --watch 参数传递给 build 脚本中的 babel 命令
  "lint": "eslint src/**/*.js" // 示例：如果你使用 ESLint
}

现在你可以运行：

• npm run build：清理 lib 目录并构建你的项目。
• npm run start:dev：构建项目然后监听文件变化。

通过 CLI 使用 Plugins 和 Presets（高级/特定场景）

如果你需要应用一个 preset 未包含的特定 plugin，或者想独立测试某个 plugin：

# 示例：使用一个假设的 plugin（先安装它）
# npm install --save-dev @babel/plugin-proposal-pipeline-operator (示例名称)
# npx babel src/main.js --plugins @babel/plugin-proposal-pipeline-operator --out-file temp.js

这通常用于实验或非常特定的构建步骤。对于大多数项目来说，在 babel.config.json 中定义 plugins 和 presets 是标准做法。

实际应用：转译 Node.js 应用

想象一下，你正在构建一个使用现代 JavaScript 特性（async/await、ES 模块、class properties）的 Node.js 服务器应用，但需要将其部署到运行旧版本 Node.js 的环境，该环境不完全支持这些特性。

1. 在 src/server.js 中使用现代语法编写服务器代码。

2. 配置 babel.config.json，使用 @babel/preset-env 并指定你的部署环境 Node.js 版本（例如，"targets": { "node": "12" }）。如果目标 Node 版本需要 CommonJS，你可能还需要在 @babel/preset-env 选项中设置 "modules": "commonjs"。

3. 使用类似 "build": "babel src --out-dir dist_server --copy-files" 的 npm 脚本。

4. 你的部署流程将运行 npm run build，然后从 dist_server 目录运行服务器（例如，node dist_server/server.js）。

Babel CLI 提供了一种灵活直接的方式，将 JavaScript 转译集成到各种开发工作流程中。虽然打包工具对于复杂的前端应用至关重要，但 CLI 对于 Node.js 开发、脚本编写和更简单的构建任务仍然是一个有价值的工具。

有关最新的、最全面的 CLI 选项列表，请始终查阅 Babel 官方文档：https://babeljs.io/docs/en/babel-cli