通过 npm link、Commander、download-git-repo、 inquire.js、child_process搭建自己的脚手架工具

最近集团前端越来越多,项目也是超级多,每个前端技术能力参差不齐,用的脚手架也是各有不同,维护起来很是不方便,于是就想建立一个集团或者所有人都能用的脚手架工具,统一管理,所以就需要创建集团性质的脚手架工具;

// 如:
npm install guoshang -g
guoshang create progectname
微信截图_20210201104807.png

功能需求:

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

微信截图_20210201102125.png

配置成功后 可以执行 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

2.png

由于交互的问题种类不同,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

你可能感兴趣的:(通过 npm link、Commander、download-git-repo、 inquire.js、child_process搭建自己的脚手架工具)