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

我们会实现以下功能：

支持命令行指定参数，指定要编译的文件、输出目录、是否 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，注册到全局，之后就可以直接这样使用了：

效果如下：

# 思路分析

# 代码实现：

# 测试

# 总结

手写 Babel cli篇|前端工程化

手写 Babel cli篇|前端工程化