
作 者 | 管庆超(禾汐)
本文将介绍脚手架需要的一些工具 commander、chalk、inquirer、ora等,以及package.json中的一些重要字段,最后通过实例demo来展示如何开发脚手架,希望可以为大家带来帮助!
前言
我们大部分时间都专注于业务的开发,初始化项目的时候,拿起模板项目直接npm init X就开干。但是,有时候现成的脚手架未必就能满足我们的业务需求,这时就需要我们自己开发一个脚手架,那么我们使用的脚手架里面到底做了什么,如何自己搭建脚手架呢?本次就给大家简单介绍下脚手架的基本开发。
思考:我们平时用的脚手架模板Taro、create-react-app、rax 的cli都有什么样的特征呢?需要实现什么能力?
先看下Rax 官方提供的npm init rax命令




体验了rax脚手架之后,不难回答:
1.脚手架需要实现什么?
初始化项目模版能力。
2.脚手架需要什么功能?
-
问询功能 -
下载模版 -
写入模版 -
优化(git初始化,安装依赖等)
npm install chalk commander download-git-repo inquirer ora --save
Commander是完整的node 命令行解决方案, 编写代码来描述命令行界面。Commander 负责将参数解析为选项和命令参数,为问题显示使用错误,并实现一个有帮助的系统。
program.command('clone <source> [destination]')
import { Command } from 'commander';
const program = new Command();
program
.name('test-string-utils')
.description('CLI to some JavaScript string utilities by 禾汐')
.version('0.8.0');
program.command('split')
.description('Split a string into substrings and display as an array')
.argument('<string>', 'string to split')
.option('--first', 'display just the first substring')
.option('-s, --separator <char>', 'separator character', ',')
.action((str, options) => {
console.log('===>',str,options);
const limit = options.first ? 1 : undefined;
console.log(str.split(options.separator, limit));
});
program.parse();
// node ./demo/commander.js
// node ./demo/commander.js split --separator=/ a/b/c
// node ./demo/commander.js split -s / a/b/c
chalk.<style>[.<style>...](string, [string...])
Example: chalk.red.bold.underline('Hello', 'world');【链式调用】
import chalk from 'chalk';
const log = console.log;
log(chalk.blue('Hello world!'));
log(chalk.blue('Hello') + ' World' + chalk.red('!'));
log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));
log(chalk.green(
'I am a green line ' +
chalk.blue.underline.bold('with a blue substring') +
' that becomes green again!'
));
// Use RGB colors in terminal emulators that support it.
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));
import inquirer from 'inquirer';
inquirer
.prompt([
/* Pass your questions in here */
])
.then((answers) => {
// Use user feedback for... whatever!!
})
.catch((error) => {
if (error.isTtyError) {
// Prompt couldn't be rendered in the current environment
} else {
// Something else went wrong
}
});
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默认后缀。
-
input
import inquirer from 'inquirer';
const promptList = [{
type: 'input',
message: '设置一个用户名:',
name: 'name',
default: "test_user" // 默认值
},{
type: 'input',
message: '请输入手机号:',
name: 'phone',
validate: function(val) {
if(val.match(/\d{11}/g)) { // 校验位数
return val;
}
return "请输入11位数字";
}
}];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的结果
})
-
confirm
const promptList = [{
type: "confirm",
message: "是否使用def创建项目",
name: "watch",
prefix: "前缀"
},{
type: "confirm",
message: "是否初始化项目?",
name: "filter",
suffix: "后缀",
when: function(answers) { // 当watch为true的时候才会提问当前问题
return answers.watch
}
}];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的结果
})
-
list
-
rawlist
const promptList = [{
type: 'rawlist',
message: '请选择一种模板:',
name: 'template',
choices: [
"TNPM",
"WEB",
"小程序"
]
}];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的结果
})
-
expand
const promptList = [{
type: "expand",
message: "请选择一种初始化模板:",
name: "template",
choices: [
{
key: "t",
name: "TNPM",
value: "tnpm"
},
{
key: "w",
name: "WEB",
value: "web"
},
{
key: "m",
name: "小程序",
value: "miniapp"
}
]
}];
checkbox
const promptList = [{
type: "checkbox",
message: "选择模板:",
name: "template",
choices: [
{
name: "TNPM"
},
new inquirer.Separator(), // 添加分隔符
{
name: "WEB",
checked: true // 默认选中
},
new inquirer.Separator("%%%%%%% 分隔符 %%%%%%"), // 自定义分隔符
{
name: "小程序"
},
new inquirer.Separator("--- 分隔符 ---"), // 自定义分隔符
{
name: "Assets"
}
]
}];
password
const promptList = [{
type: "password", // 密码为密文输入
message: "请输入密码:",
name: "pwd"
}];
editor
const promptList = [{
type: "editor",
message: "请输入备注:",
name: "editor"
}];
import ora from 'ora';
import chalk from 'chalk';
const spinner = ora(`Loading ${chalk.red('模板')}`).start();
setTimeout(() => {
spinner.color = 'red';
spinner.text = 'Loading ...';
spinner.prefixText ='前缀'
spinner.spinner = {
"interval": 70, // 转轮动画每帧之间的时间间隔
"frames": [
"✹",
],
}
}, 1000);
setTimeout(() => {
spinner.warn('模板需要您更新npm包版本!')
}, 2000);
setTimeout(() => {
spinner.succeed ('模板下载成功!')
}, 3000);
setTimeout(() => {
spinner.fail ('模板下载失败!')
}, 3000);
import download from 'download-git-repo';
import rimraf from 'rimraf';
import path from 'path';
const dir = path.join(process.cwd(), "template");
rimraf.sync(dir, {}); //在下载前需要保证路径下没有同名文件
download(
"git@gitlab.XX:dinamic/miniapp-tracker.git#master", //仓库地址
dir,
{ clone: true },
function (err) {
console.log(err ? "Error" : "Success", err);
}
);
const dir = path.join(process.cwd(), "template");
rimraf.sync(dir, {}); //在下载前需要保证路径下没有同名文件
const spinner = ora(`Loading ${chalk.red('miniapp-tracker')} 仓库到template`).start();
download(
"git@gitlab.XX:dinamic/miniapp-tracker.git#master", //仓库地址
dir,
{ clone: true },
function (err) {
console.log(err ? "Error" : "Success", err);
err?spinner.fail ('模板下载失败!'):spinner.succeed ('模板下载成功!')
}
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{
"name": "ls",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"chalk": "^5.0.1",
"commander": "^9.4.0",
"download-git-repo": "^3.0.2",
"inquirer": "^9.1.0",
"ora": "^6.1.2",
"rimraf": "^3.0.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"keywords": [
"share-cli",
"cli"
],
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0",
"yarn": "^0.13.0"
}
}
"bin": {
"test-cli": "./bin.js"
},
#!/usr/bin/env node
function run (argv) {
if (argv[0] === '-v' || argv[0] === '--version') {
console.log(' version is 0.0.1');
} else if (argv[0] === '-h' || argv[0] === '--help') {
console.log(' usage:\n');
console.log(' -v --version [show version]');
}
}
run(process.argv.slice(2));
npm install . -g 或者 npm link
#!/usr/bin/env node
import fs from 'fs';
import path from 'path';
import chalk from 'chalk';
import download from 'download-git-repo';
import ora from 'ora';
import inquirer from 'inquirer';
import { exec } from 'child_process';
import { Command } from 'commander';
import checkDir from './checkDir.js';
const commander = new Command();
// const packageJsonDir = path.join(process.cwd(), 'package.json');
// const packageJson = JSON.parse(fs.readFileSync(packageJsonDir, 'utf8'))
// const { version } = packageJson;
const promptTypeList = [{
type: 'list',
message: '请选择拉取的模版类型:',
name: 'type',
choices: [
{
name: '天猫优品的业务脚手架',
value: {
url: "git@gitlab.XX:dinamic/miniapp-tracker.git#master", //仓库地址
gitName: 'web',
val: '天猫优品的业务脚手架'
}
},
{
name: '小程序',
value: {
url: "git@gitlab.XX:dinamic/miniapp-tracker.git#master", //仓库地址
gitName: 'miniapp',
val: 'miniapp'
}
},
]
}]
commander.version('1.1.1', '-v, --version')
.command('init <projectName>')
.alias("i")
.description("输入项目名称,初始化项目模版")
.action(async (projectName, cmd) => {
const dir = path.join(process.cwd(), projectName);
await checkDir(path.join(process.cwd(), projectName), projectName); // 检测创建项目文件夹是否存在
inquirer.prompt(promptTypeList).then(result => {
const { url, gitName, val } = result.type;
console.log("您选择的模版类型信息如下:" + val);
console.log('项目初始化拷贝获取中...');
if (!url) {
console.log(chalk.red(`${val} 该类型暂不支持...`));
process.exit(1);
}
const spinner = ora(`Loading ${chalk.red(val)} 仓库到项目中`).start();
download(
url,
dir,
{ clone: true },
function (err) {
err ? spinner.fail('模板下载失败!') : spinner.succeed('模板下载成功!')
}
);
fs.rename(url, projectName, (err) => {
if (err) {
exec('rm -rf ' + gitName, function (err, out) { });
console.log(chalk.red(`The ${projectName} project template already exist`));
} else {
console.log(chalk.green(`✔ The ${projectName} project template successfully create(项目模版创建成功)`));
}
});
})
});
commander.parse(process.argv);
-
nodejs交互工具库 -- chalk-pipe和chalk (地址:https://segmentfault.com/a/1190000037612232) -
nodejs交互工具库 -- commander和Inquirer (地址:https://segmentfault.com/a/1190000037629594) -
nodejs交互工具库 -- slash, minimist和dotenv, dotenv-expand (地址:https://segmentfault.com/a/1190000037645106) -
nodejs交互工具库 -- hash-sum, deepmerge和yaml-front-matter (地址:https://segmentfault.com/a/1190000037656240) -
nodejs交互工具库 -- resolve和semver (地址:https://segmentfault.com/a/1190000037662530) -
nodejs交互工具库 -- leven, lru cache和portfinder (地址:https://segmentfault.com/a/1190000037688124) -
nodejs交互工具库 -- ora和envinfo (地址:https://segmentfault.com/a/1190000037698795) -
nodejs交互工具库 -- memfs和execa (地址:https://segmentfault.com/a/1190000037702173) -
nodejs交互工具库 -- webpack-merge和webpack-chain (地址:https://segmentfault.com/a/1190000037778059) -
nodejs交互工具库 -- strip-ansi, address, default-gateway和joi (地址:https://segmentfault.com/a/1190000037794336) -
nodejs交互工具库 -- fs-extra, Acorn和zlib (地址:https://segmentfault.com/a/1190000038155823)

