一、創建項目
- 使用
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，獲取一手技術分享??
