可以在 官网 看到 Babel 所有的 CLI 命令。

要使用 CLI 命令,首先第一步是安装:

pnpm add --save-dev @babel/core @babel/cli

在安装 @babel/cli 的时候,需要同时安装 @babel/core 这个提供 Babel 核心 API 的包。CLI 背后实际上就是对 API 的调用。

编译文件

Babel 的 CLI 命令有一个基本的格式:

babel [file|dir|glob] --out-[file|dir] [file|dir]

如果没有指定 --out,那么会将编译后的结果输出到控制台。

常见的格式如下:

# 编译结果输出到控制台
babel script.js 
# 编译结果输出到指定文件
babel script.js --out-file script-compiled.js 
# 编译整个目录到指定目录下
babel src --out-dir lib
# 编译整个目录下的文件,输出到一个文件里面
babel src --out-file script-compiled.js
# 监视文件,当文件发生变化时自动重新编译
babel script.js --watch --out-file script-compiled.js 

同时可以指定是否要生成 source map:

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

忽略文件和拷贝文件

有时在进行编译的时候,想要忽略某些文件:

# 忽略 src 目录下面的所有测试文件
babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"

有些文件想要原封不动的进行拷贝,不需要 Babel 进行编译:

# 将 src 目录下的文件原封不动的复制到 lib 目录下
babel src --out-dir lib --copy-files 
# 进行拷贝时,忽略文件中匹配的文件不要拷贝
babel src --out-dir lib --copy-files --no-copy-ignored

使用插件和预设

在 CLI 命令行里也是可以指定插件和预设的:

# 指定插件
babel script.js --out-file script-compiled.js --plugins=@babel/transform-class-properties,@babel/transform-modules-amd
# 指定预设
babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow

使用配置文件

通过 --config-file 可以指定配置文件的位置:

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

如果想要忽略配置文件中的配置,可以使用 --no-babelrc

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