每次自己写一个项目之前，都是create-react-app来快速搭建的项目，但是每次都要在基础之上做一些修改，大多时候都是从之前的项目中copy代码过来，感觉每次做这些重复的操作是在浪费时间，于是决定学习一下如何自己搭建一个脚手架

目前想到的需要的功能

  • 可以通过终端命令my-cli create my-app来创建my-app项目
  • 创建的模板包含git，react-router，axios，webpack等常用插件
  • 创建package.json等文件内容
  • 自动安装当前的依赖

image.png

初始化

  1. # 终端创建项目根文件夹并进入到根文件夹
  2. mkdir my-cli && cd my-cli
  4. # 创建bin和src文件夹
  5. mkdir bin src
  7. # 初始化npm的包管理文件,该命令会询问你很多配置参数，如果不想询问直接在后面加-y参数即可
  8. npm init
  10. # bin下创建init.js作为脚本的入口文件
  11. cd bin && touch init.js
  13. # 并在init.js中键入如下内容：
  14. #!/usr/bin/env node
  15. console.log('Hello，my bin！')

image (1).png

接下来配置package.json文件，添加bin字段：

  1. {
  2.     "bin": {
  3.         "my-cli": "bin/init.js"
  4.     },
  5. }

这里定义了一个my-cli命令，执行该命令时，会运行配置的bin/init.js脚本，然后为了方便测试，通过执行npm link将这个包挂载到全局，然后执行my-cli：
image.png

Commander.js

我们在用一些脚手架的时候，可以通过命令行做一些交互，如配置author，description，name，或者带一些参数执行命令，为了达到上述目标，可以使用commander.js，参考文档：https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md

安装
  1. npm install commander -S

使用
  1. #! /usr/bin/env node
  3. // 引入依赖
  4. const { Command } = require('commander');
  5. const program = new Command();
  6. const package = require('../package');
  7. // 定义版本和参数选项
  9. program
  10.   .version(package.version, '-v, --version')
  11.   .option('-i, --init', 'init something')
  13. //解析对应参数
  14. program.parse(process.argv);
  16. //如果用户输入了上述参数，则会触发的事件
  17. if(program.init) {
  18.   console.log('init something')
  19. }

创建子命令

  1. // 调用command方法，创建一个create命令,同时create命令后面必须跟一个命令参数<project-name>
  2. program.command('create <project-name>')
  4.   // 定义该命令的描述
  5.   .description('创建<project-name>项目')
  7.   // 指定额外参数
  8.   .option('-f, --force', '忽略文件夹检查，如果已存在则直接覆盖')
  10.   /**
  11.    * 定义实现逻辑
  12.    * source表示<project-name>参数
  13.    * destination表示终端的cmd对象
  14.    */
  15.   .action((source, destination) => {
  16.     console.log(`创建了${source}项目`)
  17.     // new CreateCommand(source, destination)
  18.   });

我们需要关注一下destination这个参数，这个参数中的options包含了该命令所定义的参数列表，当执行命令时带了参数，则destination对象中对应的长命令键的值为true，因此为了解析到参数，我们从options拿到定义的所有长命令去匹配，并返回键值对：

  1. // src/util/util.js
  3. const isFunction = val => val && typeof val === 'function';
  5. /**
  6.  * parseCmdParams
  7.  * @description 解析用户输入的参数
  8.  * @param {} cmd Cammander.action解析出的cmd对象
  9.  * @returns { Object } 返回一个用户参数的键值对象
  10.  */
  11. exports.parseCmdParams = (cmd) => {
  12.   if (!cmd) return {}
  13.   const resOps = {}
  14.   cmd.options.forEach(option => {
  15.     const key = option.long.replace(/^--/, '');
  16.     if (cmd[key] && !isFunction(cmd[key])) {
  17.       resOps[key] = cmd[key]
  18.     }
  19.   })
  20.   return resOps
  21. }

Creator

  1. class Creator {
  2.   constructor(source, destination, ops = {}) {
  3.     this.source = source
  5.     //解析得到的参数
  6.     this.cmdParams = parseCmdParams(destination)
  7.     this.RepoMaps = Object.assign({
  9.       // 项目模板地址
  10.       repo: RepoPath,
  12.       // 临时缓存地址
  13.       temp: path.join(__dirname, '../../__temp__'),
  15.       // 项目目标存放地址
  16.       target: this.genTargetPath(this.source)
  17.     }, ops);
  19.     // git信息
  20.     this.gitUser = {}
  22.     // 实例化菊花图
  23.     this.spinner = ora()
  24.     this.init()
  25.   }
  27.   async init() {
  28.     try {
  30.       // 检查文件夹是否存在
  31.       await this.checkFolderExist();
  33.       // 下载git上到项目模板到临时文件夹
  34.       await this.downloadRepo();
  36.       // 将资源文件复制到模板文件夹
  37.       await this.copyRepoFiles();
  39.       // 修改package.json内容
  40.       await this.updatePkgFile();
  42.       // 初始化git
  43.       await this.initGit();
  45.       // 安装依赖
  46.       await this.runApp();
  47.     } catch (error) {
  48.       log.error(error);
  49.       exit(1)
  50.     } finally {
  52.       // 菊花图停止转动
  53.       this.spinner.stop();
  54.     }
  55.   }
  57.   checkFolderExist(){};
  58.   downloadRepo(){};
  59.   copyRepoFiles(){};
  60.   updatePkgFile(){};
  61.   initGit(){};
  62.   runApp(){};
  63. }
  65. exports.CreateCommand = Creator;

可以看到，init其实就是依次执行了一些操作，下面会详细说明上面调用的方法。

外观（ora和chalk）

如何自己搭建一个脚手架 - 图4

可以看到上图到终端里，有一个一直在转到东西，这个就是ora
如何自己搭建一个脚手架 - 图5

在控制台显示的这种五彩斑斓到效果就是chalk

使用chalk封装log
  1. // src/util/util.js
  2. const chalk = require('chalk');
  4. exports.log = {
  5.   warning(msg = '') {
  6.     console.warning(chalk.yellow(`${msg}`));
  7.   },
  8.   error(msg = '') {
  9.     console.error(chalk.red(`${msg}`));
  10.   },
  11.   success(msg = '') {
  12.     console.log(chalk.green(`${msg}`));
  13.   }
  14. }

配合ora使用的例子
  1. const chalk = require('chalk');
  2. const ora = require('ora');
  4. const spinner = ora('Loading start')
  6. // 开启菊花转转
  7. spinner.start(chalk.yellow('打印一个yellow色的文字'));

checkFolderExist()

  1. // 检查文件夹是否存在
  2.   checkFolderExist() {
  3.     return new Promise(async (resolve, reject) => {
  4.       const { target } = this.RepoMaps
  6.       if (this.cmdParams.force) {
  7.         await fs.removeSync(target)
  8.         return resolve()
  9.       }
  10.       try {
  11.         // 否则进行文件夹检查
  12.         const isTarget = await fs.pathExistsSync(target)
  13.         if (!isTarget) return resolve()
  15.         // 后文引入inquirer的配置
  16.         const { recover } = await inquirer.prompt(InquirerConfig.folderExist);
  17.         if (recover === 'cover') {
  18.           await fs.removeSync(target);
  19.           return resolve();
  20.         } else if (recover === 'newFolder') {
  21.           const { inputNewName } = await inquirer.prompt(InquirerConfig.rename);
  22.           this.source = inputNewName;
  23.           this.RepoMaps.target = this.genTargetPath(`./${inputNewName}`);
  24.           return resolve();
  25.         } else {
  26.           exit(1);
  27.         }
  28.       } catch (error) {
  29.         log.error(`[my-cli]Error:${error}`)
  30.         exit(1);
  31.       }
  32.     })
  33.   }

在调用checkFolderExist之前，我们解析得到了命令行的参数，如果当force为true，则直接删除该文件夹即可，如果没有该参数则询问用户想要怎么做。后面我们用到了fs-extra和Inquirer两个库，一个用于操作文件，另一个用于命令行交互，fs的操作非常简单这里不做展开。

Inquirer使用
  1. // src/command/config.js
  2. exports.InquirerConfig = {
  3.   // 文件夹已存在的名称的询问参数
  4.   folderExist: [{
  5.     type: 'list',
  6.     name: 'recover',
  7.     message: '当前文件夹已存在，请选择操作：',
  8.     choices: [
  9.       { name: '创建一个新的文件夹', value: 'newFolder' },
  10.       { name: '覆盖', value: 'cover' },
  11.       { name: '退出', value: 'exit' },
  12.     ]
  13.   }],
  14.   // 重命名的询问参数
  15.   rename: [{
  16.     name: 'inputNewName',
  17.     type: 'input',
  18.     message: '请输入新的项目名称: '
  19.   }]
  20. }

首先根据我们的需求，将我们要使用的命令行交互写下来：

  • 如果文件夹存在时，对应folderExist操作，给用户一个选择，type表示当前的命令行交互形式为一个列表，name表示这个操作返回的字段名，message为提示信息，然后choice给用户三个选项，对应三个不同的返回值value
  • 如果用户选择新建文件夹，对应rename操作，需要用户input一个新的名称

downloadRepo()

完成文件夹检测之后，我们通过download-git-repo库从git上根据RepoMaps的配置拉取模板

  1. const download = require('download-git-repo');
  3. // 下载repo资源
  4.   downloadRepo() {
  5.     this.spinner.start('正在拉取项目模板...');
  6.     const { repo, temp } = this.RepoMaps
  7.     return new Promise(async (resolve, reject) => {
  8.       await fs.removeSync(temp);
  9.       download(repo, temp, async err => {
  10.         if (err) return reject(err);
  11.         this.spinner.succeed('模版下载成功');
  12.         return resolve()
  13.       })
  14.     })
  15.   }

copyRepoFiles()

  1. const { copyFiles } = require('../util/util');
  3. // 拷贝repo资源
  4.   async copyRepoFiles() {
  5.     const { temp, target } = this.RepoMaps
  6.     await copyFiles(temp, target, ['./git', './changelogs']);
  7.   }
  1. // src/util/util.js
  2. // 拷贝下载的repo资源
  3. exports.copyFiles = async (tempPath, targetPath, excludes = []) => {
  5.   // 资源拷贝
  6.   await fs.copySync(tempPath, targetPath)
  8.   // 删除额外日志等文件
  9.   if (excludes && excludes.length) {
  10.     await Promise.all(excludes.map(file => async () =>
  11.       await fs.removeSync(path.resolve(targetPath, file))
  12.     ));
  13.   }
  14. }

将模板从下载的临时文件夹拷贝至目标文件夹，并删除git相关文件

updatePkgFile()

因为目前的项目是从git上拉取下来等，所以还需要更新package.json

  1.   // 更新package.json文件
  2.   async updatePkgFile() {
  3.     this.spinner.start('正在更新package.json...');
  4.     const pkgPath = path.resolve(this.RepoMaps.target, 'package.json');
  5.     // 定义需要移除的不必要字段
  6.     const unnecessaryKey = ['keywords', 'license', 'files']
  7.     // 获取git信息
  8.     const { name = '', email = '' } = await getGitUser();
  9.     // 读取package.json
  10.     const jsonData = fs.readJsonSync(pkgPath);
  11.     // 移除字段
  12.     unnecessaryKey.forEach(key => delete jsonData[key]);
  13.     // 更新package.json，覆盖下列字段并写入
  14.     Object.assign(jsonData, {
  15.       name: this.source,
  16.       author: name && email ? `${name} ${email}` : '',
  17.       provide: true,
  18.       version: "1.0.0"
  19.     });
  20.     await fs.writeJsonSync(pkgPath, jsonData, { spaces: '\t' })
  21.     this.spinner.succeed('package.json更新完成！');
  22.   }

getGitUser()
  1. // src/util/util.js
  2. // 获取git用户信息
  3. exports.getGitUser = () => {
  4.   return new Promise(async (resolve) => {
  5.     const user = {}
  6.     try {
  7.       const [name] = await runCmd('git config user.name')
  8.       const [email] = await runCmd('git config user.email')
  9.       if (name) user.name = name.replace(/\n/g, '');
  10.       if (email) user.email = `<${email || ''}>`.replace(/\n/g, '')
  11.     } catch (error) {
  12.       log.error('获取用户Git信息失败')
  13.       reject(error)
  14.     } finally {
  15.       resolve(user)
  16.     }
  17.   });
  18. }
  1. // src/util/util.js
  2. const childProcess = require('child_process');
  3. // 运行cmd命令
  4. const runCmd = (cmd) => {
  5.   return new Promise((resolve, reject) => {
  6.     childProcess.exec(cmd, (err, ...arg) => {
  7.       if (err) return reject(err)
  8.       return resolve(...arg)
  9.     })
  10.   })
  11. }

通过启动一个node子进程，执行上述命令即可获取到git用户信息

initGit() && runApp()

  1. async initGit() {
  2.     this.spinner.start('正在初始化Git管理项目...');
  3.     await runCmd(`cd ${this.RepoMaps.target}`);
  4.     // 改变node进程执行位置
  5.     process.chdir(this.RepoMaps.target);
  6.     await runCmd(`git init`);
  7.     this.spinner.succeed('Git初始化完成！');
  8.   }
  1. // 安装依赖
  2.   async runApp() {
  3.     try {
  4.       this.spinner.start('正在安装项目依赖文件，请稍后...');
  5.       await runCmd(`npm install --registry=https://registry.npm.taobao.org`);
  6.       this.spinner.succeed('依赖安装完成！');
  8.       console.log('请运行如下命令启动项目吧：\n');
  9.       log.success(`   cd ${this.source}`);
  10.       log.success(`   npm run dev`);
  11.     } catch (error) {
  12.       console.log('项目安装失败，请运行如下命令手动安装：\n');
  13.       log.success(`   cd ${this.source}`);
  14.       log.success(`   npm install`);
  15.     }
  16.   }

参考文章

详解前端脚手架开发排坑全指南【前端提效必须上干货】