腳手架

搭建腳手架的目的就是快速的搭建項目的基本結(jié)構(gòu)并提供項目規(guī)范和約定。目前日常工作中常用的腳手架有 vue-cli、create-react-app、angular-cli 等等，都是通過簡單的初始化命令，完成內(nèi)容的快速構(gòu)建。

其實我們也可以用git clone url來新建（復制）項目，再 low 一點的方法就是復制粘貼整個文件夾，一樣也能達到初始化的目的。

腳手架的本質(zhì)也是從遠程下載一個模板來進行一個新項目，但是腳手架可是高級版的克隆，它主要是提供了交互式的命令讓我們可以動態(tài)的更改模板，然后用一句命令就可以實現(xiàn)其他內(nèi)置依賴的初始化,方便了多人協(xié)作，不需要將文件傳來傳去。

接下來我們就開始實現(xiàn)一個簡易版的腳手架heaven-cli（可自行命名），目標是實現(xiàn)一個heaven init template-name project-name這樣的命令，廢話少說，開始進入正題吧！

前置知識了解

其實一個簡易版的 heaven-cli的代碼量并不多，所以這里我們先來介紹一下其中要使用到的第三方庫

commander

這是用來編寫指令和處理命令行的，用法如下：

const program = require("commander");
// 定義指令
program
  .version('0.0.1')
  .command('init', 'Generate a new project from a template')
  .action(() => {
    // 回調(diào)函數(shù)
  })
// 解析命令行參數(shù)
program.parse(process.argv);
復制代碼

inquirer

這是個強大的交互式命令行工具，用法如下：

const inquirer = require('inquirer');
inquirer
  .prompt([
    // 一些交互式的問題
  ])
  .then(answers => {
    // 回調(diào)函數(shù)，answers 就是用戶輸入的內(nèi)容，是個對象
  });
復制代碼

chalk

這是用來修改控制臺輸出內(nèi)容樣式的，起到了美化輸出內(nèi)容的作用，用法如下：

const chalk = require('chalk');
console.log(chalk.green('success'));
console.log(chalk.red('error'));
復制代碼

ora

這是一個好看的加載交互組件，用于下載過程中的loading效果，用法如下：

const ora = require('ora')
let spinner = ora('downloading template ...')
spinner.start()
復制代碼

download-git-repo

用于下載遠程模板的，支持 GitHub、 GitLab 和 Bitbucket 等，用法如下：

const download = require('download-git-repo')
download(repository, destination, options, callback)
復制代碼

其中 repository 是遠程倉庫地址；destination 是存放下載的文件路徑，也可以直接寫文件名，默認就是當前目錄；options 是一些選項，比如{ clone：boolean }表示用 http download 還是 git clone 的形式下載。

初始化目錄

首先我們先創(chuàng)建一個空文件夾，取名 heaven-cli；

目錄結(jié)構(gòu)

├── bin //可執(zhí)行文件
└── lib
    ├── init.js         //init command
    ├── template 
        └── index.js        //內(nèi)置的所有模版
    └── utils
        └── utils.js        // 公共方法
├── package.json
├── README.md
復制代碼

在該目錄下執(zhí)行npm init命令，進行初始化。

安裝依賴

npm install  chalk commander inquirer ora download-git-repo
復制代碼

我這邊的package.json的依賴是這樣的

"dependencies": {
    "chalk": "^4.1.2",
    "commander": "^8.3.0",
    "download-git-repo": "^3.0.2",
    "inquirer": "^8.1.2",
    "ora": "^5.4.1"
}
復制代碼

node.js 內(nèi)置了對命令行操作的支持，package.json 中的 bin 字段可以定義命令名和關(guān)聯(lián)的執(zhí)行文件。在 package.json 中添加 bin 字段

"bin": {
    "heaven": "bin/heaven.js"
  },
復制代碼

bin 目錄下新建一個heaven.js，并在行首加入一行 #!/usr/bin/env node 指定當前腳本由node.js進行解析

#!/usr/bin/env node
const program = require('commander')

const init = require("../lib/init");

program
  .command('init <template> <app-name>')
  .description('generate a project from a remote template (legacy API, requires @heaven-cli)')
  .action((template, name) => {
    init(template, name)
  })
  
// 解析命令行參數(shù)
program.parse(process.argv)
復制代碼

這個文件的主要作用就是定義指令，我們用node ./bin/heaven運行一下，就能看到運行結(jié)果了，

當然，在開發(fā)過程中為了方便調(diào)試，在當前的 heaven-cli 目錄下執(zhí)行 npm link，將 heaven 命令鏈接到全局環(huán)境，

這樣我們每次只要輸入heaven，就可以直接運行了。

后面就可以編寫 /lib/init.js的代碼了

// 交互式命令行
const inquirer = require('inquirer')
// 修改控制臺字符串的樣式
const chalk = require('chalk')
// node 內(nèi)置文件模塊
const fs = require('fs')
// 讀取template下內(nèi)置的模版
const tplObj = require("./template")

// 下載
const download = require("download-git-repo");

// 自定義交互式命令行的問題及簡單的校驗
let question = [
  {
    name: "name",
    type: 'input',
    message: "Project name (" + name + ')',
    validate (val) {
      if (val === '') {
        return 'Name is required!'
      } else {
        return true
      }
    }
  },
  {
      name: "description",
      type: 'input',
      message: "Project description"
  },
]

inquirer
  .prompt(question).then(answers => {
    // answers 就是用戶輸入的內(nèi)容，是個對象
    let {
        description
      } = answers;
      let projectName = answers.name
      // 出現(xiàn)加載圖標
      const spinner = ora("Downloading...");
      
      const url = tplObj.template[template]
      // 執(zhí)行下載方法并傳入?yún)?shù)
      download(
        url,
        projectName,
        err => {
          if (err) {
            spinner.fail();
            console.log(chalk.red(`Generation failed. ${err}`))
            return
          }
          // 將用戶輸入的內(nèi)容，寫入package.json內(nèi)
          const packageFile = path.join(process.cwd(), projectName + '/package.json');
          const package = require(packageFile);
          package.description = description;
          package.name = projectName;
          fs.writeFileSync(file, `module.exports = ${JSON.stringify(package, null, '\t')};`, 'utf8');
          // 結(jié)束加載圖標
          spinner.succeed();
          console.log(chalk.green('\n Generation completed!'))
          console.log('\n To get started')
          console.log(`\n    cd ${projectName} \n`)
        }
      )
  })
復制代碼

至此，一個小小的腳手架就做完了。

接下來就測試一下heaven init vue my-project命令能否生效

image.png

很快就可以看到已經(jīng)成功初始化了my-project，此時可以看一下my-project文件夾下面

image2.png

發(fā)布到 npm

既然以上命令可以執(zhí)行成功了，那接下來我們就把它發(fā)布到 npm 上吧，其它用戶就可以通過 npm install heaven-cli-fe -g 全局安裝。 即可使用 heaven 命令。

源碼地址：github.com/hujinbin/he…

可使用 template 包含如下

• vue
• vue-seo
• koa-react
• koa-vue
• microservice

vue

• vue-cli，webpack5.28版本

vue-seo （開發(fā)中）

• 基于vue-cli搭建的偽ssr腳手架，webpack5.28版本，打包生成對應的靜態(tài)html，并跳轉(zhuǎn)到真實網(wǎng)址，用于seo搜索。

koa-react

• koa+react 工程項目骨架，ssr模式，支持mysql和mongodb數(shù)據(jù)庫

koa-vue

• koa+vue 工程項目骨架 mvc結(jié)構(gòu)， 前端vue單頁面應用

microservice （開發(fā)中）

• 基于vite搭建微前端腳手架

原文鏈接：如何搭建一個自己的腳手架- 驚覺