手把手教你寫一個(gè)前端腳手架

引言

腳手架是什么，相信各位已經(jīng)熟悉得不能再熟悉了，畢竟無(wú)論是vue開發(fā)者（vue-cli）還是react（create-react-app）開發(fā)者，他們都有各自的腳手架，個(gè)人雖是用react更多，但不得不說(shuō)是更喜歡vue-cli的，它的插件機(jī)制非常有意思，雖不如webpack的plugin那么方便，但也很強(qiáng)大。不過(guò)再講這強(qiáng)大的功能之前，原諒我先水一篇腳手架的基礎(chǔ)。

腳手架會(huì)分兩篇來(lái)講，本篇為基礎(chǔ)篇，講一講最簡(jiǎn)單的腳手架如何搭建，入個(gè)門。

正文

概念與優(yōu)點(diǎn)

相信很多開發(fā)者都有這么一段經(jīng)歷，那就是在開始新項(xiàng)目之前，先把舊項(xiàng)目拉下來(lái)，刪刪減減，只留下初始化項(xiàng)目時(shí)的配置，一切業(yè)務(wù)代碼都刪了，然后再開始新項(xiàng)目的開發(fā)。一次兩次如此做還好，但再多了就很厭煩，特別是刪代碼還很難保證項(xiàng)目的純凈，會(huì)出現(xiàn)漏刪或者刪多了的問(wèn)題。而這時(shí)候，你就需要一個(gè)腳手架。

腳手架是什么，他就是一個(gè)純凈的項(xiàng)目，可以完全不包含業(yè)務(wù)代碼，每次開始新項(xiàng)目之前，跑一下腳手架的命令，那么一個(gè)純凈的項(xiàng)目就初始化出來(lái)了，可以直接在這之上進(jìn)行開發(fā)。

無(wú)論是公司還是個(gè)人私底下做項(xiàng)目練手，都極其建議寫一個(gè)腳手架，就算是像本文這樣做一個(gè)最簡(jiǎn)單的也是好的。

那么，腳手架該如何做搭建呢，請(qǐng)移步到下文~

實(shí)現(xiàn)

前提：所使用到的第三方庫(kù)

• Commander^[1] 完整的node命令行解決方。當(dāng)然也可以使用yargs^[2]，yargs功能更多一些。
• Chalk^[3] 能給shell命令行的文字添加樣式，簡(jiǎn)單來(lái)說(shuō)就是拿來(lái)畫畫的，可要可不要。
• fs-extra^[4] 操作文件的，比之node自帶的fs，這個(gè)會(huì)更加強(qiáng)大與完善些。
• inquirer^[5] 在shell命令行中提供交互的庫(kù)，具體效果看下文的演示。
• ora^[6] 在shell命令行中展示loading效果
• download-git-repo^[7] 下載git倉(cāng)庫(kù)。

步驟一：指定執(zhí)行的文件

• 先創(chuàng)建一個(gè)項(xiàng)目 執(zhí)行npm init -y
• 創(chuàng)建一個(gè)bin文件夾，添加index.js文件，在這個(gè)文件中寫下#! /usr/bin/env node 此時(shí)目錄結(jié)構(gòu)如下：

• 在package.json中指定執(zhí)行命令和執(zhí)行的文件

• 執(zhí)行 npm link 命令，鏈接到本地環(huán)境中 npm link （只有本地開發(fā)需要執(zhí)行這一步，正常腳手架全局安裝無(wú)需執(zhí)行此步驟）Link 相當(dāng)于將當(dāng)前本地模塊鏈接到npm目錄下，這個(gè)目錄可以直接訪問(wèn)，所以當(dāng)前包就能直接訪問(wèn)了。默認(rèn)package.json的name為基準(zhǔn)，也可以通過(guò)bin配置別名。link完后，npm會(huì)自動(dòng)幫忙生成命令，之后可以直接執(zhí)行cli xxx。

步驟二：配置可執(zhí)行命令

• 直接在bin/index.js下配置create命令。直接貼代碼了，里面涉及到的都是第三方庫(kù)的api，不了解的先查下文檔較好。

ps：以下代碼都是mjs，所以需要在package.json中添加一行 "type": "module"

// 1 配置可執(zhí)行的命令 commander
import { Command } from 'commander';
import chalk from 'chalk';
import config from '../package.json' assert { type: 'json' };

const program = new Command();

program
  .command('create <app-name>')  // 創(chuàng)建命令
  .description('create a new project') // 命令描述
  .action((name, options, cmd) => {
    console.log('執(zhí)行 create 命令');
  });

program.on('--help', () => {
  console.log();
  console.log(`Run ${chalk.cyan('rippi <command> --help')} to show detail of this command`);
  console.log();
});

program
  // 說(shuō)明版本
  .version(`rippi-cli@${config.version}`)
  // 說(shuō)明使用方式
  .usage('<command [option]');

// 解析用戶執(zhí)行命令傳入的參數(shù)
program.parse(process.argv);

將上面提到的第三方庫(kù)都安裝一下，然后隨便打開一個(gè)cmd，執(zhí)行 cli create project。

步驟三：完善核心命令---create命令

上面的步驟都只是一個(gè)腳手架最基本的鋪墊，而create命令才是最關(guān)鍵的，而這最核心的create命令都應(yīng)該做些什么事情呢？

這里就要聊聊腳手架的本質(zhì)了，腳手架的本質(zhì)無(wú)非就是我們先在一個(gè)倉(cāng)庫(kù)里寫好一個(gè)模板項(xiàng)目，然后腳手架每次運(yùn)行的時(shí)候都把這個(gè)模板項(xiàng)目拉到目標(biāo)項(xiàng)目中，腳手架不過(guò)是省去了我們拉代碼，初始化項(xiàng)目的操作而已。那么現(xiàn)在，create命令的基本流程就是這樣了。

ps: 如果要使用gitee的話，就不能使用download-git-repo這個(gè)庫(kù)了，這個(gè)庫(kù)只支持下載github，要另外找一個(gè)支持下載gitee的庫(kù)

• 創(chuàng)建一個(gè)lib文件夾，任何工具方法或者抽象類都放到這個(gè)文件夾中。以下是代碼，注釋解釋的都比較清楚了。

// lib/creator.js 編寫一個(gè)creator類，整個(gè)找模板到下載模板的主要邏輯都抽象到了這個(gè)類中。
import { fetchRepoList } from './request.js';
import { loading } from './utils.js';
import downloadGitRepo from 'download-git-repo';
import inquirer from 'inquirer';
import chalk from 'chalk';
import util from 'util';

class Creator {
  constructor(projectName, targetDir) {
    this.name = projectName;
    this.dir = targetDir;
    // 將downloadGitRepo轉(zhuǎn)成promise
    this.downloadGitRepo = util.promisify(downloadGitRepo);
  }

  fetchRepo = async () => {
    const branches = await loading(fetchRepoList, 'waiting for fetch resources');
    return branches;
  }

  fetchTag = () => {}

  download = async (branch) => {
    // 1 拼接下載路徑 這里放自己的模板倉(cāng)庫(kù)url
    const requestUrl = `rippi-cli-template/react/#${branch}`;
    // 2 把資源下載到某個(gè)路徑上
    await this.downloadGitRepo(requestUrl, this.dir);
    console.log(chalk.green('done!'));
  }

  create = async () => {
    // 1 先去拉取當(dāng)前倉(cāng)庫(kù)下的所有分支
    const branches = await this.fetchRepo();
    // 這里會(huì)在shell命令行彈出選擇項(xiàng)，選項(xiàng)為choices中的內(nèi)容
    const { curBranch } = await inquirer.prompt([
      {
        name: 'curBranch',
        type: 'list',
        // 提示信息
        message: 'please choose current version:',
        // 選項(xiàng)
        choices: branches
          .filter((branch) => branch.name !== 'main')
          .map((branch) => ({
            name: branch.name,
            value: branch.name,
          })),
      },
    ]);
    // 2 下載
    await this.download(curBranch);
  }
};

export default Creator;

// lib/utils.js 給異步方法加loading效果，只是一個(gè)好看點(diǎn)的交互效果
import ora from 'ora';

export const loading = async (fn, msg, ...args) => {
  // 計(jì)數(shù)器，失敗自動(dòng)重試最大次數(shù)為3，超過(guò)3次就直接返回失敗
  let counter = 0;
  const run = async () => {
    const spinner = ora(msg);
    spinner.start();
    try {
      const result = await fn(...args);
      spinner.succeed();
      return result;
    } catch (error) {
      spinner.fail('something go wrong, refetching...');
      if (++counter < 3) {
        return run();
      } else {
        return Promise.reject();
      }
    }
  };
  return run();
};

// lib/request.js 下載倉(cāng)庫(kù)

import axios from 'axios';

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

// 這里是獲取模板倉(cāng)庫(kù)的所有分支，url寫自己的模板倉(cāng)庫(kù)url
export const fetchRepoList = () => {
  return axios.get('https://api.github.com/repos/rippi-cli-template/react/branches');
};

寫完上述代碼，接下來(lái)我們實(shí)例化下creator，然后調(diào)用它的create方法就好了。

// lib/create.js
import path from 'path';
import Creator from './creator.js';

/**
 * 執(zhí)行create時(shí)的處理
 * @param {any} name // 創(chuàng)建的項(xiàng)目名
 * @param {any} options // 配置項(xiàng) 必須是上面option配置的選項(xiàng)之一，否則就報(bào)錯(cuò)  這里取的起始就是cmd里面的options的各個(gè)option的long屬性
 * @param {any} cmd // 執(zhí)行的命令本身 一個(gè)大對(duì)象，里面很多屬性
 */
const create = async (projectName, options, cmd) => {
  // 獲取工作目錄
  const cwd = process.cwd();
  // 目標(biāo)目錄也就是要?jiǎng)?chuàng)建的目錄
  const targetDir = path.join(cwd, projectName);
  // 創(chuàng)建項(xiàng)目
  const creator = new Creator(projectName, targetDir);
  creator.create();
};

export default create;

// bin/index.js 將上文中的action改掉
program
  .command('create <app-name>')  // 創(chuàng)建命令
  .description('create a new project') // 命令描述
  .action((name, options, cmd) => {
    console.log('執(zhí)行 create 命令');
  });

那么好，完成上述動(dòng)作，我們來(lái)看看效果。

在一個(gè)空文件夾中打開shell命令行，然后執(zhí)行cli create project project是項(xiàng)目名，隨便改。

效果已經(jīng)出來(lái)了，我的這個(gè)倉(cāng)庫(kù)有兩個(gè)分支，分別是react和react+ts的模板分支，這里任意選一個(gè)。

選擇完畢之后，就會(huì)開始下載，看到done就說(shuō)明下載完了。

此時(shí)我們的文件夾中多了這么一個(gè)文件夾，打開進(jìn)去看。

就是我們模板倉(cāng)庫(kù)里面的那些文件內(nèi)容。

其實(shí)到這里，最基本的一個(gè)腳手架就寫完了，不過(guò)對(duì)于嘗試了多次的朋友來(lái)說(shuō)會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，那就是當(dāng)當(dāng)前文件夾中存在相同名稱的文件時(shí)，文件就直接被覆蓋，而很多時(shí)候這個(gè)行為是不好的，會(huì)導(dǎo)致用戶丟失不想丟失的內(nèi)容，為了優(yōu)化這個(gè)體驗(yàn)我們加個(gè)--force的配置。

優(yōu)化：增加--force配置

force，就當(dāng)遇到同名文件，直接覆蓋繼續(xù)我們的創(chuàng)建項(xiàng)目的流程。

// bin/index.js  新增一個(gè)option
program
  .command('create <app-name>')  // 創(chuàng)建命令
  .description('create a new project') // 命令描述
  .option('-f, --force', 'overwrite target directory if it is existed') // 命令選項(xiàng)(選項(xiàng)名，描述) 這里就是解決下重名的情況
  .action((name, options, cmd) => {
    import('../lib/create.js').then(({ default: create }) => {
      create(name, options, cmd);
    });
  });

在create方法中，我們接受的第二參數(shù)就會(huì)包含這個(gè)option。

// lib/create.js
import path from 'path';
import fs from 'fs-extra';
import inquirer from 'inquirer';
import Creator from './creator.js';

/**
 * 執(zhí)行create時(shí)的處理
 * @param {any} name // 創(chuàng)建的項(xiàng)目名
 * @param {any} options // 配置項(xiàng) 必須是上面option配置的選項(xiàng)之一，否則就報(bào)錯(cuò)  這里取的起始就是cmd里面的options的各個(gè)option的long屬性
 * @param {any} cmd // 執(zhí)行的命令本身 一個(gè)大對(duì)象，里面很多屬性
 */
const create = async (projectName, options, cmd) => {
  // 先判斷是否重名，如果重名，若選擇了force則直接覆蓋之前的目錄，否則報(bào)錯(cuò)
  // 獲取工作目錄
  const cwd = process.cwd();
  // 目標(biāo)目錄也就是要?jiǎng)?chuàng)建的目錄
  const targetDir = path.join(cwd, projectName);
  if (fs.existsSync(targetDir)) {
    // 選擇了強(qiáng)制創(chuàng)建，先刪除舊的目錄，然后創(chuàng)建新的目錄
    if (options.force) {
      await fs.remove(targetDir);
    } else {
      const { action } = await inquirer.prompt([
        {
          name: 'action',
          type: 'list',
          // 提示信息
          message: `${projectName} is existed, are you want to overwrite this directory`,
          // 選項(xiàng)
          choices: [
            { name: 'overwrite', value: true },
            { name: 'cancel', value: false },
          ],
        },
      ]);
      if (!action) {
        return;
      } else {
        console.log('\r\noverwriting...');
        await fs.remove(targetDir);
        console.log('overwrite done');
      }
    }
  }

  // 創(chuàng)建項(xiàng)目
  const creator = new Creator(projectName, targetDir);
  creator.create();
};

export default create;

整個(gè)create方法增加多了一個(gè)判斷是否存在同名文件的情況。

ps：node其實(shí)已經(jīng)不推薦使用exists相關(guān)的方法了，但為了好理解這里仍然使用這個(gè)方法。node更推薦的是access方法，想了解更多可以查閱node官方文檔。

增加完這段邏輯之后，我們這個(gè)腳手架的完整流程如下：

結(jié)尾

本文是腳手架搭建的一個(gè)入門，這個(gè)腳手架只擁有最簡(jiǎn)單的功能，而下一篇腳手架的搭建將會(huì)是復(fù)雜版的，擁有者插件機(jī)制，能通過(guò)配置插件動(dòng)態(tài)生成項(xiàng)目，比如是初始化各種lint、是否使用mobx/redux，亦或者是是否初始化路由等，這都能通過(guò)配置插件完成，敬請(qǐng)期待吧??。

那么好，本文到此就結(jié)束了，希望沒(méi)接觸過(guò)腳手架的朋友能通過(guò)這篇文章了解到腳手架并且實(shí)現(xiàn)自己的腳手架。

作者：豬頭切圖仔

https://juejin.cn/post/7260893255189758010