写一个基于webpack的cli工具

写一个基于webpack的cli

更好阅读体验请访问：https://zhangzippo.github.io/posts/2019/06/08/_08customecli.html

前言

我们经常接触到各种各样的前端脚手架和cli工具，像vue-cli就是一款基于webpack的cli工具，我们有时候也有针对自己个性化项目快速构建的需求，这时候我们可以自己写一个cli工具。

准备

这里我们介绍基于webpack去写一个cli工具，从前往后讲，我们写一个cli,首先要先定义命令，通过命令触发webpack的构建流程。那么我们基本上需要以下几个工具包：

commander：命令行接口的完整解决方案,可以方便的创建自定义命令行
inquirer：用于创建可交互的命令行
webpack4: 构建的基础
有了以上几个核心工具包之后我们就可以开始编写我们的cli工具了

开始

先看一下我们的工作目录：

├── bin --定义自定义命令
├── src
│ ├── build -- 构建流程
│ ├── develop -- 开发流程
│ ├── produce
│ └── utils
└── webpack --webpack配置文件

配置命令

打开package.json,创建bin字段，为我们的命令起一个名字(例如block)，执行文件指向我们的bin目录。

"bin": {
    "block": "./bin/block-cli.js"
  },

这意味着我们的命令是以block开头的，例如block build,block init 等等。然后我们进行block-cli.js的编写，注意这个文件的开头一定要有#!/usr/bin/env node，关于这行的作用大家就自行百度吧。这里我们需要引入commander这个工具包了。这里简单介绍一下commander工具的用法：

#!/usr/bin/env node
const program = require('commander');
/**
 * project init
 */
program
  .command('init')
  .description('project init')
  .action(() => {
    init();
  });
/**
 * create modules and pages
 */
program
  .command('create ')
  .description('create module‘s or page’s path')
  .action((paths) => {
    createTemplete(paths);
  });
/**
 * build progress
 */
program
  .command('build')
  .option('-m, --module [module]', 'Specified the build module')
  .option('-p, --page [page]', 'Specified the build page')
  .description('build the project')
  .action((options) => {
    process.env.NODE_ENV = 'production';
    const build = require('../lib/build/build');
    build(options.module, options.page);
  });
program.parse(process.argv);

我们主要使用到3个方法，option,command,action, 这里分别介绍一下，option为我们创建命令的相关参数，例如commander会为我们创建一个默认的选项--help，例如我们可以执行block --help,这时控制台会输出我们定义的所有命令以及选项参数的帮助信息，如下：

$ block --help 
Options:
  -V, --version                  output the version number
  -conf, --config   output the info of target config
  -h, --help                     output usage information

Commands:
  init                           project init
  create               create module‘s or page’s path

如果我们想自定义帮助信息的输出，我们可以这样做(当调用--help时会触发--help事件执行这个回调)：

program.on('--help', () => {
  console.log(`\r\nRun ${chalk.greenBright('block  --help')} for detailed usage of given command.`);
});

下面来看第一行第一行我们调用command('init')，我们就创建了一个init命令（block init）.description为该命令创建一个描述，这样会在帮助信息里面显示出来，action里是我们要为这个命令执行的事情，这里我们执行了一个init方法，该方法内容是创建几个固定的目录这里就不展开了。
我们的第3个命令block build，是命令结合参数的用法，可以看到我们调用了.option方法设定了两个参数，-m和-p全称module和page，我这里的逻辑是构建特定的模块和页面。这段写法在执行的时候这样：
block -m a -p b
action中的options参数中包含这两个option的值，program.parse(process.argv)方法放到命令的最后，这个方法会终结命令的执行。

配置构建流程

这里我们可以把我们预先定义好的webpack配置文件放到我们webpack文件中，这里就不举例子了，大家使用自己的配置文件即可。

执行构建流程

既然是我们自己定义的cli工具，在使用的时候我们就不再使用webpack的cli调用方式了，比如我们正常执行构建的时候会使用命令webpack --config，在我们自己的构建工具中我们应该更优雅的采用webpack的node-api方式执行构建，例子：

import webpack from 'webpack';
import configuration from '../../webpack/webpack.config';

module.exports = () => {
  webpack(configuration, (err, stats) => {
    if (err) {
      console.error(err.stack || err);
      // if (err.details) {
      //   console.error(err.details);
      // }
      return;
    }
    console.log(stats.toString({
      colors: true,
      env: true,
    }));
    const info = stats.toJson();
    if (stats.hasErrors()) {
      console.error(info.errors);
    }

    if (stats.hasWarnings()) {
      console.warn(info.warnings);
    }
  });
};

这里的configuration就是我们预先准备的webpack配置文件，我们调用webpack()方法将配置传入，回调里包含err和stats两个参数负责输出错误信息和我们平时看到的构建流程的信息。
我们有时候也可能会用到webpack-dev-server，它也是提供node-api方式调用的，下面是例子：

import webpack from 'webpack';
import path from 'path';
import webpackDevServer from 'webpack-dev-server';
import merge from 'webpack-merge';
import chalk from 'chalk';
import getCommonConfig from '../utils/getCommonConfig';

module.exports = (modules = '*', pages = '*') => {
  const rootPath = process.cwd();
  const configuration = merge(getCommonConfig('development', modules, pages), {
    mode: 'development',
    devtool: 'source-map',
    plugins: [
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
    ]
  });
  const options = {
    contentBase: path.join(rootPath, 'static'),
    overlay: true,
    open: false,
    hot: true,
    compress: true,
    port: 8081,
    stats: {
      colors: true,
    },
    host: 'localhost',
    publicPath: '/'
  };
  webpackDevServer.addDevServerEntrypoints(configuration, options);
  const compiler = webpack(configuration);
  const server = new webpackDevServer(compiler, options);
  server.listen(8081, 'localhost', () => {
    console.log(chalk.greenBright('block dev-server listening on port 8081'));
  });
};
// module.exports = serverStart;

这边为了支持hotreload我们需要调用 webpackDevServer.addDevServerEntrypoints，另外使用api的时候以往我们写在配置文件中的devserve的配置我们以这个方法的options传入，不需要再在配置文件中定义了。
我们把执行的方法导出，在命令行定义处使用，就完成了我们自定义的cli工具的调用。

最后

以上我们就完成了一个简单的cli工具的基本流程，大家可以根据自己的需要去丰富流程。