目录
- 一、 脚手架用到的工具
- 二、初始化项目
- 三、获取版本
- 四、安装依赖
- 五、 inquirer实现问答模式
- 六、 shell实现拉取代码（或者用download-git-repo）
- 七、download-git-repo实现拉取代码（或者用shelljs）
- 八、NPM发布
- 九、优化脚手架
- 十、常见错误
前端开发者都会用脚手架搭建vue、react项目，那么如何搭建一套自己的脚手架cli工具呢？
一、 脚手架用到的工具
二、初始化项目
- 初始化项目
npm init
- 新建bin文件夹，并在该文件夹下新建
index.js，question.js，create.js
- 配置初始化后生成的
package.json文件 - npm link链接到全局
主要是为了方便测试，把npm link在安装在本地目录。执行npm link之前，在package.json中指定bin 指定名字以及文件地址（上面我们已经配置过了）， 然后执行npm link(mac系统加sudo)。
5.初步测试
#!/usr/bin/env node需要固定在第一行，系统执行到这里后会沿着对应路径查找 node 并执行。
#! /usr/bin/env node console.log('测试')
执行guilai-cli 命令
guilai-cli
输出：
说明我们初步测试完成啦
三、获取版本
通过process.argv可以以数组形式获取命令行参数，通过用户传来的不同参数来判断执行不同操作
#! /usr/bin/env node program.version(require('../package.json').version); program.parse(process.argv);
guilai-cli -V
输出：
四、安装依赖
默认安装最新版本的命令，启动后可能会有一系列报错，博主的插件版本不会报错，报错可按上图的版本
yarn add chalk commander download-git-repo fs-extra handlebars inquirer ora shelljs
五、 inquirer实现问答模式
- 在bin文件夹下新建question.js文件。
fs-extra继承了fs的所有方法，并在此基础上进行了扩展，fse.existsSync判断项目是否重名
```javascript const fse = require("fs-extra") const create = [ { name: 'conf', type: 'confirm', message: '是否创建新的项目？', }, { name: 'name', message: '请输入项目名称:', validate: function (val) { if (!val) { return '亲，你忘了输入项目的名称哦～' } if (fse.existsSync(val)) { return '当前目录已存在同名的项目，请更换项目名' } return true }, //如果上面为false，则该步骤就不执行 when: res => Boolean(res.conf) }, { name: 'desc', message: '请输入项目的描述:', when: res => Boolean(res.conf) }, ] module.exports = { create }
- index.js文件中
如果在刚开始的选项是否新建项目选择false时，answers.conf的值就为false，将不会继续向下执行。
const program = require('commander'); const inquirer = require('inquirer'); const question = require("./question"); const initAction = () => { inquirer.prompt(question.create).then(answers => { if(answers.conf){ console.log(answers) console.log('项目名称：', answers.name)//test console.log("正在拷贝项目，稍等-----") } }) } program.version(require('../package.json').version); program.command('init').description('创建项目').action(initAction); program.parse(process.argv);
