手写 Babel： cli篇

约 1736 字大约 6 分钟

2026-02-28

提示

本章内容基于《Babel 插件通关秘籍》整理。

上节我们实现了完整的编译流程，支持了插件，可以通过引入模块的方式使用，这一节我们实现下命令行的方式。

我们会实现以下功能：

支持命令行指定参数，指定要编译的文件、输出目录、是否 watch 等
支持配置文件
编译文件的路径支持 glob，可以模糊匹配
生成 sourcemap，自动添加 sourceMapUrl 到文件内容中
支持 watch，文件变动立即重新编译

思路分析

命令行工具就是通过命令行启动的，要支持命令行启动需要在 js 文件开头加上

#!/usr/bin/env node

命令行参数的解析可以使用 commander，它可以解析命令行参数，然后可以直接拿到 parse 之后的结果。

配置文件的指定可以使用 cosmiconfig，它支持如下的查找方式：

package.json 的属性
扩展名为 rc 的 JSON 或者 YAML
扩展名为 .json、 .yaml、 .yml、 .js、.cjs 、.config.js、.config.cjs 的 rc 文件
.config.js 或者 .config.cjs 的 commonjs 模块

这种配置文件查找机制在 eslint、babel 等很多工具中都有应用，我们也采用这种方式。

文件模糊匹配使用 glob 来匹配，它会返回匹配后的文件路径。

glob("**/*.js", options, function (er, files) {})

watch 的实现使用 chokidar，它会监听文件的变动，包括文件增加、删除、修改、重命名，目录增加、删除等，然后把变动的文件路径传入回调函数。监听的文件也支持通过 glob 字符串来指定。

知道了 watch、命令行参数解析、配置文件查找、文件模糊匹配都怎么做之后，我们来串联下整体流程：

通过 commander 解析命令行参数，拿到 outDir（输出目录）、watch（是否监听）以及 glob 字符串
解析 glob 字符串，拿到要编译的文件路径
查找配置文件，拿到配置信息
依次编译每一个文件，传入配置信息，输出到 outDir 目录，并且添加 sourcemap 的关联
如果开启了 watch，则监听文件变动，每次变动都重新编译该文件

之后还需要在 package.json 中配置下 bin 属性，这样才可以作为命令行工具来注册。

下面我们实现一下：

代码实现：

引入 commander，声明 outDir、watch 等参数：

const commander = require('commander');

commander.option('--out-dir <outDir>', '输出目录');
commander.option('--watch', '监听文件变动');

commander.parse(process.argv);

对传入的参数 process.argv 做 parse 之后就可以拿到具体的值：

比如我们传入：

my-babel ./input/*.js --out-dir ./dist --watch

在代码里就可以拿到

const cliOpts = commander.opts();

cliOptions.outDir;// ./dist
cliOptions.watch // true
commander.args[0] // ./input/*.js

我们要对输入的参数做下校验，然后打印提示信息：

if (process.argv.length <=2 ) {
    commander.outputHelp();
    process.exit(0);
}

const cliOpts = commander.opts();

if (!commander.args[0]) {
    console.error('没有指定待编译文件');
    commander.outputHelp();
    process.exit(1);
}

if(!cliOpts.outDir) {
    console.error('没有指定输出目录');
    commander.outputHelp();
    process.exit(1);
}

这样，我们就完成了对命令行参数的处理。

接下来，我们对 glob 字符串做解析，拿到具体的文件路径：

const filenames = glob.sync(commander.args[0]);

然后查找配置文件：

const explorerSync = cosmiconfigSync('myBabel');
const searchResult = explorerSync.search();

我们通过 options 来集中存放命令行参数和解析后的配置文件的参数：

const options = {
    babelOptions: searchResult.config,
    cliOptions:  {
        ...cliOpts,
        filenames
    }
}

之后，就可以开始编译了。我们定义一个 compile 方法，传入文件路径的数组，然后，对每个文件的内容进行读取，然后进行编译，之后输出到目标目录。

这里要注意的是，如果 outDir 不存在，需要先创建。

function compile(fileNames) {
    fileNames.forEach(async filename => {
        const fileContent = await fsPromises.readFile(filename, 'utf-8');
        const baseFileName = path.basename(filename);
        const sourceMapFileName = baseFileName + '.map.json';

        // 编译的过程，后面补充
        
        //如果目录不存在则创建
         try {
            await fsPromises.access(options.cliOptions.outDir);
         } catch(e) {
            await fsPromises.mkdir(options.cliOptions.outDir);
         }
         // 拼接输出的路径
         const distFilePath = path.join(options.cliOptions.outDir, baseFileName);
         const distSourceMapPath = path.join(options.cliOptions.outDir, baseFileName + '.map.json');
 
         await fsPromises.writeFile(distFilePath, generatedFile);
         await fsPromises.writeFile(distSourceMapPath, res.map);
     })
}

编译就是使用我们之前实现的 babel core，把生成的 sourcemap 关联到目标代码。

const res = myBabel.transformSync(fileContent, {
    ...options.babelOptions,
    fileName: baseFileName
 });
 const generatedFile = res.code + '\n' + '//# sourceMappingURL='\n' + sourceMapFileName;

之后，如果指定了 watch，也需要重新编译一次：


if(cliOpts.watch) {
    const chokidar = require('chokidar');

    chokidar.watch(commander.args[0]).on('all', (event, path) => {
        console.log('检测到文件变动，编译：' + path);
        compile([path]);
    });
}

这样，我们就实现了命令行参数的解析，编译多个文件，watch 文件变动增量编译的功能。

下面我们来测试一下：

测试

我们在 test 目录下新建一个配置文件 myBabel.config.js:

function plugin2(api, options) {
    return {
        visitor: {
            Program(path) {
                Object.entries(path.scope.bindings).forEach(([id, binding]) => {
                    if (!binding.referenced) {
                        binding.path.remove();
                    }
                });
            },
            FunctionDeclaration(path) {
                Object.entries(path.scope.bindings).forEach(([id, binding]) => {
                    if (!binding.referenced) {
                        binding.path.remove();
                    }
                });
            }
        }
    }
}

module.exports = {
    parserOpts: {
        plugins: ['literal', 'guangKeyword']
    },
    plugins: [
        [
            plugin2
        ]
    ]
}

然后添加一个 input 目录，里面放上两个文件：

// input1.js
const c = 1;
const d = 2;
const e = 4;

function add(a, b) {
    const tmp = 1;
    return a + b;
}

add(c, d);

// input2.js
function minus(a, b) {
    return a - b;
}

minus(3, 4);

之后我们可以通过下面的方式来测试：

node ../src/cli/index.js ./input/*.js --out-dir ./dist --watch

也可以用 vscode 的 debugger 来跑，这样能打断点调试，在 .vscode/launch.json 中添加如下配置：

{
    "name": "测试 babel cli",
    "program": "${workspaceFolder}/exercize-babel/src/cli/index.js",//运行的代码
    "request": "launch",
    "type": "node",
    "args": [
        "./input/*.js", "--out-dir", "./dist",
        "--watch",
    ],//命令行参数
    "cwd": "${workspaceFolder}/exercize-babel/test"//运行的目录
},

然后点击 debug 按钮就可以跑了。但是这样测试需要指定路径，我们还可以把这个命令注册到本地的全局目录：

在 cli/index.js 文件开头加上:

#!/usr/bin/env node

在 package.json 中注册：

"bin": {
    "my-babel": "./src/cli/index.js"
}

然后执行 npm link，注册到全局，之后就可以直接这样使用了：

myBabel ./input/*.js --out-dir ./dist --watch

效果如下：

当然，如果是正式的命令行工具，需要发布到 npm 仓库，然后 npm install 的方式来安装和使用。

如果 npm link 之后还是找不到 my-babel 的命令，那么可能是你没有把全局bin 的位置添加到环境变量的 PATH 中，可以这样做：

export PATH = $PATH:`npm get prefix`/bin

把这行命令添加到 ~/.bashrc 下，然后 source ~/.bashrc 就可以了。

npm get prefix 是查看本地 npm 的全局路径，而 bin 就是命令的路径，添加到 PATH 中就可以查找到了。

总结

我们实现了 babel cli 的命令行参数的解析（commander），模糊匹配文件（glob）、配置文件查找（cosmiconfig）、监听文件变动（chokidar）等功能。之后在 package.json 中的 bin 来注册就可以使用了。

本地测试的时候可以 link 到全局目录，当然全局目录需要在 PATH 中，如果不在的话，需要 npm get prefix 看一下全局 npm 路径，然后添加到 PATH。

（代码在这里，建议 git clone 下来通过 node 跑一下）