前言
开始本篇文章前，我们先来思考几个问题：
平时自己创建新项目的流程是怎么样的？
团队为了落地规范化（git 提交规范、代码规范、文档规范等），做了哪些事情？
我想大部分同学肯定都是这样回答的：现在社区都有开箱即用的脚手架，像vue-cli、create-react-app这种，我们直接用脚手架来创建项目就可以了啊。
上面这种方式也是我所在的团队最开始的基操，但是随着团队成员的快速增加和业务的飞速迭代，有很多问题逐渐暴露出来：
大部分业务场景是相似的，那么对于基础框架结构的诉求（这里包括工具类、接口封装、环境变量配置、eslint 配置、git-hook 等）都是一样的。如果每次大家都从零开始，那么只会徒增很多毫无意义的重复性工作。
这里你可能会说：那我们简单的复制粘贴就可以了啊～
那你有没有感觉这种方式不太优雅呢？暂且不去评估这种方式的优缺点，如果后续基础框架结构发生调整，那么你是不是要继续坚持cv大法呢？
上面说了这么多，其实就是两个重点：
效率
复用性
我们团队内部也是发现了上述问题，结合自己的具体业务场景，自研了一套cli,主要也是基于Vue Cli打造而来，功能包含：
支持基于
Vue和React的不同模板统一的项目目录结构
丰富的工具类库
初始化配置文件
预定义的共用组件
丰富的命令行提示
这里关于Vue-Cli的具体操作我就不演示了，直接进入正题。
需要做哪些准备
其实，也就是来看下主要借助了哪些第三方库的能力：
commander.js[1]，可以自动的解析命令和参数，用于处理用户输入的命令。
download-git-repo[2]，下载并提取 git 仓库，用于下载项目模板。
Inquirer.js[3]，通用的命令行用户界面集合，用于和用户进行交互。
ora[4]，下载过程久的话，可以用于显示下载中的动画效果。
chalk[5]，可以给终端的字体加上颜色。
log-symbols[6]，可以在终端上显示出 √ 或 × 等的图标。
这些第三方库的链接我都有在文中标出，对应的api也都相对简单，大家可以自行前往查看具体的使用，这里就不展开说明了。
初始化项目
首先创建一个空项目，命名为 cosen-cli，然后新建一个 index.js 文件，并写入：
-
#!/usr/bin/env node
-
// 使用Node开发命令行工具所执行的JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明
-
-
console.log(
'senlin-cli初始化...')
再执行 npm init 生成一个 package.json 文件。最后安装上面需要用到的依赖。
npm install commander download-git-repo inquirer ora chalk log-symbols
然后现在的目录结构就是：
脚本映射为命令
初始化项目后，接下来有一步很重要的操作：把脚本映射为命令。
具体操作就是在package.json文件中添加：
-
"bin": {
-
"senlin":
"./index.js"
-
},
有了脚本后，怎么把脚本链接到全局呢（其实就是像你执行vue命令一样）？
这里只用在当前项目目录下执行npm link就可以了：
执行完npm link，这时你在命令行输入senlin便可以得到如下输出：
准备模版
针对我们的业务场景，我准备了两套模板：
-
const templates = {
-
"ts-vue": {
-
url:
"https://github.com/easy-wheel/ts-vue",
-
downloadUrl:
"https://github.com:easy-wheel/ts-vue#master",
-
description:
-
"ts-vue是一个中后台前端解决方案，它基于 vue, typescript 和 element-ui实现。",
-
},
-
"umi-hooks": {
-
url:
"https://github.com/easy-wheel/Umi-hooks",
-
downloadUrl:
"https://github.com:easy-wheel/Umi-hooks#master",
-
description:
-
"Umi-Hooks是一个中后台前端解决方案，它基于 umi, react, typescript 和 ant-design实现。",
-
},
-
};
“这里关于
downloadUrl有一点需要说明的是，url的格式须为：<host>:<userName>/<repo> <projectName> #branchName，否则会报'git clone' failed with status 128，具体可参考issue[7]
这里顺便贴下模板地址：
ts-vue[8]
umi-hooks[9]
也欢迎大家多多 star 啊！
commander 解析命令行参数
我们知道vue-cli给我们提供了很多便捷的指令：
这对于我们创建项目是很友好的，我这里也提供了几条指令：
-i:初始化项目-V:查看版本号信息-l:查看可用模版列表-h:查看帮助信息
对应代码：
-
const program = require(
"commander");
-
-
program
-
.version(packageData.version)
-
.option(
"-i, --init",
"初始化项目")
-
.option(
"-V, --version",
"查看版本号信息")
-
.option(
"-l, --list",
"查看可用模版列表")
-
program.parse(process.argv);
这里，我针对上面用到的相关api依次做下说明：
version
作用
用于定义命令程序的版本号
option
作用
定义命令的选项
参数说明
它接受四个参数，在第一个参数中，它可输入短名字 -i和长名字–-init,使用 | 或者,分隔，在命令行里使用时，这两个是等价的，区别是后者可以在程序里通过回调获取到；第二个为描述, 会在 help 信息里展示出来；第三个参数为回调函数，他接收的参数为一个string，有时候我们需要一个命令行创建多个模块，就需要一个回调来处理；第四个参数为默认值
parse
作用
用于解析process.argv
ok，到这里我们的前序工作就基本完成了。我这里梳理了一张cosen-cli的整体流程图：
下面我将按照流程图从左到右一次进行解析。
senlin -V
“注意我们最开始在
package.json文件的bin里面写入的脚本为"senlin": "./index.js"，也就是我们全局的指令为senlin
这个没什么好说的，就是用来输出当前cli的版本号：
senlin -l
这个是查看可用模版列表，目前我们有两套模板。这里针对senlin -l的处理是直接输出所有可用的模版信息：
-
if (program.opts() && program.opts().list) {
-
// 查看可用模版列表
-
for (let key in templates) {
-
console.log(
`${key} : ${templates[key].description}`);
-
}
-
}
命令行输入senlin -l可看到：
senlin -h
也就是帮助信息，是根据commander已知的信息自动生成的：
senlin -i
这条指令是用来初始化模板的，也是目前cosen-cli中比较重要且复杂的一条了。
我们结合上文的流程图来梳理下这块的逻辑：
首先，利用inquirer提供给用户输入自定义信息（包含项目名称、项目简介、作者名称、选择项目模版）。对应代码就是：
-
inquirer
-
.prompt([
-
{
-
type:
"input",
-
name:
"projectName",
-
message:
"请输入项目名称",
-
},
-
{
-
type:
"input",
-
name:
"description",
-
message:
"请输入项目简介",
-
},
-
{
-
type:
"input",
-
name:
"author",
-
message:
"请输入作者名称",
-
},
-
{
-
type:
"list",
-
name:
"template",
-
message:
"选择其中一个作为项目模版",
-
choices: [
"ts-vue (vue+ts项目模版)",
"umi-hooks (react+ts项目模版)"],
-
},
-
])
-
.then((answers) => {
-
// 把采集到的用户输入的数据解析替换到 package.json 文件中
-
console.log(
"选择", answers.template.split(
" ")[
0]);
通过answers可以获取到用户输入的信息，接下来我们要做的就是检查用户输入的项目名称是否已存在，防止已有项目被覆盖。这里对应是checkName。
checkName
-
// 创建项目前校验是否已存在
-
function checkName(projectName) {
-
return
new Promise((resolve, reject) => {
-
fs.readdir(process.cwd(), (err, data) => {
-
if (err) {
-
return reject(err);
-
}
-
if (data.includes(projectName)) {
-
return reject(
new Error(
`${projectName} already exists!`));
-
}
-
resolve();
-
});
-
});
-
}
校验完项目名称，接下来就是下载对应代码模板了，对应downloadTemplate。
downloadTemplate
-
function downloadTemplate(gitUrl, projectName) {
-
const spinner = ora(
"download template......").start();
-
-
return
new Promise((resolve, reject) => {
-
download(
-
gitUrl,
-
path.resolve(process.cwd(), projectName),
-
{ clone:
true },
-
function (err) {
-
if (err) {
-
return reject(err);
-
spinner.fail();
// 下载失败提示
-
}
-
spinner.succeed();
// 下载成功提示
-
resolve();
-
}
-
);
-
});
-
}
可以看到在下载代码的过程中，我们使用了spinner来营造loading的效果，这也是为了避免拉取代码时间过久，用户得不到及时的反馈。
无论代码拉取成功或者失败，最终都会通过spinner.succeed()或者spinner.fail()来结束spinner。
到这里，模板也拉取了。但还有一步没有做：用户通过交互式的命令行输入的项目名、作者、项目简介等信息我们并没有写入到本地的模板代码中。
下面，我们来完成这部分的工作，对应changeTemplate。
changeTemplate
-
async function changeTemplate(customContent) {
-
// name description author
-
const { projectName =
"", description =
"", author =
"" } = customContent;
-
return
new Promise((resolve, reject) => {
-
fs.readFile(
-
path.resolve(process.cwd(), projectName,
"package.json"),
-
"utf8",
-
(err, data) => {
-
if (err) {
-
return reject(err);
-
}
-
let packageContent = JSON.parse(data);
-
packageContent.name = projectName;
-
packageContent.author = author;
-
packageContent.description = description;
-
fs.writeFile(
-
path.resolve(process.cwd(), projectName,
"package.json"),
-
JSON.stringify(packageContent, null,
2),
-
"utf8",
-
(err, data) => {
-
if (err) {
-
return reject(err);
-
}
-
resolve();
-
}
-
);
-
}
-
);
-
});
-
}
ok，到这里，我们整个cosen-cli的功能就介绍和解析完成了。
下面让我们来看下最终的效果。我们在命令行执行senlin -i：
执行完成，本地就会生成一个senlin-cli-template的文件夹，对应就是我们采用umi-hooks生成的模板。这时我们打开文件夹的package.json文件：
-
{
-
"name":
"senlin-cli-template",
-
"author":
"fengshuan",
-
"description":
"cli模板"
-
"private":
true,
-
"scripts": {
-
"start":
"umi dev",
-
"build":
"umi build",
-
"test":
"umi test",
-
// ...
-
},
-
"dependencies": {
-
// ...
-
},
-
"devDependencies": {
-
// ...
-
},
-
}
可以发现对应字段已经是用户自定义的字段了。
完整代码
最后贴下完整的代码，今天介绍的这些只是cosen-cli中的比较基础的一部分，我们针对业务在cli上做了很多事情。本文只是简单的向大家介绍一下如何基于业务开发自己的脚手架。
下面是完整代码：
-
#!/usr/bin/env node
-
// 使用Node开发命令行工具所执行的JavaScript脚本必须在顶部加入 #!/usr/bin/env node 声明
-
-
const program = require(
"commander");
-
const download = require(
"download-git-repo");
-
const inquirer = require(
"inquirer");
-
const ora = require(
"ora");
-
const chalk = require(
"chalk");
-
const packageData = require(
"./package.json");
-
const handlebars = require(
"handlebars");
-
const logSymbols = require(
"log-symbols");
-
const fs = require(
"fs");
-
const path = require(
"path");
-
-
const templates = {
-
"ts-vue": {
-
url:
"https://github.com/easy-wheel/ts-vue",
-
downloadUrl:
"https://github.com:easy-wheel/ts-vue#master",
-
description:
-
"ts-vue是一个中后台前端解决方案，它基于 vue, typescript 和 element-ui实现。",
-
},
-
"umi-hooks": {
-
url:
"https://github.com/easy-wheel/Umi-hooks",
-
downloadUrl:
"https://github.com:easy-wheel/Umi-hooks#master",
-
description:
-
"Umi-Hooks是一个中后台前端解决方案，它基于 umi, react, typescript 和 ant-design实现。",
-
},
-
};
-
-
program
-
.version(packageData.version)
-
.option(
"-i, --init",
"初始化项目")
-
.option(
"-V, --version",
"查看版本号信息")
-
.option(
"-l, --list",
"查看可用模版列表");
-
program.parse(process.argv);
-
if (program.opts() && program.opts().init) {
-
// 初始化项目
-
inquirer
-
.prompt([
-
{
-
type:
"input",
-
name:
"projectName",
-
message:
"请输入项目名称",
-
},
-
{
-
type:
"input",
-
name:
"description",
-
message:
"请输入项目简介",
-
},
-
{
-
type:
"input",
-
name:
"author",
-
message:
"请输入作者名称",
-
},
-
{
-
type:
"list",
-
name:
"template",
-
message:
"选择其中一个作为项目模版",
-
choices: [
"ts-vue (vue+ts项目模版)",
"umi-hooks (react+ts项目模版)"],
-
},
-
])
-
.then((answers) => {
-
// 把采集到的用户输入的数据解析替换到 package.json 文件中
-
console.log(
"选择", answers.template.split(
" ")[
0]);
-
let url = templates[answers.template.split(
" ")[
0]].downloadUrl;
-
initTemplateDefault(answers, url);
-
});
-
}
-
if (program.opts() && program.opts().list) {
-
// 查看可用模版列表
-
for (let key in templates) {
-
console.log(
`${key} : ${templates[key].description}`);
-
}
-
}
-
-
async function initTemplateDefault(customContent, gitUrl) {
-
console.log(
-
chalk.bold.cyan(
"CosenCli: ") +
"will creating a new project starter"
-
);
-
const { projectName =
"" } = customContent;
-
-
try {
-
await checkName(projectName);
-
await downloadTemplate(gitUrl, projectName);
-
await changeTemplate(customContent);
-
-
console.log(chalk.green(
"template download completed"));
-
console.log(
-
chalk.bold.cyan(
"CosenCli: ") +
"a new project starter is created"
-
);
-
} catch (error) {
-
console.log(chalk.red(error));
-
}
-
}
-
-
// 创建项目前校验是否已存在
-
function checkName(projectName) {
-
return
new Promise((resolve, reject) => {
-
fs.readdir(process.cwd(), (err, data) => {
-
if (err) {
-
return reject(err);
-
}
-
if (data.includes(projectName)) {
-
return reject(
new Error(
`${projectName} already exists!`));
-
}
-
resolve();
-
});
-
});
-
}
-
-
function downloadTemplate(gitUrl, projectName) {
-
const spinner = ora(
"download template......").start();
-
-
return
new Promise((resolve, reject) => {
-
download(
-
gitUrl,
-
path.resolve(process.cwd(), projectName),
-
{ clone:
true },
-
function (err) {
-
if (err) {
-
return reject(err);
-
spinner.fail();
// 下载失败提示
-
}
-
spinner.succeed();
// 下载成功提示
-
resolve();
-
}
-
);
-
});
-
}
-
-
async function changeTemplate(customContent) {
-
// name description author
-
const { projectName =
"", description =
"", author =
"" } = customContent;
-
return
new Promise((resolve, reject) => {
-
fs.readFile(
-
path.resolve(process.cwd(), projectName,
"package.json"),
-
"utf8",
-
(err, data) => {
-
if (err) {
-
return reject(err);
-
}
-
let packageContent = JSON.parse(data);
-
packageContent.name = projectName;
-
packageContent.author = author;
-
packageContent.description = description;
-
fs.writeFile(
-
path.resolve(process.cwd(), projectName,
"package.json"),
-
JSON.stringify(packageContent, null,
2),
-
"utf8",
-
(err, data) => {
-
if (err) {
-
return reject(err);
-
}
-
resolve();
-
}
-
);
-
}
-
);
-
});
-
}
-
参考资料
[1]
commander.js: https://github.com/tj/commander.js
[2]download-git-repo: https://www.npmjs.com/package/download-git-repo
[3]Inquirer.js: https://github.com/SBoudrias/Inquirer.js
[4]ora: https://github.com/sindresorhus/ora
[5]chalk: https://github.com/chalk/chalk
[6]log-symbols: https://github.com/sindresorhus/log-symbols
[7]issue: https://github.com/wuqiong7/Note/issues/17
[8]ts-vue: https://github.com/easy-wheel/ts-vue
[9]umi-hooks: https://github.com/easy-wheel/Umi-hooks
转载：https://blog.csdn.net/MrWeb/article/details/112975871