手把手教你從0搭建前端腳手架詳解

npm i path
npm i chalk@4.1.0
npm i fs-extra
npm i inquirer@8.2.4
npm i commander
npm i axios
npm i download-git-repo

#! /usr/bin/env node

const program = require('commander')

// 建立一個create命令
.command('create <app-name>')

// 解析使用者執行命令傳入引數
program.parse(process.argv);

.option('-f, --force', '如果存在的話強行覆蓋')

program.command('create <app-name>')
// 這個name 就代表第一個必填引數 options就代表其餘， 如果有第二個就在寫一個，最後一個永遠是剩餘引數
.action((name, options) => {
    console.log(name)
    // 列印執行結果
    // require("../lib/create")(name, options)
})

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

// 定義命令和引數
// create命令
program
.command('create <app-name>')
.description('create a new project')
// -f or --force 為強制建立，如果建立的目錄存在則直接覆蓋
.option('-f, --force', 'overwrite target directory if it exist')
.action((name, options) => {
    // 列印執行結果
    console.log('專案名稱', name)
})

// 解析使用者執行命令傳入引數
program.parse(process.argv);

test-cli create app

program.parse(process.argv)

program
.command('create <app-name>')
.description(chalk.cyan('create a new project'))
// -f or --force 為強制建立，如果建立的目錄存在則直接覆蓋
.option('-f, --force', 'overwrite target directory if it exist')
.action((name, options) => {
    // 列印執行結果
    require("../lib/create")(name, options)
})

// lib/create.js

const path = require('path')
// fs-extra 是對 fs 模組的擴充套件，支援 promise 語法
const fs = require('fs-extra')
// 用於互動式詢問使用者問題
const inquirer = require('inquirer')
// 匯出Generator類
const Generator = require('./Generator')

//1. 丟擲一個方法用來接收使用者要建立的資料夾(專案)名 和 其他引數
module.exports = async function (name, options) {
  // 當前命令列選擇的目錄
  const cwd  = process.cwd();
  // 需要建立的目錄地址
  const targetAir  = path.join(cwd, name)
  
  //2 判斷是否存在相同的資料夾(專案)名
  // 目錄是否已經存在？
  if (fs.existsSync(targetAir)) {
    // 是否為強制建立？
    if (options.force) {
      await fs.remove(targetAir)
    } else {
      // 詢問使用者是否確定要覆蓋
      let { action } = await inquirer.prompt([
        {
          name: 'action',
          type: 'list',
          message: 'Target directory already exists Pick an action:',
          choices: [
            {
              name: 'Overwrite',
              value: 'overwrite'
            },{
              name: 'Cancel',
              value: false
            }
          ]
        }
      ])
      // 如果使用者拒絕覆蓋則停止剩餘操作
      if (!action) {
        return;
      } else if (action === 'overwrite') {
        // 移除已存在的目錄
        console.log(`rnRemoving...`)
        await fs.remove(targetAir)
      }
    }
  }

  //3 新建generator類
  const generator = new Generator(name, targetAir);
  generator.create();
}

// lib/Generator.js

const { getRepoList, getTagList } = require('./http')
const ora = require('ora')
const inquirer = require('inquirer')
const util = require('util')
const downloadGitRepo = require('download-git-repo') // 不支援 Promise
const chalk = require('chalk')
const path = require('path');
const fs = require("fs-extra");

// 新增載入動畫
async function wrapLoading(fn, message, ...args) {
  // 使用 ora 初始化，傳入提示資訊 message
  const spinner = ora(message);
  // 開始載入動畫
  spinner.start();

  try {
    // 執行傳入方法 fn
    const result = await fn(...args);
    // 狀態為修改為成功
    spinner.succeed();
    return result; 
  } catch (error) {
    // 狀態為修改為失敗
    spinner.fail('Request failed, refetch ...');
  } 
}

class Generator {
  constructor (name, targetDir){
    // 目錄名稱
    this.name = name;
    // 建立位置
    this.targetDir = targetDir;
    // 對 download-git-repo 進行 promise 化改造
    this.downloadGitRepo = util.promisify(downloadGitRepo);
  }

  // 獲取使用者選擇的模板
  // 1）從遠端拉取模板資料
  // 2）使用者選擇自己新下載的模板名稱
  // 3）return 使用者選擇的名稱

  async getRepo() {
    // 1）從遠端拉取模板資料
    const repoList = await wrapLoading(getRepoList, 'waiting fetch template');
    if (!repoList) return;
    // 過濾我們需要的模板名稱
    const repos = repoList.map(item => item.name);

    // 2）使用者選擇自己新下載的模板名稱
    const { repo } = await inquirer.prompt({
      name: 'repo',
      type: 'list',
      choices: repos,
      message: 'Please choose a template to create project'
    })

    // 3）return 使用者選擇的名稱
    return repo;
  }

  // 獲取使用者選擇的版本
  // 1）基於 repo 結果，遠端拉取對應的 tag 列表
  // 2）自動選擇最新版的 tag

  async getTag(repo) {
    // 1）基於 repo 結果，遠端拉取對應的 tag 列表
    const tags = await wrapLoading(getTagList, 'waiting fetch tag', repo);
    if (!tags) return;
    
    // 過濾我們需要的 tag 名稱
    const tagsList = tags.map(item => item.name);

    // 2）return 使用者選擇的 tag
    return tagsList[0]
  }

  // 下載遠端模板
  // 1）拼接下載地址
  // 2）呼叫下載方法
  async download(repo, tag){
    // 1）拼接下載地址
    const requestUrl = `geeksTest/${repo}${tag ? '#'+tag : ''}`;

    // 2）呼叫下載方法
    await wrapLoading(
      this.downloadGitRepo, // 遠端下載方法
      'waiting download template', // 載入提示資訊
      requestUrl, // 引數1: 下載地址
      path.resolve(process.cwd(), this.targetDir) // 引數2: 建立位置
    ) 
  }

  // 核心建立邏輯
  // 1）獲取模板名稱
  // 2）獲取 tag 名稱
  // 3）下載模板到模板目錄
  // 4) 對uniapp模板中部分檔案進行讀寫
  // 5) 模板使用提示
  async create(){

    // 1）獲取模板名稱
    const repo = await this.getRepo()

    // 2) 獲取 tag 名稱
    const tag = await this.getTag(repo)

    // 3）下載模板到模板目錄
    await this.download(repo, tag)
    
    // 5）模板使用提示
    console.log(`rnSuccessfully created project ${chalk.cyan(this.name)}`)
    console.log(`rn  cd ${chalk.cyan(this.name)}`)
    console.log(`rn  啟動前請務必閱讀 ${chalk.cyan("README.md")} 檔案`)
  
  }
}

module.exports = Generator;

npm i commander

// lib/http.js

// 通過 axios 處理請求
const axios = require('axios')

axios.interceptors.response.use(res => {
  return res.data;
})

/**
 * 獲取模板列表
 * @returns Promise
 */
async function getRepoList() {
  return axios.get('https://api.github.com/orgs/geeksTest/repos')
}

/**
 * 獲取版本資訊
 * @param {string} repo 模板名稱
 * @returns Promise
 */
async function  getTagList(repo) {
  return axios.get(`https://api.github.com/repos/geeksTest/${repo}/tags`)
}

module.exports = {
  getRepoList,
  getTagList
}