BabelJs - CLI

BabelJS - 命令行界面 (CLI)

Babel 附带了一个强大的命令行界面 (CLI)，即 @babel/cli，它允许你直接从终端转译 JavaScript 文件。这对于简单的构建流程、脚本编写或将 Babel 集成到其他命令行工作流程中非常有用。

安装

首先，你需要在你的项目中安装 @babel/cli 和 @babel/core。建议将它们安装为本地开发依赖。

1. 初始化你的项目（如果尚未初始化）：

mkdir babel-cli-example
cd babel-cli-example
npm init -y

2. 安装 Babel CLI 和 Core：

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

你可能还需要一个预设 (preset)，例如 @babel/preset-env，来告诉 Babel 应用哪些转换 (transformation)：

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

你的 package.json 文件中的 devDependencies 字段现在将包含这些依赖：

{
  // ... package.json 的其他内容 ...
  "devDependencies": {
    "@babel/cli": "^7.x.x",
    "@babel/core": "^7.x.x",
    "@babel/preset-env": "^7.x.x"
  }
}

配置

Babel 需要一个配置文件来知道使用哪些预设和插件。在你的项目根目录中创建一个 babel.config.json（或 .babelrc.json）文件：

babel.config.json

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

这告诉 Babel 使用 @babel/preset-env 进行转换。如果需要，你可以在 @babel/preset-env 中配置 targets（参见“项目设置”或“Polyfills”章节）。

基本用法

让我们创建一个使用现代语法的简单 JavaScript 文件。创建文件 src/index.js：

src/index.js

const message = "Hello from Babel CLI!";
const greet = (name) => `${message} Welcome, ${name}!`;

console.log(greet("Developer"));

[1, 2, 3].map(n => n * 2).forEach(n => console.log(n));

将单个文件转译到标准输出

你可以使用 npx babel <文件路径> 命令转译一个文件并将其输出打印到终端：

npx babel src/index.js

终端输出 (示例)：

"use strict";

var message = "Hello from Babel CLI!";
var greet = function greet(name) {
  return "".concat(message, " Welcome, ").concat(name, "!");
};
console.log(greet("Developer"));
[1, 2, 3].map(function (n) {
  return n * 2;
}).forEach(function (n) {
  return console.log(n);
});

npx 是 npm 附带的一个工具，用于执行包的二进制文件。它确保你使用的是项目中安装的 @babel/cli 版本。

将单个文件转译到输出文件

要将转译后的代码保存到新文件，可以使用 --out-file（或 -o）选项：

npx babel src/index.js --out-file lib/index.js

这会创建一个 lib 目录（如果不存在），并将转译后的代码保存到 lib/index.js。

转译整个目录

要转译目录（例如 src/）中的所有 JavaScript 文件并将它们输出到另一个目录（例如 lib/），可以使用 --out-dir（或 -d）选项：

npx babel src --out-dir lib

这将处理 src/ 中所有 .js、.jsx、.es6、.es 文件，保持目录结构，并将转译后的文件保存到 lib/。

常用 CLI 选项

• --out-file 或 -o：将单个文件转译到指定的输出文件。
• --out-dir 或 -d：将整个目录转译到指定的输出目录。
• --watch 或 -w：监听文件变化并自动重新转译。在开发期间非常有用。
• --source-maps：生成源代码映射。可以是 true、inline 或 both。源代码映射帮助你在转译后仍然能够调试原始代码。
• --presets：直接在命令行上指定预设（尽管通常首选配置文件）。示例：--presets=@babel/preset-env,@babel/preset-react
• --plugins：直接指定插件。示例：--plugins=@babel/plugin-transform-arrow-functions
• --ignore <模式>：要忽略的文件的 glob 模式。示例：--ignore "**/*.test.js"
• --copy-files：转译目录时，复制 Babel 不处理的文件（例如 JSON 文件、图片）。
• --extensions <扩展名列表>：要处理的文件扩展名列表，用逗号分隔。默认值：.js,.jsx,.es6,.es。示例：对于 TypeScript 项目，使用 --extensions ".ts,.js"。
• --no-babelrc：禁用使用 .babelrc（较旧的配置）文件。babel.config.json 通常仍然会被加载。使用 --config-file false 来禁用加载 babel.config.json。

示例：监听变化

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

此命令会将 src 目录转译到 lib，生成源代码映射，然后继续监听 src 中的任何变化。当文件发生变化时，它将自动重新转译。

示例：忽略测试文件

假设你有一些不想转译到 lib 目录的测试文件，例如 src/utils.test.js：

npx babel src --out-dir lib --ignore "src/**/*.test.js","src/**/__tests__"

与 npm Script 结合使用

通常的做法是将 Babel CLI 命令添加到 package.json 文件的 scripts 部分。

// package.json (scripts 部分)
{
  // ...
  "scripts": {
    "build": "babel src --out-dir lib --source-maps",
    "watch": "babel src --out-dir lib --source-maps --watch"
  },
  // ...
}

现在你可以运行：

• npm run build：一次性转译你的代码。
• npm run watch：转译并监听变化。

通过 CLI 使用特定插件/预设 (不常用)

虽然通常最好在配置文件中管理预设和插件，但如果需要，你也可以在命令行上指定它们。为此，你还需要安装特定的插件。例如，如果你想在没有配置文件的情况下仅使用箭头函数转换：

npm install --save-dev @babel/plugin-transform-arrow-functions
npx babel src/index.js --out-file lib/index.js --plugins=@babel/plugin-transform-arrow-functions

这种方法对于完整项目来说不太常用，因为通过 CLI 参数管理许多插件会变得很繁琐。@babel/preset-env 通常会处理包含必要的转换插件。

何时使用 Babel CLI

• 服务端应用 (Node.js)： 当你想在 Node.js 代码中使用现代 JavaScript 特性，但需要支持较旧的 Node 版本时。
• 简单的构建流程： 对于不需要像 Webpack 这样复杂的打包器的较小项目或库。
• 实用脚本： 当使用现代 JavaScript 编写命令行工具或脚本时。
• 与其他工具集成： 作为由 shell 脚本或其他任务运行器协调的更大构建流程的一部分。

Babel CLI 是一个用于 JavaScript 转译的多功能工具。对于客户端浏览器应用，它通常与模块打包器（如 Webpack 或 Parcel）结合使用，这些打包器通过加载器（例如 babel-loader）以编程方式使用 @babel/core。然而，对于许多其他场景，CLI 提供了一种直接有效的方式来利用 Babel 的强大功能。

有关详细的 CLI 选项，请始终参考官方文档：https://babeljs.io/docs/babel-cli