最近集团前端越来越多,项目也是超级多,每个前端技术能力参差不齐,用的脚手架也是各有不同,维护起来很是不方便,于是就想建立一个集团或者所有人都能用的脚手架工具,统一管理,所以就需要创建集团性质的脚手架工具;
// 如:
npm install guoshang -g
guoshang create progectname
功能需求:
1、创建全局包,通过安装的全局包管理创建项目,如:vue create progectname;
2、参数可选,根据需求进行配置,自动安装,如选择vue,koa2 或 react;
3、自动执行一些 shell 脚本,如 npm install;
思路:
1、配置 package.json 通过 npm link 生成本地测试环境;
2、通过 Commander 插件生成基础命令(vue也用的这个,是TJ大神搞的);
3、通过 download-git-repo 插件,下载模板(没错,vue也是用的这个);
4、通过 inquire.js 实现命令行选择配置,如 vue-cli 的配置选择;
5、通过 child_process 模块,执行 shell 脚本,如 npm install;
6、发布 npm 包;
总体上就是这个流程,下面会一一分析具体的每一项细节,并配上代码;
一、配置本地环境;
npm link 用来在本地项目和本地npm模块之间建立连接
"bin": {
"guoshang": "index.js"
},
guoshang 就是想要设置的全局命令名字,index.js 是入口文件
配置好后,执行 npm link 这个过程可能会失败,失败了就手动找到 npm 全局按转包文件地址,删掉,从新搞就行,比如我的地址是 C:\Users\86182\AppData\Roaming\npm\node_modules
配置成功后 可以执行 guoshang 会出现一些简单的指令,接下来就开始配置自己的指令;
二、利用 Commander 插件生成基础命令;
安装依赖
npm install commander --save
在Commander模块下存在option方法用来定义commander的选项options,用来作为选项的文档。原文地址:https://www.npmjs.com/package/commander
// 基础使用
const program = require('commander');
program
.option('-g, --git [type]', 'Add [marble]', 'Angie')
.parse(process.argv);
console.log("process.argv",process.argv)
console.log("program.args",program.args)
三、利用 download-git-repo 下载模板;
安装依赖
npm install download-git-repo --save
原文地址:
https://www.npmjs.com/package/download-git-repo
const download = require('download-git-repo');
download('这个参数?', 'test/tmp', function (err) {
console.log(err ? 'Error' : 'Success')
})
四、inquire.js 实现命令行选择配置;
安装依赖
npm install inquire.js --save
使用脚手架的时候最明显的就是与命令行的交互,如果想自己做一个脚手架或者在某些时候要与用户进行交互,这个时候就不得不提到inquirer.js
原文地址:https://www.npmjs.com/package/inquire
由于交互的问题种类不同,inquirer为每个问题提供很多参数:
type:表示提问的类型,包括:input, confirm, list, rawlist, expand, checkbox, password, editor;
name: 存储当前问题回答的变量;
message:问题的描述;
default:默认值;
choices:列表选项,在某些type下可用,并且包含一个分隔符(separator);
validate:对用户的回答进行校验;
filter:对用户的回答进行过滤处理,返回处理后的值;
transformer:对用户回答的显示效果进行处理(如:修改回答的字体或背景颜色),但不会影响最终的答案的内容;
when:根据前面问题的回答,判断当前问题是否需要被回答;
pageSize:修改某些type类型下的渲染行数;
prefix:修改message默认前缀;
suffix:修改message默认后缀。
// 基础语法
const promptList = [{
type: 'list',
message: '请选择一种水果:',
name: 'fruit',
choices: [
"Apple",
"Pear",
"Banana"
],
filter: function (val) { // 使用filter将回答变为小写
return val.toLowerCase();
}
}];
const inquirer = require('inquirer');
const promptList = [
// 具体交互内容
];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的结果
})
五、child_process;
child_process模块是nodejs的一个子进程模块,可以用来创建一个子进程,并执行一些任务。执行一些什么任务呢?shell命令知道吧,有了child_process模块,就可以直接在js里面调用shell命令去完成一些非常酷炫的操作了!!
举个栗子,GitHub、码云等git代码托管网站,都会有个webHook功能,当push了新的代码后,服务器可以开辟一个接口去接受这个webHook的请求,并进行git pull、npm run build等命令,从而达到自动化部署的目的!
原文地址:http://nodejs.cn/api/child_process.html
这个模块无需安装,是node的基础模块
封装:
const { spawn } = require('child_process');
const spawnCommand = (...args) => {
return new Promise((resole, reject) => {
const childProcess = spawn(...args);
childProcess.stdout.pipe(process.stdout);
childProcess.stderr.pipe(process.stderr);
childProcess.on('close', () => {
resole();
})
})
}
六、发布模块;
1、去npm官网注册账号;
2、命令行登录账号,npm login,然后输入用户名密码和邮箱;
3、npm publish;
如果安装中遇到问题,可以根据错误码来进行修改,遇到问题可以网上搜一下或者给留言;
希望这篇文档能帮助到你
最后配上 我的全局包源码地址 https://github.com/jianghaifei/gs-cli