寫一個自己的vue-cli腳手架
? ? ? ?目前在市面上存在很多腳手架，如：create-react-app、vue-cli。我們可以通過一行簡單的命令，就能創(chuàng)建一個基本的項目工程，大大的提高了開發(fā)效率。但是我們會面臨一個問題，除了腳手架幫我們創(chuàng)建好的項目框架，我們的項目總有需要定制化的配置，比如我們需要引入我們想要的elementUI框架，引入axios相關的工具類完成http請求等。我們不可能每次開啟新項目都再配置一遍吧，這太勞神費力了。
? ? ? 通常我們會搞一個個性化腳手架cli，平時創(chuàng)建項目時通過該腳手架一鍵生成，并同時完成所有需要的配置，以快速開發(fā)。接下來，我們看看怎么搞？???
1.CLI 的運行原理
創(chuàng)建動態(tài)鏈接庫，暴露全局 cli 命令
如果要暴露一個全局的命令，首先需要在 package.json 文件中編寫一個 bin 命令，當前示例指向bin目錄下的mycli.js文件。
"bin": "bin/mycli.js"讀取并解析命令行參數
讀取命令行參數其實非常簡單，使用 program.argv 獲取
提供用戶可選的配置項
根據用戶的選擇，創(chuàng)建不同類型的項目模板，比如是否要typescript支持
拷貝自定義模板到本地
一般我們會事先準備好一個項目模板，供cli下載
2.創(chuàng)建cli所需要的部分依賴模塊
commander實現控制臺命令行問題交互；inquirer?命令行中的 select 選擇器chalk為控制臺輸出的文字著色；download-git-repo拉去github項目代碼；ora實現控制臺進度條樣式；figlet生成好看的圖標文字lolcatjs生成隨機顏色
3.實現腳手架代碼邏輯片段
3.1 引入所需依賴
const path = require("path");const program = require('commander');//cmd控制臺交互const ora = require('ora');//進度條const chalk = require('chalk');//給提示文案著色const download = require('download-git-repo');//拉取github項目const fs = require('fs');const minimist = require('minimist')//輕量級命令行參數解析引擎const figlet = require("figlet");//酷炫的文字工具const printer = require("@darkobits/lolcatjs");//生成顏色
3.2創(chuàng)建cli版本和用法命令
//展示mycli?logoconst logotext = figlet.textSync("my-cli");const logotextColor = printer.fromString(logotext);//提取versionconst?version=`${logotextColor}?${require('../package').version}`;program.version(version).usage('[options]' )
3.3?從項目模板地址，下載到本地
我們這里使用了工具類download-git-repo的download方法，大家可以查下相關API
// 成功和失敗文案著色const success = chalk.blueBright;const error = chalk.bold.red;//地址有多種寫法，這個大家可以查看download-git-repo相關APIconst?templateUrl?=?'github:napoleonjk/tmp-vue3-template#main'//下載到指定目錄，名稱基于用戶輸入的appNameconst dir = path.join(process.cwd(),appName);download(templateUrl, dir, { clone: true }, function (err) {// 拉取項目代碼if (!err) {????????//成功的邏輯???????? spinner.succeed(success('拉取成功'));//更改 package.json 中的 name 和版本號，實現參照后文changePackage(appName);spinner.succeed(success('項目初始化成功'));spinner.succeed(success(`cd ${appName}`));spinner.succeed(success('npm install && npm run serve'));} else {????????//失敗的邏輯?????????console.log(err);????????spinner.fail(error('拉取失敗'));}});
3.4項目下載完成后，依據用戶輸入，變更項目名和版本號
//?替換模板package.json文件的name字段const changePackage = (appName) => {fs.readFile(`${process.cwd()}/${appName}/package.json`, (err, data) => {if (err) throw err;let _data = JSON.parse(data.toString());_data.name = appName;_data.version = '1.0.0';let str = JSON.stringify(_data, null, 4);fs.writeFile(`${process.cwd()}/${appName}/package.json`, str, function (err) {if (err) throw err;})});};
4.?本地調試 npm 模塊?
基于bin 命令的配置，將我們的包映射到全局，這樣就可以通過運行模塊名來運行我們的模塊，這跟linux上建立一個軟鏈接差不多，以方便我們在本地測試。
cd myclinpm link
5.?看一下各個命令效果
mycli?-h
mycli -V
cd?workspacemycli?init?test-project //多試幾次，有時候git?clone失敗
想要獲取腳手架mycli源碼，回復mycli即可。
學無止境，覺得不錯的話，請記得為我關注、點贊、轉發(fā)三連哦！