心血来潮，发现自己每次创建新的项目的时候，总是得下载一个新的全局包，如vue-cli， express诸如之类的，并且有时候自己的一些开发配置也需要不停的去配置。这个时候就会想，要是自己能将所有的空项目和已经配置好的配置文件塞到仓库理，在初始化项目的时候从自己仓库去加载空的项目。
创建NPM账号
如果你想要通过类似于安装全局包的方式构建项目，你得先有一个npm的账号用于发布
npm login # 用于npm的登陆
npm publish # 用于npm 包的发布
构建cli工具
创建一个新的文件夹，使用如下命令初始化项目
npm init # 初始化项目，会生成一个package.json文件
mkdir src # 创建src 文件夹，存放代码
touch index.js # 你的入口文件
npm i yargs | yarn add yargs # 安装yargs包用于项目创建包的命令
什么是yargs
Yargs helps you build interactive command line tools, by parsing arguments and generating an e,elegant user interface.
yargs 文档：https://www.npmjs.com/package/yargs
使用yargs
const yargs = require('yargs')
const args = yargs.command({
command: 'create <name>',
desc: 'Create a vue tempate.',
builder: {},
handler: (argv) => {
})
.version()
.help()
.alias({
'h': 'help',
'v': 'version',
})
.strict(true)
.demandCommand()
.argv
如何下载github上面的代码
我们一般下载github上面的代码时候，除了使用git clone + git链接， 还有的就是通过下载压缩包的方式下载。
所以我们可以通过request的方式下载代码压缩包
const request = require('request').defaults({
headers: {
'User-Agent': 'node request'
}
})
const REPOSITORIES_VUE_URL = 'https://github.com/BENcorry/c-template-vue/archive/vue.zip'
const REPOSITORIES_NUXT_URL = 'https://github.com/BENcorry/c-template-vue/archive/nuxt.zip'
request.get(url) // url 就是上面的两个URL变量中的一个
.on('error', err => {
Error(`Error downloading: ${err}`)
})
.on('response', res => {
if (res.statusCode !== 200) {
Error(`Get zip url return not equal 200`)
}
})
.on('end', () => {
Info('Download finished!')
})
.pipe(file)
如何选择不同的url
这里我们需要inquirer包
npm i inquirer | yarn add inquirer
然后我们开始编辑代码：
function projectInput(name, cb) {
const input = {
type: 'input',
name: 'name',
message: 'project name',
}
if (name) {
input.default = () => {
return name
}
}
const questions = [
input,
{
type: 'input',
name: 'descript',
message: 'project descript',
default: () => {
return 'A vue project'
}
},
{
type: 'input',
name: 'version',
message: 'project version',
default: () => {
return '1.0.0'
}
},
{
type: 'input',
name: 'author',
message: 'Author',
default: () => {
return 'Author'
}
},
{
type: 'rawlist',
name: 'type',
message: 'create a vue or nuxt cli',
choices: () => {
return ['vue', 'nuxt']
},
default: () => {
return 'vue'
}
}
]
inquirer.prompt(questions).then(answers => {
cb(answers)
})
}
这样我们就可以通过编辑和选择去创建不同的项目和描述，类似于vue在构建新项目的时候。
具体代码链接：https://github.com/BENcorry/corry-font-cli
结语
- 现在还没实现自动安装npm包
- 好好学习，天天向上～
- 已将下载的路径删了，删了，删了
