vite-v
v1.0.1
Published
vite and vue cli
Downloads
4
Maintainers
Readme
前言
本文章以MacBook为实例,Windows下可能有所差异。
在用vue-cli脚手架的时候,总感觉全局的vue命令 (vue init webpack project) 特别的神奇,一直想找时间学习、亲自动手手写一个自己的脚手架。这样就可以自定义属于自己的脚手架(初始化常用配置、类库...),来提高项目工作效率。
最终目标
发布到npm,然后安装到本地全局命令下。 以个人npm包为例:yevue init test-project,终端下能执行,创建项目即可。
准备工作,理解以下工具
- commander,可以自动的解析命令和参数,用于处理用户输入的命令。
- download-git-repo,下载并提取 git 仓库,用于下载项目模板。
- Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
- handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。
- ora,下载过程久的话,可以用于显示下载中的动画效果。
- chalk,可以给终端的字体加上颜色。
- log-symbols,可以在终端上显示出 √ 或 × 等的图标。
初始化项目
首先创建一个空项目,暂时命名为 my-cli,然后新建一个 index.js 文件,再执行 npm init 生成一个 package.json 文件。
终端输入命令:
npm init
会依次让你输入一下package选项:
- package name: (testpackage) ye-vue-cli
- version: (1.0.0)
- description:自定义node命令脚手
- entry point: (index.js)
- test command:
- git repository:
- keywords:
- author:ye
- license: (ISC)
- 省略多行代码提示,Is this ok? (yes)
- 一、是输入你包的名称(testpackage)是我默认的测试包,默认值是根据文件夹名来显示的,ye-vue-cli是我的自定义值,输入覆盖掉默认值。注意: 不要跟npm上已有的包重名,否则包会发布失败。
- 二、包的版本号。初始化默认为1.0.0。注意:每次更新包都需要手动改版本号,否则也发布失败。
- 三、包的描述。
- 四、入口文件默认为index.js。
- 五、测试命令。在scripts选项里生成对应的test:'输入测试命令的代码',我这里默认跳过。
- 六、Github 地址(回车默认跳过)
- 七、关键词(回车默认跳过)
- 八、作者,我填了Ye
- 九、许可,默认ISC(可直接回车跳过)
- 十、最后输入yes即可完成创建package.json
重点:在package.json中手动添加bin选项,值为即将要编写的命令代码文件index.js路径,因为index.js跟package.json为同一级目录所以直接写index.js。最终的package.json如下:
{
"name": "ye-vue-cli",
"version": "1.0.0",
"description": "自定义node命令脚手架",
"main": "index.js",
"bin": {
"yevue": "index.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Ye",
"license": "ISC",
"dependencies": {
"commander": "^12.0.0",
"download-git-repo": "^1.1.0",
"handlebars": "^4.0.12",
"inquirer": "^6.2.0",
"ora": "^3.0.0"
}
}
最后安装上面需要用到的依赖。
npm install commander download-git-repo inquirer handlebars ora chalk log-symbols -S
创建index.js
这里先上完整的代码:
#!/usr/bin/env node
var fs = require('fs')
var { program } = require('commander')
var download = require('download-git-repo')
var handlebars = require('handlebars')
var inquirer = require('inquirer')
var ora = require('ora')
var chalk = require('chalk')
var symbols = require('log-symbols')
program.version('1.0.0', '-v, --version')
.command('init <name>')
.action((name) => {
console.log(name)
if(!fs.existsSync(name)){
inquirer.prompt([
{
name: 'description',
message: '请输入项目描述'
},
{
name: 'author',
message: '请输入作者名称'
}
]).then((answers) => {
console.log(answers.author);
var spinner = ora('正在下载模板')
spinner.start()
download(
'https://github.com:123428653/vue-cli-webpack4',
name,
{
clone: true
},
(err) => {
console.log(err ? 'Error' : 'Success')
if(err){
spinner.fail()
console.log(symbols.error, chalk.red(err))
}else{
spinner.succeed()
var fileName = `${name}/package.json`
var meta = {
name,
description: answers.description,
author: answers.author
}
if(fs.existsSync(fileName)){
var content = fs.readFileSync(fileName).toString()
var result = handlebars.compile(content)(meta)
fs.writeFileSync(fileName, result)
}
console.log(symbols.success, chalk.green('项目初始化成功'))
}
}
)
})
}else{
console.log(symbols.error, chalk.red('项目已存在'))
}
})
program.parse(process.argv)
代码讲解
填坑一: #!/usr/bin/env node,必须写,否则执行命令会报错 报错信息如下:
/usr/local/bin/yevue: line 2: syntax error near unexpected token `('
/usr/local/bin/yevue: line 2: `var fs = require('fs')' 或者执行自定义指令不生效
填坑二: 代码结尾不能有分号出现,否则执行命令也报以上一样错。
program.version('1.0.5', '-v, --version')
.command('init <name>')
.action((name) => {
console.log(name)
...
})
调用 version('1.0.0', '-v, --version') 会将 -v 和 --version 添加到命令中,可以通过这些选项打印出版本号。
调用 command('init <name>') 定义 init 命令,name 则是必传的参数,为项目名。 action() 则是执行 init 命令会发生的行为,要生成项目的过程就是在这里面执行的,这里暂时只打印出 name。
其实到这里,已经可以执行 init 命令了。我们来测试一下,在 my-cli 的同级目录下执行:
node index.js init HelloWorld
可以看到命令行工具也打印出了 HelloWorld,那么很清楚, action((name) => {}) 这里的参数 name,就是我们执行 init 命令时输入的项目名称。
命令已经完成,接下来就要下载模板生成项目结构了。
下载模板
#!/usr/bin/env node
var program = require('commander');
var download = require('download-git-repo');
program.version('1.0.5', '-v, --version')
.command('init <name>')
.action((name) => {
...
download(
'https://github.com:123428653/vue-cli-webpack4',
name,
{
clone: true
},
(err) => {
console.log(err ? 'Error' : 'Success')
...
}
...
})
download() 第一个参数就是仓库地址,但是有一点点不一样。实际的仓库地址是https://github.com/123428653/vue-cli-webpack4 ,可以看到github.com后面的 '/' 在参数中要写成 ':'。第二个参数是路径,上面我们直接在当前路径下创建一个 name 的文件夹存放模板,也可以使用二级目录比如 test/${name}
命令行交互
命令行交互功能可以在用户执行 init 命令后,向用户提出问题,接收用户的输入并作出相应的处理。这里使用 inquirer.js 来实现。
...
const inquirer = require('inquirer');
...
inquirer.prompt([
{
type: 'input',
name: 'author',
message: '请输入作者名称'
}
]).then((answers) => {
console.log(answers.author);
...
})
通过这里例子可以看出,问题就放在 prompt() 中,问题的类型为 input 就是输入类型,name 就是作为答案对象中的 key,message 就是问题了,用户输入的答案就在 answers 中,使用起来就是这么简单。更多的参数设置可以参考官方文档。
通过命令行交互,获得用户的输入,从而可以把答案渲染到模板中。
渲染模板
这里用 handlebars 的语法对 123428653/vue-cli-webpack4 仓库的模板中的 package.json 文件做一些修改
{
"name": "{{name}}",
"version": "1.0.0",
"description": "{{description}}",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "{{author}}",
"license": "ISC"
}
并在下载模板完成之后将用户输入的答案渲染到 package.json 中
#!/usr/bin/env node
var program = require('commander');
var download = require('download-git-repo');
program.version('1.0.5', '-v, --version')
.command('init <name>')
.action((name) => {
...
download(
'https://github.com:123428653/vue-cli-webpack4',
name,
{
clone: true
},
(err) => {
...
var fileName = `${name}/package.json`
var meta = {
name,
description: answers.description,
author: answers.author
}
if(fs.existsSync(fileName)){
var content = fs.readFileSync(fileName).toString()
var result = handlebars.compile(content)(meta)
fs.writeFileSync(fileName, result)
}
...
}
...
})
这里使用了 node.js 的文件模块 fs,将 handlebars 渲染完后的模板重新写入到文件中。
提示、Loading、图标
在用户输入答案之后,开始下载模板,这时候使用 ora 来提示用户正在下载中。
const ora = require('ora');
// 开始下载
const spinner = ora('正在下载模板...');
spinner.start();
// 下载失败调用
spinner.fail();
// 下载成功调用
spinner.succeed();
然后通过 chalk 来为打印信息加上样式,比如成功信息为绿色,失败信息为红色,这样子会让用户更加容易分辨,同时也让终端的显示更加的好看。
const chalk = require('chalk');
console.log(chalk.green('项目创建成功'));
console.log(chalk.red('项目创建失败'));
除了给打印信息加上颜色之外,还可以使用 log-symbols 在信息前面加上 √ 或 × 等的图标
const chalk = require('chalk');
const symbols = require('log-symbols');
console.log(symbols.success, chalk.green('项目创建成功'));
console.log(symbols.error, chalk.red('项目创建失败'));
发布NPM包
没有npm账号的,先上npm官网注册个人账号。 终端下执行:
npm login
Username: 输入已有的npm用户名
Password: 输入密码
Email: 输入注册的邮箱
显示如下:
Logged in as xxx on https://registry.npmjs.org/.
说明登录成功
最后在执行命令:
npm publish
提示一下即可发布成功:
浏览器登录npm上查看发布的包:
全局安装发布的node命令
sudo npm i ye-vue-cli -g
sodu 是Mac下权限的命令
安装完成:
完美执行自定义命令
yevue test-project
初始化项目:
结束
以上内容部分出自 https://github.com/lin-xin/blog/issues/27#issuecomment-441503411