使用commander构建CI工具

最近在构建一个CI的工具，第一个时间想到了webpack，下面就如何构建一个CI工具进行详细介绍

0.准备工作

• 命令行工具

  命令行工具使用的是commander，关于commander的介绍，可以移步commander的github地址

• 打包工具

  webpack是目前主流的前端打包工具（姑且这么说），关于webpack的配置，可以移步webpack官网。

1.命令行工具的使用

直接上代码

#!/usr/bin/env node // 表示一个node命令
const prog = require('commander'); // 引入commander

// 当输入build参数时，执行的命令
prog.command('build [dirs...]')
  .description('build with webpack')
  .action(commands.build); // 指向build.js,表示bbuild具体执行的命令

2.webpack的配置

详细内容请参考：webpack官网
举个栗子：

const path = require('path');

module.exports = {
  mode: "production", 
  entry: "./app/entry", // string | object | array  // 这里应用程序开始执行
  // webpack 开始打包
  output: {
    path: path.resolve(__dirname, "dist"), // string
    filename: "[name].js", // string   
    publicPath: "/assets/", // string    // 输出解析文件的目录，url 相对于 HTML 页面
 },
 // 各种模块加载器
 module: {
    // 关于模块配置
    rules: [
      // 模块规则（配置 loader、解析器等选项）
      {
        test: /\.html$/,
        test: "\.html$"

        use: [
          // 应用多个 loader 和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      }
    ],
  resolve: {
    // 解析模块请求的选项, 用于查找模块的目录
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
    // 使用的扩展名
    alias: {
    },
  }

  performance: {
    hints: "warning", // 枚举    maxAssetSize: 200000, // 整数类型（以字节为单位）
    maxEntrypointSize: 400000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },
  devtool: "source-map",
}

3. 使用webpack的配置文件

如何在js中使用webpack的配置文件

1. 一次运行，常用于生产环境，相当于npm run build

在第一步中，commands.build 指向webpack具体打包的逻辑，其内容大致如下：

const webpack = require('webpack');
module.exports = function builder(dirs, options) {
     const config = require('path/to/your webpack配置');
     let compiler = webpack(config);
     compiler.run((err, stats) => {
         if (err) {
             return reject(err);
         }
     });
}

2. 监听运行，常用于开发环境，相当于npm run dev

const webpack = require('webpack');
module.exports = function builder(dirs, options) {
     const config = require('path/to/your webpack配置');
     let compiler = webpack(config);
     compiler.watch({
        aggregateTimeout: 300, // 延迟300ms监听变化
        poll: true, // 监听变化
        ignored: /node_modules/
    }, (err, status) => {
        console.log(chalk.green('Compiled successfully.\n'));
    })
}

4. 添加打包进度

添加打包进度在使用命令时非常简单，如：webpack --progress，但这仅限于使用命令的时候，才可以使用；网上很多人说使用webpack-dev-server添加进度，这种配合热更新确实很方便，但是如果仅仅需要添加打包进度，则有更简单的方式。

使用ProgressBarPlugin插件添加打包进度

进入npmjs官网搜索ProgressBarPlugin可查看详细信息；
在webpack的配置文件中，添加如下代码：

 plugins: [
    new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
      clear: false
    }),
   // 其他plugin ...
  ]

总结

至此，实现了使用commander构建CI的工具的基本流程，方式很简单。