记一次脚手架搭建过程（一）

前言

​ 最近在做毕业设计，总感觉之前做项目的时候，直接在github上拷下别人的代码，然后照葫芦画瓢这样的做法不太好。在平时的工作过程中，项目的创建，开发，打包上线的流程我最多只能参与到开发这样一个环节，说实话，很不利于我们的成长。在时间还比较充裕的情况下，准备自己搭建一个脚手架感受一下。走你！

准备环境

​ node npm webpack webpack-cli

完整脚手架的组成

​ **项目模板：**为使用脚手架搭建项目的用户预先开发好项目的部分公共内容，节省开发时间

​ 命令行工具： 在命令行中，以问答的形式让用户输入项目名称，项目类型等项目信息，完成配置后自动拉取项目模板（甚至自动安装依赖，运行）

命令行工具

​ 第一步，命令解析

​ 在bin/zaoren中引入commander，并且声明init命令，comanner会在同级目录下寻找zaoren-init

#! /usr/bin/env node

const program = require('commander');
const { logPackageVersion } = require('../src/utils');

logPackageVersion();

program
  .usage('<command> [options]')
  .command('init [name]', 'init a project')
  .parse(process.argv);

第二步，问询

​ zaoren-init文件中创建项目，由于创建项目过程比较复杂，我们将创建项目的逻辑单独放在src/project中

if (typeof projectName !== 'string') {
    prompts.push({
      type: 'input',
      name: 'projectName',
      message: '请输入项目名(建议使用英文)：',
      validate(input) {
        if (!input) {
          return '项目名不能为空';
        }
        if (fse.existsSync(input)) {
          return '当前目录已存在同名项目，请更换项目名';
        }
        return true;
      }
    });    
  }

第三步，从仓库下载项目

​ 配置好项目信息以后，将项目模板从远程仓库上下载下来…

download(TEMPLATE_GIT_REPO, downloadPath, { clone: true }, (err) => {
    if (err) {
      downloadSpinner.color = 'red';
      downloadSpinner.fail(err.message);
      return;
    }

    downloadSpinner.color = 'green';
    downloadSpinner.succeed('下载成功');

    // 复制文件
    console.log();
    const copyFiles = getDirFileName(downloadPath);

    copyFiles.forEach((file) => {
      fse.copySync(path.join(downloadPath, file), path.join(projectPath, file));
      console.log(`${chalk.green('✔ ')}${chalk.grey(`创建: ${projectName}/${file}`)}`);
    });
    ...
  });

具体源码，可以参考 https://github.com/zaoren/zaoren-cli

第四步，将命令行工具发布到npm官网

​ 命令行工具完成了，那么怎么才能像create-react-app和vue-cli一样，让其他小伙伴，直接使用npm安装就能使用呢？很简单！只需要将自己的包发布到npm官网，其他小伙伴就可以使用npm命令安装你的命令行工具，并且使用你的项目模板了！

​ 具体操作参考： https://www.cnblogs.com/marymei0107/p/6339710.html

​ 发布完成后，命令行运行 npm view zaoren-cli

命令行工具完整代码：https://github.com/zaoren/zaoren-cli