編寫自己的腳手架
那什么是腳手架？
例如:vue-cli Angular CLI Create React App
編寫自己的腳手架是指創建一個定制化的工具，用于快速生成項目的基礎結構和代碼文件，以及提供一些常用的命令和功能。通過編寫自己的腳手架，你可以定義項目的目錄結構、文件模板，管理項目的依賴項，生成代碼片段，以及提供命令行接口等功能
- 項目結構：腳手架定義了項目的目錄結構，包括源代碼、配置文件、靜態資源等。
- 文件模板：腳手架提供了一些預定義的文件模板，如HTML模板、樣式表、配置文件等，以加快開發者創建新文件的速度。
- 命令行接口：腳手架通常提供一個命令行接口，通過輸入命令和參數，開發者可以執行各種任務，如創建新項目、生成代碼文件、運行測試等。
- 依賴管理：腳手架可以幫助開發者管理項目的依賴項，自動安裝和配置所需的庫和工具。
- 代碼生成：腳手架可以生成常見的代碼結構，如組件、模塊、路由等，以提高開發效率。
- 配置管理：腳手架可以提供一些默認的配置選項，并允許開發者根據需要進行自定義配置。
工具介紹
哪個前端不想擁有自己的一套腳手架，在這一章節你會學到非常多的第三方庫，如
commander
Commander 是一個用于構建命令行工具的 npm 庫。它提供了一種簡單而直觀的方式來創建命令行接口，并處理命令行參數和選項。使用 Commander，你可以輕松定義命令、子命令、選項和幫助信息。它還可以處理命令行的交互，使用戶能夠與你的命令行工具進行交互
inquirer
Inquirer 是一個強大的命令行交互工具，用于與用戶進行交互和收集信息。它提供了各種豐富的交互式提示（如輸入框、選擇列表、確認框等），可以幫助你構建靈活的命令行界面。通過 Inquirer，你可以向用戶提出問題，獲取用戶的輸入，并根據用戶的回答采取相應的操作。
ora
Ora 是一個用于在命令行界面顯示加載動畫的 npm 庫。它可以幫助你在執行耗時的任務時提供一個友好的加載狀態提示。Ora 提供了一系列自定義的加載動畫，如旋轉器、進度條等，你可以根據需要選擇合適的加載動畫效果，并在任務執行期間顯示對應的加載狀態。
download-git-repo
Download-git-repo 是一個用于下載 Git 倉庫的 npm 庫。它提供了一個簡單的接口，可以方便地從遠程 Git 倉庫中下載項目代碼。你可以指定要下載的倉庫和目標目錄，并可選擇指定分支或標簽。Download-git-repo 支持從各種 Git 托管平臺（如 GitHub、GitLab、Bitbucket 等）下載代碼。
編寫代碼
- index.js
#!/usr/bin/env node
import { program } from 'commander'
import inquirer from 'inquirer'
import fs from 'node:fs'
import { checkPath, downloadTemp } from './utils.js'
let json = fs.readFileSync('./package.json', 'utf-8')
json = JSON.parse(json)program.version(json.version) //創建版本號
//添加create 命令 和 別名crt 以及描述 以及 執行完成之后的動作
program.command('create <project>').alias('ctr').description('create a new project').action((project) => {//命令行交互工具inquirer.prompt([{type: 'input',name: 'projectName',message: 'project name',default: project},{type: 'confirm',name: 'isTs',message: '是否支持typeScript',}]).then((answers) => {if (checkPath(answers.projectName)) {console.log('文件已存在')return}if (answers.isTs) {downloadTemp('ts', answers.projectName)} else {downloadTemp('js', answers.projectName)}})
})program.parse(process.argv)
為什么第一行要寫 #!/usr/bin/env node
這是一個 特殊的注釋 用于告訴操作系統用node解釋器去執行這個文件，而不是顯式地調用?node?命令
- utils.js
import fs from 'node:fs'
import download from 'download-git-repo'
import ora from 'ora'
const spinner = ora('下載中...')
//驗證路徑
export const checkPath = (path) => {return fs.existsSync(path)
}//下載
export const downloadTemp = (branch,project) => {spinner.start()return new Promise((resolve,reject)=>{download(`direct:https://gitee.com/chinafaker/vue-template.git#${branch}`, project , { clone: true, }, function (err) {if (err) {reject(err)console.log(err)}resolve()spinner.succeed('下載完成')})})}
- package.json
"type": "module", //使用import需要設置這個"bin": {"vue-cli": "src/index.js"},
用于生成軟連接掛載到全局，便可以全局執行vue-cli 這個命令，配置完成之后 需要執行
npm link
