系列文章:

• 【手把手帶你擼一個腳手架】第一步, 建立第一個命令
• 【手把手帶你擼一個腳手架】第二步, 搭建開發環境
• 【手把手帶你擼一個腳手架】第三步, 獲取 github 專案資訊
• 【手把手帶你擼一個腳手架】第四步, 通過擼碼獲取專案資訊
• 【手把手帶你擼一個腳手架】第五步, 擼完收工

前面的章節中我們已經能夠獲取到命令列中輸入的引數, 也能通過 gayhub 開放 api 中獲取到專案模板資訊, 這裡我們開始把之前的功能連綴起來 ^_^

本節用到的工具較多, list 一哈:

• 獲取命令列指令 commander
• 命令列互動工具 inquirer.js
• 命令列顯示載入中 ora
• ajax 封裝庫 axios

首先展示一下目錄結構程式碼地址

各個檔案介紹

bin/learn.js

#!/usr/bin/env node
require('../');
複製程式碼

仍然作為專案的引導檔案, 直接引入專案根目錄下的 index.js

index.js

require('babel-register');
const babel = require('@babel/core');
const babelPresetLatestNode = require('babel-preset-latest-node');

babel.transform('code();', {
  presets: [[babelPresetLatestNode, {
    target: 'current',
  }]],
});

require('babel-polyfill');
require('./src');
複製程式碼

根目錄下的 index 作為專案的入口檔案, 它的職責主要是相容 es6, 並匯入專案主檔案 src/index.js

src/index.js

// colors console.log 文字新增字型顏色, 美觀
import 'colors';

// 接收命令列引數, 提供基礎資訊提示功能
import commander from 'commander';

// 內部模組
import { existsSync } from 'fs';
import { resolve } from 'path';
import { version } from '../package.json';

commander.version(version)
  .parse(process.argv);

// 獲取命令列中傳入的第一個引數
const [todo = ''] = commander.args;

// 判斷如果 command 目錄下是否存在使用者輸入的命令對應的檔案
if (existsSync(resolve(__dirname, `command/${todo}.js`))) {
  require(`./command/${todo}.js`);
} else {
  console.log(
    `
      你輸入了未知指令, 小哥哥我已經受不了掛了...
    `.red,
  );
  process.exit(-1);
}
複製程式碼

這個是專案的主檔案, 也是整個程式的總控. 正如註釋, 執行命令前, 從這裡檢測我們的命令目錄下是否已經存在了使用者請求的命令, 避免了使用者誤操作程式報錯的風險.

command/download.js

// 命令管理
import commander from 'commander';
// 命令列互動工具
import inquirer from 'inquirer';
// 命令列中顯示載入中
import ora from 'ora';
import Git from '../tools/git';

class Download {
  constructor() {
    this.git = new Git();
    this.commander = commander;
    this.inquirer = inquirer;
    this.getProList = ora('獲取專案列表...');
    this.getTagList = ora('獲取專案版本...');
    this.downLoad = ora('正在加速為您下載程式碼...');
  }

  run() {
    this.commander
      .command('download')
      .description('從遠端下載程式碼到本地...')
      .action(() => { this.download(); });

    this.commander.parse(process.argv);
  }

  async download() {
    let getProListLoad;
    let getTagListLoad;
    let repos;
    let version;
    try {
      getProListLoad = this.getProList.start();
      repos = await this.git.getProjectList();
      getProListLoad.succeed('獲取專案列表成功');
    } catch (error) {
      console.log(error);
      getProListLoad.fail('獲取專案列表失敗...');
      process.exit(-1);
    }
    if (repos.length === 0) {
      console.log('\n可以開發的專案數為 0, 肯定是配置錯啦~~\n'.red);
      process.exit(-1);
    }
    const choices = repos.map(({ name }) => name);
    const questions = [
      {
        type: 'list',
        name: 'repo',
        message: '請選擇你想要開發的專案型別',
        choices,
      },
    ];
    const { repo } = await this.inquirer.prompt(questions);
    // 獲取專案的版本, 這裡預設選擇確定專案的最近一個版本
    try {
      getTagListLoad = this.getTagList.start();
      [{ name: version }] = await this.git.getProjectVersions(repo);
      getTagListLoad.succeed('獲取專案版本成功');
    } catch (error) {
      console.log(error);
      getTagListLoad.fail('獲取專案版本失敗...');
      process.exit(-1);
    }

    console.log(`您選擇的專案是${repo}, 即將下載版本${version}`);
  }
}
const D = new Download();
D.run();
複製程式碼

command 目錄下存放的是我們整個專案中所有的命令檔案, 不同的命令對應不同的檔案, 體現了單一職責的設計. download 命令用到了我們上一節中提到的兩個介面(即獲取專案列表和獲取版本號列表)有疑問的同學請回頭參考系列文章第三步 ^_^.

tools/git.js

import request from './request';
import { orgName } from '../../config';

class Git {
  constructor() {
    this.orgName = orgName;
  }

  getProjectList() {
    return request(`/orgs/${this.orgName}/repos`);
  }

  getProjectVersions(repo) {
    return request(`/repos/${this.orgName}/${repo}/tags`);
  }

  getProjectUrl() {

  }

  downloadProject() {

  }
}

export default Git;
複製程式碼

此檔案是 git 相關的操作的檔案, 由於腳手架的核心功能就是獲取專案的 github 地址, 並下載, 所以我的 Git 類規劃了以上幾個功能, 獲取專案列表 獲取專案版本號列表 獲取專案地址 下載專案, 雖然後兩個功能在這一節還用不到, 我也先留下了程式碼樁

tools/request.js

import axios from 'axios';
import { baseURL } from '../../config';

const instance = axios.create({
  baseURL,
  timeout: 1e4,
});

// Add a request interceptor
instance.interceptors.request.use(config => config,
  error => Promise.reject(error));

// Add a response interceptor
instance.interceptors.response.use(response => response.data,
  error => Promise.reject(error));

export default instance;
複製程式碼

這個檔案僅僅是對 axios 做了一層簡單的封裝, 封裝的手法我還不是掌握的很好, 如果有精通的小夥伴歡迎評論區賜教.

config/index.js

// github 介面基礎地址
export const baseURL = 'https://api.github.com';
// organization 名稱
export const orgName = 'learn-cli-organization';
複製程式碼

作為整個專案的配置檔案, 承擔了儲存專案執行過程中需要的配置資訊的功能.

介紹完幾個檔案, 感到如釋重負. 如果有手懶的小夥伴, 可以直接 github clone 本階段程式碼按照第一步的方法配置即可

ps: git clone https://github.com/luoquanquan/learn-cli.git ps: git checkout 0.0.1 ps: 完成後要執行 npm i 和 npm link 的喲 ^_^

驗證程式碼

終於到了驗證的環節. 小夥伴們, 自己寫完或者 git clone 完程式碼以後可以開啟終端啦, 484 有點小小的雞凍 ^_^

輸入 learn download

出現上圖所示的專案名稱和版本號, 說明我們已經通過程式碼獲取 git 專案資訊成功啦.

下集預告: 到現在, 我們已經能夠從 github 獲取到專案的名稱和版本號, 下一步會嘗試把專案 download 到本地用到了工具 download-git-repo, 熱愛動手的小夥伴已經可以開始著手啦, 說不定下一步就是你來寫喲 ?

======== 更新 ========

由於 github 開放 api 訪問次數的限制(未授權每小時只有 60 次), 所以我們不得不加上授權.其實就是申請一個 github 授權 token 寫到程式碼裡. 申請 token 的步驟在這裡

最後貼上新增 token 以後的一次提交記錄

為什麼要把 token 先改成亂碼在反轉回來呢? 因為腳手架程式碼要上傳到 github, 上傳時候如果你的程式碼中存在 github token 明文的話, 該 token 就會被刪除. (不說了都是淚....)

最終的程式碼