Skip to main content

@babel/cli

Babel 带有一个内置的 CLI，可用于从命令行编译文件。

🌐 Babel comes with a built-in CLI which can be used to compile files from the command line.

此外，各种入口点脚本位于顶层包 @babel/cli/bin 中。有一个可在 shell 中执行的实用程序脚本 babel-external-helpers.js，以及主要的 Babel 命令行脚本 babel.js。

🌐 In addition, various entry point scripts live in the top-level package at @babel/cli/bin. There is a shell-executable utility script, babel-external-helpers.js, and the main Babel cli script, babel.js.

安装​

🌐 Install

虽然你可以在你的机器上全局安装 Babel CLI，但最好还是按项目本地安装。

🌐 While you can install Babel CLI globally on your machine, it's much better to install it locally project by project.

这有两个主要原因。

🌐 There are two primary reasons for this.

  1. 同一台机器上的不同项目可以依赖不同版本的 Babel，让你可以单独更新它们。
  2. 不依赖你所工作的环境，让你的项目更容易移植和设置。

我们可以通过运行以下命令在本地安装 Babel CLI：

🌐 We can install Babel CLI locally by running:

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

如果你没有 package.json，请在安装前创建一个。这将确保与 npx 命令的正确交互。

安装完成后，你的 package.json 文件应该包括：

🌐 After that finishes installing, your package.json file should include:

{
  "devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.0.0"
  }
}

用法​

🌐 Usage

note

请先安装 @babel/cli 和 @babel/core，再安装 npx babel，否则 npx 会安装过时的 babel 6.x。除了使用 npx，你也可以把它放到 npm run 脚本 里，或者直接用相对路径执行。./node_modules/.bin/babel

Shell
npx babel script.js

🌐 Print Usage

Shell
npx babel --help

编译文件​

🌐 Compile Files

编译文件 script.js 并 输出到标准输出。

🌐 Compile the file script.js and output to stdout.

Shell
npx babel script.js
# output...

如果你想要输出到文件，你可以使用 --out-file 或 -o。

🌐 If you would like to output to a file you may use --out-file or -o.

Shell
npx babel script.js --out-file script-compiled.js

要在每次更改文件时编译它，使用 --watch 或 -w 选项：

🌐 To compile a file every time that you change it, use the --watch or -w option:

Shell
npx babel script.js --watch --out-file script-compiled.js

使用 Source Maps 编译​

🌐 Compile with Source Maps

note

自 v7.19.3 起，如果未指定此参数，@babel/cli 将遵循 配置文件。

如果你想要添加一个源映射文件，你可以使用 --source-maps 或 -s。

🌐 If you would then like to add a source map file you can use --source-maps or -s.

Shell
npx babel script.js --out-file script-compiled.js --source-maps

或者，如果你更想要内联源映射，可以改用 --source-maps inline。

🌐 Or, if you'd rather have inline source maps, use --source-maps inline instead.

Shell
npx babel script.js --out-file script-compiled.js --source-maps inline

编译目录​

🌐 Compile Directories

使用 --out-dir 或 -d 编译整个 src 目录，并将其输出到 lib 目录。这不会覆盖 lib 中的其他文件或目录。

🌐 Compile the entire src directory and output it to the lib directory by using either --out-dir or -d. This doesn't overwrite any other files or directories in lib.

Shell
npx babel src --out-dir lib

将整个 src 目录编译，并输出为一个合并的文件。

🌐 Compile the entire src directory and output it as a single concatenated file.

Shell
npx babel src --out-file script-compiled.js

包含 TypeScript 文件的目录​

🌐 Directories with TypeScript Files

使用 --extensions 选项来指定 Babel 在编译整个 src 目录时应该处理哪些文件扩展名。默认的 --extensions 可以从 Babel.DEFAULT_EXTENSIONS 访问。

🌐 Use the --extensions option to specify what file extensions Babel should handle when compiling the entire src directory. The default --extensions can be accessed from Babel.DEFAULT_EXTENSIONS.

Shell
npx babel src --out-dir lib \
  --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs \
  --presets=@babel/preset-typescript,@babel/preset-env,@babel/preset-react

忽略文件​

🌐 Ignore files

忽略规范和测试文件

🌐 Ignore spec and test files

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

复制文件​

🌐 Copy files

复制不会编译的文件

🌐 Copy files that will not be compiled

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

如果你不想复制被忽略的 JavaScript 文件：

🌐 If you don't want to copy ignored JavaScript files:

历史
版本变化
v7.8.0添加了 --copy-ignored
v7.8.4将 copyeIgnored 选项默认改为 true，可以通过 --no-copy-ignored 禁用
Shell
npx babel src --out-dir lib --copy-files --no-copy-ignored

管道文件​

🌐 Piping Files

通过标准输入传入一个文件并输出到 script-compiled.js

🌐 Pipe a file in via stdin and output it to script-compiled.js

Shell
npx babel --out-file script-compiled.js < script.js

使用插件​

🌐 Using Plugins

使用 --plugins 选项来指定编译中要使用的插件

🌐 Use the --plugins option to specify plugins to use in compilation

Shell
npx babel script.js --out-file script-compiled.js --plugins=@babel/transform-class-properties,@babel/transform-modules-amd

使用预设​

🌐 Using Presets

使用 --presets 选项来指定编译时要使用的预设

🌐 Use the --presets option to specify presets to use in compilation

Shell
npx babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow

使用配置文件​

🌐 Using Config Files

忽略 .babelrc.json 或 .babelrc​

🌐 Ignoring .babelrc.json or .babelrc

忽略项目的 .babelrc 或 .babelrc.json 文件中的配置，使用命令行选项，例如用于自定义构建

🌐 Ignore the configuration from the project's .babelrc or .babelrc.json file and use the cli options e.g. for a custom build

Shell
npx babel --no-babelrc script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/preset-react

自定义配置路径​

🌐 Custom config path

Shell
npx babel --config-file /path/to/my/babel.config.json --out-dir dist ./src

有关配置文件的更多信息，请看这里。

🌐 See here for more information about config files.

设置文件扩展名​

🌐 Set File Extensions

已添加于：v7.8.0

🌐 Added in: v7.8.0

默认情况下，转译后的文件会使用 .js 扩展名。

🌐 By default, the transpiled file will use the .js extension.

你可以用 --out-file-extension 来控制输出文件的扩展名

🌐 You can control the output file extension with --out-file-extension

Shell
npx babel src --out-dir lib --out-file-extension .mjs

你也可以使用 --keep-file-extension 来保留输入文件的扩展名

🌐 You can also preserve the input file extension with --keep-file-extension

Shell
npx babel src-with-mjs-and-cjs --out-dir lib --keep-file-extension

注意，--keep-file-extension 和 --out-file-extension 不能一起使用。

🌐 Note that --keep-file-extension and --out-file-extension cannot be used together.

产出水平​

🌐 Output levels

历史
版本变更
v7.7.0添加了 --silent
Shell
# Log everything to stdout
npx babel script.js --out-file script-compiled.js --verbose

# Mute the "Successfully compiled..." log
npx babel script.js --out-file script-compiled.js --silent

高级用法​

🌐 Advanced Usage

还有更多选项可供选择，查看 options、babel --help 和其他部分以获取更多信息。

🌐 There are many more options available, see options, babel --help and other sections for more information.