为了做这个功能,还特意写了去查了为什么叫脚手架,原来来自于工程术语。
脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
工作中,经常有很多个项目,但是每个项目中公共的部分都得手动复制、粘贴,还得调试,导致工作量增大、效率也不高,所以考虑定制脚手架。
定制脚手架的作用:
- 可以快速生成项目节约时间,提升开发效率
- 统一规范
- 方便npm版本项目升级
- 封装组件、工具等
- 直接执行命令就可以,不用再去打开git地址
- 形成自动化也可以减少错误
做这个之前,先得学习几个常用重要工具库。
常用工具库
- commander:参数解析 --help其实就借助了他~ 解析用户输入的命令**
const program = require('commander')
program
// 定义命令和参数
.command('create <app-name>')
.description('create a new project')
// -f or --force 为强制创建,如果创建的目录存在则直接覆盖
.option('-f, --force', 'overwrite target directory if it exist')
.action((name, options) => {
// 在 operation.js 中执行创建任务
require('./operation.js')(name, options)
})
program
// 配置版本号信息
.version(`v${require('../package.json').version}`)
.usage('<command> [option]')
// 解析用户执行命令传入参数
program.parse(process.argv);
复制代码
- inquirer:交互式命令行工具,可以实现命令行的选择功能
type包含input,confirm,list,rawlist,checkbox,password等
//type: 'input'
const inquirer = require('inquirer')
// 此处测试input,实践过程中输入testinquirer
inquirer.prompt([
{
type: 'input', //type:input,confirm,list,rawlist,checkbox,password...
name: 'name', // key 名
message: 'Your name in here', // 提示信息
default: 'my-node-cli' // 默认值
}
]).then(answers => {
console.log(answers)
// {name:'testinquirer'}
})
复制代码
// type: 'list'
let repos = []
const { repo } = await inquirer.prompt({
name: 'repo',
type: 'list',
choices: repos,
message: 'Please choose a template to create project'
})
复制代码
- download-git-repo:拉取GitHub上的文件
download-git-repo 是不支持 promise的,所以需要进行 promise 化改造
const util = require('util')
const downloadGitRepo = require('download-git-repo')
let downloadGitRepo = util.promisify(downloadGitRepo);
复制代码
downloadGitRepo(repository, destination, options, callback) 下载一个 git repository 到 destination 文件夹,配置参数 options, 和 callback回调。
可以采用下面简写方式
GitHub - github:owner/name 或者 owner/name
GitLab - gitlab:owner/name
Bitbucket - bitbucket:owner/name
复制代码
1、默认是 master 分枝, 但你可以指定分枝和tag ,如 owner/name#my-branch.
2、你还可以指定自定义来源,如 gitlab:custom.com:owner/name. 自定义来源默认为 https 或 git@ , 你也可以自己之定义协议.
- 使用http 下载 Github repository master 分枝
downloadGitRepo('myusername/myproject', 'test/tmp', function (err) {
console.log(err ? 'Error' : 'Success')
})
复制代码
使用http下载 github 不需要加上域,因为不需要自定义来源仓库
- 使用 http 下载 GitLab 自定义来源仓库,并附带 token
downloadGitRepo('gitlab:mygitlab.com:myusername/myproject#my-branch', 'test/tmp', { headers: { 'PRIVATE-TOKEN': '1234' } } function (err) {
console.log(err ? 'Error' : 'Success')
})
复制代码
- 使用 git clone 下载 Bitbucket repository my-branch 分枝.
//带上分支或者tag,后面用#拼接
downloadGitRepo('bitbucket:myusername/myproject#my-branch', 'test/tmp', { clone: true }, function (err) {
console.log(err ? 'Error' : 'Success')
})
复制代码
- 使用git clone 下载自定义来源和协议 GitLab 仓库. 如果clone 一个自定义来源的仓库,type (
github
,gitlab
等.) 不是必须的
downloadGitRepo('https://mygitlab.com:myusername/myproject#my-branch', 'test/tmp', { clone: true }, function (err) {
console.log(err ? 'Error' : 'Success')
})
复制代码
我觉得最常用的可以用git clone这种,很符合我们的项目下载习惯
。
还可以使用direct:url方式,可参考 download-git-repo 使用教程
- chalk:在控制台中画出各种各样的颜色
const chalk = require('chalk')
chalk.level = 2 //必须要设置的,不然看不到颜色
// 文本样式
console.log("project name: " + chalk.bold(name))
// 颜色
console.log("project name:" + chalk.green(name))
// 背景色
console.log("project name:" + chalk.bgRed(name))
// 使用RGB颜色输出
console.log("project name: " + chalk.rgb(4, 156, 219).underline(name));
console.log("project name:" + chalk.hex('#049CDB').bold(name));
console.log("project name:" + chalk.bgHex('#049CDB').bold(name))
复制代码
- ora:小图标 (loading、succeed、warn等)
在window系统上图标仅仅是横杠,没有动态样子,所以不要有疑惑
const ora = require('ora')
const message = 'Loading unicorns'
const spinner = ora(message);
// 开始加载动画
spinner.start();
setTimeout(() => {
// 修改动画样式
// Type: string
// Default: 'cyan'
// Values: 'black' | 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white' | 'gray'
spinner.color = 'red';
spinner.text = 'Loading rainbows';
// 这里怎么没生效?难道是版本改了?看官网window系统确实就是用横线代替spinner,不支持设置,颜色也不支持
try {
const result = await fn(...args);
spinner.stop() // 停止
// 状态为修改为成功
spinner.succeed();
return result;
} catch (error) {
spinner.stop() // 停止
// 状态为修改为失败
spinner.fail('请求失败, 重新抓取 ...')
// spinner.warn('提示'); //提示 ⚠
// spinner.info('信息'); //信息 ℹ
}
}, 2000);
复制代码
异步执行(比如下载)的时候可使用它,体验更好
- fs-extra:对文件进行处理,比如判断文件、文件夹是否存在及删除等,fs模块可以使用
const fs = require('fs-extra')
// process.cwd();当前命令行选择的目录
// 需要创建的目录地址
const addr = path.join(process.cwd(), 'myFileName')
// 判断文件是否已经存在?
if (fs.existsSync(addr)) {}
fs.remove(addr)
复制代码
- cross-spawn: 可以用来自动执行 shell 命令
//定义需要按照的依赖
const dependencies = ['vue', 'vue-router'];
// 执行安装
const child = spawn('npm', ['install', '-D'].concat(dependencies), {
stdio: 'inherit'
});
//const child = spawn('npm', ['list', '-g', '-depth', '0'], { stdio: 'inherit' });
// 监听执行结果
child.on('close', function(code) {
// 执行失败
if(code !== 0) {
console.log(chalk.red('安装依赖时候出错!'));
process.exit(1);
}else {
console.log(chalk.cyan('安装成功'))
}
})
复制代码
- process.cwd() 是
当前执行node命令时候的文件夹地址
——工作目录,保证了文件在不同的目录下执行时,路径始终不变 - __dirname 是被执行的js 文件的地址 ——文件所在目录,当前模块的目录名。 等同于path.dirname(),__dirname` 实际上不是一个全局变量,而是每个模块内部的。
还有其他metalsmith(读取所有文件,实现模板渲染)、consolidate(统一模板引擎)等
以上工具,console输出最好都有英文,防止有些系统文字出现乱码。
怎么获取gitlab中项目信息
- 先得获得个人访问令牌
2. 获取访问接口 必须拼接private_token
//获取50页前的项目
http://mygitlabserver/api/v4/projects?private_token=jFtxwX7aKTr8iiNm7r9J&per_page=50
//获取某个项目
http://mygitlabserver/api/v4/projects/1617
复制代码
更多查看gitlab文档官网
写这个的目的是为了获取gitlab中的项目信息,通过信息读取要下载的项目模板。
npm
npm库中全局安装
npm i my-node-cli -g
复制代码
本地模块全局安装
npm link
复制代码
npm link用法
本地测试模块的时候很方便
cd npm-link-module
npm link
执行命令后,npm-link-module会根据package.json上的配置,被链接到全局
复制代码
在项目npm-link-example中使用模块pm-link-module
npm link pm-link-module
复制代码
定制公司的项目框架
基于Vue-cli框架,用渐进式开发思想,根据项目的业务做差异化,逐渐下沉到框架中(融入自己的api、组件等),然后升级框架。
如果团队需要以下要求,可以按照自己公司业务定制框架,这也体现了架构能力。
- 统一的技术选型
- 统一的默认配置
- 统一的部署方案
- 统一的代码风格
搭建自己的脚手架
整个思路:
- 执行命令(command、chalk工具),command提示create一个项目
program
// 定义命令和参数
.command('create <app-name>')
.description('create a new project')
// -f or --force 为强制创建,如果创建的目录存在则直接覆盖
.option('-f, --force', 'overwrite target directory if it exist')
.action((name, options) => {
// 在 create.js 中执行创建任务
require('./create.js')(name, options)
})
program
// 配置版本号信息
.version(`v${require('../package.json').version}`)
.usage('<command> [option]')
// 解析用户执行命令传入参数
program.parse(process.argv);
复制代码
- 判断此名是否存在,不存在直接往下查模板列表,存在判断是否强制覆盖,不覆盖啥都不做,覆盖就删除本地(fs-extra、chalk工具)
if (fs.existsSync(targetAir)) {
// 是否为强制创建?
if (options.force) {
await fs.remove(targetAir)
} else {
// 询问用户是否确定要覆盖
let { action } = await inquirer.prompt([
{
name: 'action',
type: 'list',
message: 'Target directory already exists Pick an action:',
choices: [
{
name: 'Overwrite',
value: 'overwrite'
},{
name: 'Cancel',
value: false
}
]
}
])
if (!action) {
return;
} else if (action === 'overwrite') {
await fs.remove(targetAir)
}
}
}
复制代码
- 创建项目,请求模板,再选择(axios、inquirer、ora、chalk工具)
const repoList = await requestData(getRepoList, 'waiting fetch template');
if (!repoList) return;
// 过滤我们需要的模板名称
const repos = repoList.map(item => item.name);
//用户选择自己新下载的模板名称
const { repo } = await inquirer.prompt({
name: 'repo',
type: 'list',
choices: repos,
message: 'Please choose a template to create project'
})
复制代码
- 请求模板下的某个tag,再选择(axios、inquirer、ora、chalk工具)
// 基于 repo 结果,远程拉取对应的 tag 列表
const tags = await requestData(getTagList, 'waiting fetch tag', repo);
if (!tags) return;
// 过滤我们需要的 tag 名称
const tagsList = tags.map(item => item.name);
// 用户选择自己需要下载的 tag
const { tag } = await inquirer.prompt({
name: 'tag',
type: 'list',
choices: tagsList,
message: 'Place choose a tag to create project'
})
复制代码
- 选完tag,再下载公司的项目框架代码(download-git-repo、ora、chalk工具)
downloadGitRepo(`myusername/${repo}${tag?'#'+tag:''}`;)
复制代码
- 可以加一些提示,比如成功创建、怎么执行项目等
涉及到三处下载:
- 模板列表 : axios 调用接口
- tag列表 : axios 调用接口
- 公司定制的项目代码: download-git-repo 调用下载
上传到外网npm
- 在 git 上建好仓库
- 完善 package.json 中的配置,注意修改版本号,不然下一步发布不能成功
- npm publish发布
版本升级规则以及更新策略
版本的格式
major.minor.patch
主版本号.次版本号.修补版本号
版本匹配规则
- version:必须匹配某个版本
如:1.1.2,表示必须依赖1.1.2版
- >version:必须大于某个版本
如:>1.1.2,表示必须大于1.1.2版
- >=version:可大于或等于某个版本
如:>=1.1.2,表示可以等于1.1.2,也可以大于1.1.2版本
- <version:必须小于某个版本
如:<1.1.2,表示必须小于1.1.2版本
- <=version:可以小于或等于某个版本
如:<=1.1.2,表示可以等于1.1.2,也可以小于1.1.2版本
- ~version:大概匹配某个版本
如果minor版本号指定了,那么minor版本号不变,而patch版本号任意
如果minor和patch版本号未指定,那么minor和patch版本号任意
如:~1.1.2,表示>=1.1.2 <1.2.0,可以是1.1.2,1.1.3,1.1.4,.....,1.1.n
如:~1.1,表示>=1.1.0 <1.2.0,可以是同上
如:~1,表示>=1.0.0 <2.0.0,可以是1.0.0,1.0.1,1.0.2,.....,1.0.n,1.1.n,1.2.n,.....,1.n.n
- ^version:兼容某个版本
版本号中最左边的非0数字的右侧可以任意
如果缺少某个版本号,则这个版本号的位置可以任意
如:^1.1.2 ,表示>=1.1.2 <2.0.0,可以是1.1.2,1.1.3,.....,1.1.n,1.2.n,.....,1.n.n
如:^0.2.3 ,表示>=0.2.3 <0.3.0,可以是0.2.3,0.2.4,.....,0.2.n
如:^0.0,表示 >=0.0.0 <0.1.0,可以是0.0.0,0.0.1,.....,0.0.n
- x标识符:x的位置表示任意版本
如:1.2.x,表示可以1.2.0,1.2.1,.....,1.2.n
- 标识符:任意版本,""也表示任意版本
如:*,表示>=0.0.0的任意版本
- version1 - version2:大于等于version1,小于等于version2
如:1.1.2 - 1.3.1,表示包括1.1.2和1.3.1以及他们件的任意版本
- range1 || range2:满足range1或者满足range2,可以多个范围
如:<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0,表示满足这3个范围的版本都可以