一、创建项目
- 使用
npm init -y
创建项目 - 创建项目入口文件
index.js
- 在
package.json
中添加bin
字段 - 使用
npm link
命令将文件映射至全局,使可以在本地测试zp
命令
// "zp" 为用于全局执行脚手架的命令,vue-cli中使用的是vue命令
"bin": {
"zp": "index.js",
},
二、入口文件编码
index.js
文件头部需要加上#!/usr/bin/env node
(用于指定这个脚本的解释程序是node)
1.使用commander加上命令行参数
npm i commander
#!/usr/bin/env node
const { program } = require("commander");
program.version("0.1.0");
program
.command("create <project>")
.description("初始化项目模板")
.action(function (project) {
console.log("创建项目:" + project);
});
program
.command("help")
.description("查看所有可用的模板帮助")
.action(function () {
console.log(`这是关于项目帮助信息`);
});
program.parse(process.argv);
2.准备一个GitHub模板,使用download-git-repo下载模板
npm i download-git-repo
program
.command("create <project>")
.description("初始化项目模板")
.action(function (project) {
const downloadURL =
"direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";
download(downloadURL, project, { clone: true }, (err) => {
if (err) {
console.log("下载失败");
} else {
console.log("下载成功");
}
});
});
3.用ora增加下载中的loading效果
npm i ora@3.4.0
const ora = require("ora");
program
.command("create <project>")
.description("初始化项目模板")
.action(function (project) {
// 下载前提示
const spinner = ora("正在下载模板中").start();
const downloadURL =
"direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";
download(downloadURL, project, { clone: true }, (err) => {
if (err) {
spinner.fail();
} else {
spinner.succeed();
}
});
});
4.使用chalk 和 logSymbols增加文本样式
npm i chalk@2.4.2 log-symbols@4.0.0
const chalk = require("chalk");
const logSymbols = require("log-symbols");
program
.command("create <project>")
.description("初始化项目模板")
.action(function (project) {
// 下载前提示
const spinner = ora("正在下载模板中").start();
const downloadURL =
"direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";
download(downloadURL, project, { clone: true }, (err) => {
if (err) {
spinner.fail();
return console.log(
logSymbols.error,
chalk.red("下载失败,失败原因:" + err)
);
} else {
spinner.succeed();
return console.log(logSymbols.success, chalk.yellow("下载成功"));
}
});
});
index.js
文件完整代码为:
#!/usr/bin/env node
const { program } = require("commander");
const download = require("download-git-repo");
const ora = require("ora");
const chalk = require("chalk");
const logSymbols = require("log-symbols");
program.version("0.1.0");
program
.command("create <project>")
.description("初始化项目模板")
.action(function (project) {
// 下载前提示
const spinner = ora("正在下载模板中").start();
const downloadURL =
"direct:https://github.com/MangoIsGreat/vue_project_templete.git#main";
download(downloadURL, project, { clone: true }, (err) => {
if (err) {
spinner.fail();
return console.log(
logSymbols.error,
chalk.red("下载失败,失败原因:" + err)
);
} else {
spinner.succeed();
return console.log(logSymbols.success, chalk.yellow("下载成功"));
}
});
});
program
.command("help")
.description("查看所有可用的模板帮助")
.action(function () {
console.log(`这是关于项目帮助信息`);
});
program.parse(process.argv);
使用zp create 项目名
即可下载项目模板代码创建项目
5.将项目发布至npm仓库
- 打开npm官网
- 注册一个npm账号
- 在npm中检索是否有重复的包名
- 将package.json中的name改为发布到npm上的包名
- 打开控制台,执行
npm login
- 登陆成功后,在项目下执行
npm publish
发布 - 发布成功后即可通过
npm i
命令下载
注意事项:因为网络问题可能导致download-git-repo
插件下载时报128
错误,可通过科学上网方式解决
写在最后:欢迎关注扫码作者微信公众号fever code
,获取一手技术分享⛽️