【干货】打造自己的web前端工作流（一）--- 交互的命令行工具模板篇

imt/
├── bin/
│   └── cli.js
├── LICENSE
├── package.json
├── README.md
├── src/
│   ├── commands/
│   │   ├── create.js
│   ├── const.js
│   ├── index.js
│   ├── plugins/
│   │   └── index.js
│   ├── Service.js
│   ├── utils/
│   │   ├── index.js
│   │   ├── logger.js
│   │   ├── spinner.js

#!/usr/bin/env nodeconst program = require('commander'); // 一个命令行参数解析工具const pkg = require('../package.json'); // 这里是为了自动设置代理，有的仓库在外网，需要设置代理才能够下载program  .version(pkg.version)
  .option('-P, --proxy <proxy>', '设置代理')
  .option('-x, --defaultProxy', '使用内网代理', false);// 定义一个action，匹配后会执行指定的函数program  .command('create [template] [dir]')
  .description('初始化项目')
  .action((template, dir, options) => {
    require('../src/commands/create')(template, dir, options);
  });
  program.parse(process.argv); // 解析命令行参数if (!process.argv.slice(2).length) { // 没有参数直接输出帮助信息
  program.outputHelp();} else if (program.proxy) { // 将proxy设置到环境变量
  process.env.proxy = program.proxy;}

 "bin": {
    "imt": "./bin/cli.js"
  },

Usage: imt [options] [command]

Options:
  -V, --version             output the version number
  -P, --proxy <proxy>       设置代理
  -x, --defaultProxy        使用内网代理
  -h, --help                output usage information

Commands:
  create [template] [dir]   初始化项目

const inquirer = require('inquirer');// 内置模板const defaultTemplates = [
    { 
     name: 'React应用', 
     value: 'hxfdarling/imt-react-template' 
    },
    { 
     name: '微信小程序', 
     value: 'hxfdarling/imt-mp-template' 
    }];// ... 省略其他代码
  async getTemplate() {
    let { template } = this;
    if (!template) {
      ({ template } = await inquirer.prompt([
        {
          name: 'template',
          message: '选择内置模板',
          type: 'list',
          choices: defaultTemplates,
        },
      ]));
    }
    if (/\.zip$/.test(template)) {
      template = `direct:${template}`;
    }
    this.template = template;
  }
 // ... 省略其他代码 

const download = require('download-git-repo');const chalk = require('chalk');const ora = require('ora');//... 省去部分代码
  downloadTemplate() {
    const { template } = this; 
    const spinner = ora('模板下载中').start();
    return new Promise(resolve => {
      download(template, this.templateDir, {}, error => {
        if (error) {
          console.log(chalk.red(`下载模板失败:${template},请确认网络是否正常`));
          console.error(error);
          process.exit(1);
        } else {
          spinner.stop();
          console.log(chalk.green('模板下载成功'));
          resolve();
        }
      });
    });
  }

//... 省略其他代码
  await this.confirmDir(); // 提示用户当前目录不为空（如果不为空）
  await this.getTemplate();// 获取仓库地址
  await this.downloadTemplate(); // 下载模板
  console.log(chalk.yellow('初始化模板'));
  shell.cd(templateDir); // 切换命令行执行目录到模板目录
 // 由于内网，检测用户是否安装了tnpm，安装了就使用tnpm命令
  let npmCmd = 'npm';
  if (!shell.exec('tnpm -v', { silent: true }).stderr) {
    npmCmd = 'tnpm';
  }
  // 执行模板项目的node_modules初始化
  shell.exec(`${npmCmd} i`, { silent: true });
  const main = require(`${templateDir}/package.json`).main || 'index.js';
  // 运行模板项目的代码
  spawnSync('node', [`.template/${main}`], {
    cwd: this.projectDir,
    // 由于是在child_process中执行，可能有交互命令，需要继承父进程的标准输入，否则子进程无法获取到键盘输入
    stdio: 'inherit',
  });
  // 清理模板项目目录
  fs.emptyDirSync(templateDir);
  fs.removeSync(templateDir);//... 省略其他代码

imt-react-template/
├── bin/
│   └── cli.js
├── index.js // 模板执行脚本
├── package.json
├── README.md
└── templates/
    ├── common/ 两种不同模板共享文件
    ├── multi/ 多页面模板
    └── single/ 单页面模板

this.fs.copyTpl(
    this.templatePath('./common/.imtrc.js'),
    this.destinationPath('.imtrc.js'), 
    {
        app:"single",
        webapp:true
    });

module.exports = {
  // 应用类型
  mode:"<%= app %>",
  <% if (webapp) { %>
  // 支持webapp插件
  webappConfig:{
  },
  <% } %>
};