目前在市面上存在很多腳手架，如：create-react-app、vue-CLI。我們可以通過一行簡單的命令，就能創建一個基本的項目工程，大大地提高了開發效率。但是我們會面臨一個問題，除了腳手架幫我們創建好的項目框架，我們的項目總有需要定制化的配置，比如我們需要引入我們想要的elementUI框架，引入axios相關的工具類完成http請求等。我們不可能每次開啟新項目都再配置一遍吧，這太勞神費力了。

通常我們會搞一個個性化腳手架cli，平時創建項目時通過該腳手架一鍵生成，并同時完成所有需要的配置，以快速開發。接下來，我們看看怎麼搞？

• 創建動态鍊接庫，暴露全局 cli 命令

如果要暴露一個全局的命令，首先需要在 package.json 文件中編寫一個 bin 命令，當前示例指向bin目錄下的mycli.js文件。

"bin": "bin/mycli.js"

• 讀取并解析命令行參數

讀取命令行參數其實非常簡單，使用 program.argv 獲取

• 提供用戶可選的配置項

根據用戶的選擇，創建不同類型的項目模闆，比如是否要typescript支持

• 拷貝自定義模闆到本地

一般我們會事先準備好一個項目模闆，供cli下載

• commander實現控制台命令行問題交互
• inquirer 命令行中的 select 選擇器
• chalk為控制台輸出的文字着色
• download-git-repo拉去github項目代碼
• ora實現控制台進度條樣式
• figlet 生成好看的圖标文字
• lolcatjs 生成随機顔色

3.1 引入所需依賴

#!/usr/bin/env node 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創建cli版本和用法命令

//展示mycli logo const logotext = figlet.textSync("my-cli"); const logotextColor = printer.fromString(logotext); //提取version const version=`${logotextColor} ${require('../package').version}`; program .version(version) .usage('<command> [options]')

3.3 從項目模闆地址，下載到本地

我們這裡使用了工具類download-git-repo的download方法，大家可以查下相關API

// 成功和失敗文案着色 const success = chalk.blueBright; const error = chalk.bold.red; //地址有多種寫法，這個大家可以查看download-git-repo相關API const templateUrl = 'github:napoleonjk/tmp-vue3-template#main' //下載到指定目錄，名稱基于用戶輸入的appName const 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; }) }); };

基于bin 命令的配置，将我們的包映射到全局，這樣就可以通過運行模塊名來運行我們的模塊，這跟linux上建立一個軟鍊接差不多，以方便我們在本地測試。

cd mycli npm link

mycli -h

mycli -V

cd workspace mycli init test-project //多試幾次，有時候git clone失敗

想要獲取腳手架mycli源碼，私信我mycli即可。

學無止境，創作不易，覺得不錯的話，請記得為我關注、點贊、轉發三連哦。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!