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 cli 脚本 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，允许你单独更新它们。

    ¥Different projects on the same machine can depend on different versions of Babel allowing you to update them individually.

  2. 对你正在工作的环境没有隐含的依赖使你的项目更具可移植性并且更易于设置。

    ¥Not having an implicit dependency on the environment you are working in makes your project far more portable and easier to setup.

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

¥We can install Babel CLI locally by running:

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

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

¥If you do not have a package.json, create one before installing. This will ensure proper interaction with the npx command.

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

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

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

用法​

¥Usage

注意

请先安装 @babel/cli 和 @babel/core，然后再安装 npx babel，否则 npx 将安装过时的 babel 6.x。除了 npx，你还可以将其放在 npm 运行脚本 中，或者你可以改为使用相对路径执行。./node_modules/.bin/babel

¥Please install @babel/cli and @babel/core first before npx babel, otherwise npx will install out-of-dated babel 6.x. Other than npx, you can also drop it inside of an npm run script or you may instead execute with the relative path instead. ./node_modules/.bin/babel

Shell
npx babel script.js

¥Print Usage

Shell
npx babel --help

编译文件​

¥Compile Files

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

¥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

注意

从 v7.19.3 开始，如果不指定该参数，@babel/cli 将跟随 配置文件。

¥Since v7.19.3, if this parameter is not specified, @babel/cli will follow the configuration files.

如果你想添加源映射文件，可以使用 --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

编译整个 src 目录并使用 --out-dir 或 -d 将其输出到 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 目录时应该处理的文件扩展名。可以从 Babel.DEFAULT_EXTENSIONS 访问默认的 --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:

History
版本变化
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 文件中的配置并使用 cli 选项，例如对于自定义构建

¥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.

高级用法​

¥Advanced Usage

还有更多可用选项，请参阅 选项、babel --help 和其他部分了解更多信息。

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