零、写在开头
hzq-cli 是我这个项目的名称、npm 包的名称，因为 npm 上面不允许有相同名称的包，所以请将所有的 hzq 换成自己喜欢的名称，取名之前，请在 npm 上搜索下，切记包名不要重复哦
一、背景
因为每次新建项目时，都需要 vue init webpack projectName，然后复制、粘贴一大堆项目基本配置，如：api、tool配置等等，感觉很繁琐、容易遗漏，特别时手机端和电脑端不同项目时，那配置真的很乱。所以打算自己构建一个脚手架，然后通过类似vue-cli一样，使用vue init来自由搭建所需项目
二、起步
- 首先先在 GitHub 上面，上传所需项目模板，我这里上传了几份：template_base、template_element、template_cli3、template_nuxt、template_ts
- 在本地新建一个文件夹：
hzq-cli，cmd 进入该项目，然后npm init，然后一直enter就行，最后会在当前文件夹里面生成一个package文件 - 然后安装依赖：
npm i -s commander inquirer download-git-repo chalk ora - 在当前目录下新建
bin文件夹，然后在bin下面新建hzq.js
三、配置 package.json
在package.json里面新增代码：
"bin": {
"hzq": "./bin/hzq.js",
"h": "./bin/hzq.js"
},
"hzq、h"是命令行要输入的指令，"./bin/hzq.js"是命令执行时的文件。
完整 package.json 代码：
{
"name": "hzq-cli",
"version": "2.0.2",
"description": "Vue脚手架工具",
"main": "index.js",
"bin": {
"hzq": "./bin/hzq.js",
"h": "./bin/hzq.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"readmeFilename": "README.md",
"author": "hzq",
"license": "ISC",
"dependencies": {
"chalk": "^2.4.1",
"commander": "^2.17.1",
"download-git-repo": "^1.1.0",
"inquirer": "^6.2.0",
"ora": "^3.0.0"
}
}
注意name字段哦，该字段就是 npm 的包名，所以请改成自己的名称！
四、配置 hzq.js
顶部加一行代码 #! /usr/bin/env node：指定这个文件使用 node 执行，不加不行哦！
- 引入依赖：
#! /usr/bin/env node
const fs = require('fs');
const program = require('commander'); //解析用户输入的命令
const inquirer = require('inquirer'); //NodeJs交互式命令行工具
const download = require('download-git-repo'); //拉取github上的文件
const chalk = require('chalk'); //改变输出文字的颜色
const ora = require('ora'); //小图标
- 配置命令
program
.version('0.0.1')
.option('i, init', '初始化项目')
.parse(process.argv);
- 设置问题
const promptList = [
{
type: 'input',
message: '项目名称: ',
name: 'name',
default: 'project'
},
{
type: 'list',
message: '请选择项目UI框架: ',
name: 'template',
choices: [ 'base', 'element', 'cli3', 'nuxt', 'ts'],
default: 'base'
}
];
- 监听 init 命令
if (program.init) {
console.info('');
//初始化，执行对应操作...
}
- 初始化操作
inquirer.prompt(promptList).then(answers => {
const spinner = ora('正在下载模板').start(); //创建一个loading小图标
let _download = 'MrHzq/template_' + answers.template;
download(_download, answers.name, err => {
//从github下载我们需要的项目，并且命名为我们之前输入的项目名称
if (!err) {
spinner.clear();
console.info('');
console.info(
chalk.green(
'-----------------------------------------------------'
)
);
console.info('');
spinner.succeed(['项目创建成功,请继续进行以下操作:']);
console.info('');
console.info(chalk.cyan(` - cd ${answers.name}`));
console.info(chalk.cyan(` - npm install`));
console.info(chalk.cyan(` - npm run dev`));
console.info(
chalk.green(
'-----------------------------------------------------'
)
);
fs.readFile(
`${process.cwd()}/${answers.name}/package.json`,
(err, data) => {
if (err) throw err;
let _data = JSON.parse(data.toString());
_data.name = answers.name;
_data.template = answers.template;
let str = JSON.stringify(_data, null, 4);
fs.writeFile(
`${process.cwd()}/${answers.name}/package.json`,
str,
err => {
if (err) throw err;
process.exit();
}
);
}
);
} else {
// 可以输出一些项目失败的信息
spinner.warn(['发生错误了']);
process.exit();
}
});
});
五、发布到 NPM
没有账号的同学去 npm 注册一个账号。
-
npm login登录账号，然后输入username、password、email，密码是不会显示的哦，不要以为没有输入进去 -
npm publish发布项目 -
+ hzq-cli@2.0.0表示发布完成 -
npm unpublish hzq-cli@2.0.0删除已发布的包
六、使用
- 下载刚刚发布的包：
npm i -g hzq-cli - 查看全局安装过的包：
npm list -g --depth 0 - 输入
h --version或者hzq --version或者h -V，当返回版本号，即表示本地安装成功 - 然后找个文件夹，cmd 运行
h i或者hzq i，就可以创建项目了
具体代码请参考hzq-cli
网友评论