通过 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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容