摘要：前言作為官方的腳手架是相當好用的。注意就是腳手架的核心配置代碼。另一個是使用，用戶通過增加修改配置。所以才有了今天的主題基于的腳手架，確切說應該是基于的腳手架。其中一定要填寫。

create-react-app作為facebook官方的react腳手架是相當好用的。主要設計原理是將配置好的如Webpack，Babel，ESLint，合并到react-scripts這npm包中，用戶就可以開箱即用。很多開發者都在這基礎上進行改造開發。注意react-scripts就是create-react-app腳手架的核心配置代碼。

目前如果要自己定制配置，有兩種方案可選。一個是eject，他的原理是將react-scripts拆除然后將配置暴露到應用頂層，用戶就可以自行進行配置。另一個是使用react-app-rewired，用戶通過config-overrides.js增加修改配置。兩者各有好處。eject直接暴露可以自行配置，但是壞處就是react-scripts被解散了，就不能隨官方配置進行升級。react-scripts包攬了那些最基礎配置的臟活累活，并且一直再維護，比如修復BUG和打包優化，運行速度優化。前端發展的迅速，這些基礎配置隨著基礎設施的升級，可能隨時都會變化。我覺得eject后要就需要承擔維護成本的風險。我的理念是將專業的事情交給專業的人去做就好了，我們應該享受金字塔底層帶來的基礎設施便利去創造價值，沒必要重復造輪子，更沒必要在輪子上耗費過多的維護成本。

我的理念是推薦使用config-overrides.js來定制配置，降低維護成本。也就是在react-scripts的配置上進行增刪改查，不影響底層配置代碼，在未來需要的時候還可以進行無縫升級react-scripts，來提升速度或者解決你未關注到的BUG等等。但是create-react-app只是提供最最基礎的設施建設，我們最常用的框架配置都需要自己去定制，每次創建項目的時候都需要再寫一次定制代碼，相當煩人。所以才有了今天的主題基于create-react-app的腳手架，確切說應該是基于react-scripts的腳手架。

所以這篇文章主題應該有兩個

怎么制作CLI工具

怎么根據react-scripts來寫腳手架

項目核心代碼在github上：(github.com/LinYouYuan/…)，這個鏈接上面也有使用幫助說明，可以先點擊進去看，可以更好的理解使用和需求。

我們需求是：

保證基礎依賴和官方同步；

創建時增加常用框架選擇;

創建項目后配置項可定制;

第一點，我們需要引入react-scripts和react-app-rewired，來保持官方同步和可定制型。

第二點，我整理出我們常用的框架可選項：

第三點，創項目后我們可以通過config-overrides.js文件來預先配置，然后用戶可以再此文件進行繼續配置和改造。

首先創建nodejs項目。制作常用的Cli工具，我們一般都需要安裝下面5個工具包：（執行npm install或者其他工具安裝）

commander: 用來接收輸入命令參數，然后處理事件；

execa: 用來執行操作命令，一個更好的child_process；

inquirer: 這是創建cli最主要的工具，可以生成非常美觀的命令行界面；

chalk: 可以修改字體顏色；

fs-extra: 比原生fs更好用的fs；

我們首先要創建一個像creact-react-app一樣直接在全局就可以執行使用的命令。

我們在根目錄下創建文件夾和文件lib/index.js，這個其實就是入口執行文件。其中#!/usr/bin/env node一定要填寫。

lib/index.js

#!/usr/bin/env node
console.log("hello world")

然后在package.json中添加代碼，如下，其中react-cli就是全局要使用的命令名稱，lib/index.js就是上面要執行的文件地址。

package.json

"bin": {
    "react-cli": "lib/index.js"
}

執行npm link。執行完成后，我們就可以把命令掛載到全局，效果和npm install -g后一樣，可以全局輸入命令。link的主要目的是給我開發調試用的?，F在可以直接在控制臺輸入react-cli執行，你就可以看到打印的hello world了。

等開發完成，你可以試試發布到npm包上，但是我推薦等開發完成后再發布，當然不妨礙你好奇心想試試。發布前需要執行npm login，登錄npm賬號密碼，注意你如果是淘寶源你需要通過npm config set registry http://registry.npm.tongdun.cn暫時切回官方源。然后執行npm publish發布，這個時候也要注意，你的package.json中的name也就是項目名稱不要和別人重名了。發布好你就可以通過npm i -g來全局安裝你的包。

在lib/index.js中，我們輸入如下

const program = require("commander");
const chalk = require("chalk");

program
  .version(require("../package").version)
  .usage(" [options]");

program
  .command("create ")
  .description("create a new project powered by react-cli")
  .action(name => {
    // 這里處理邏輯
    console.log(chalk.blue(`React CLI v${require("../package").version}`));
    // const create = require("./cli/create");
    // create(name);
  });

這里主要通過commander來配置接受不同命令處理。這里主要就是要接受create 參數，然后處理輸入命令后的邏輯。其中chalk就是顏色處理。

然后繼續處理未輸入和輸入錯時候彈出幫助如下

program
  .arguments("")
  .action((cmd) => {
    program.outputHelp()
    console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))
    console.log()
  })

program.parse(process.argv);

if (!program.args.length) {
  program.outputHelp();
}

接收到用戶輸入的命令后，我們就要呈現交互界面，這個時候我們就用到了非常好用的工具inquirer。具體可以實現多少種交互形式可以點inquirer的npm網站的介紹看。我這里主要用了list和confirm的功能，也就是列表選擇和尋問功能。比如讓用戶選擇使用什么框架：

function selectManually(appName) {
  inquirer
    .prompt([
      {
        type: "list",
        name: "language",
        message: "pick a language:",
        choices: [
          "JavaScript",
          "TypeScript",
        ]
      },
      {
        type: "list",
        name: "stateManagement",
        message: "Pick a state management:",
        choices: [
          "Mobx",
          "Redux",
        ]
      },
      {
        type: "list",
        name: "cssPre",
        message: "Pick a CSS pre-processor:",
        choices: [
          "LESS",
          "SCSS/SASS",
          "styled-components",
        ]
      },
      {
        type: "list",
        name: "design",
        message: "Pick a UI Design:",
        choices: [
          "Ant Design",
          "Ant Design Mobile",
        ]
      },
    ])
    .then(answers => {
      const creator = new Creator(appName, answers);
      creator.create();
    })
}

新建一個Creator類，主要用來創建項目用的，初始化接受兩個參數，一個是項目名稱，一個是用戶選擇的框架。我項目中的模板存放在lib/packages/common-default中。這里我主要針對各種不同的配置，來修改packages.json、babelrc、config-overrides.js文件的內容就好了，然后執行復制操作。

const chalk = require("chalk");

const fs = require("fs-extra");

const path = require("path");

const inquirer = module.require("inquirer");

const {
  getPackageJson,
  writeJsonToApp,
  copyFiles,
  setNewPackageVersion,
  installPackge,
  setUserConfig,
} = require("../packages/common");

class Creator {
  constructor(appName, answers) {
    this.appName = appName;
    this.answers = answers;
    this.appDir = path.resolve(process.cwd(), this.appName);
    this.package = getPackageJson("cli-switch");
    this.babelrc = {
      plugins: [
        [
          "import",
          {
            libraryName: "antd",
            style: true,
          }
        ]
      ]
    }
  }

  async testExistDir() {
    if (fs.existsSync(this.appDir)) {
      const { override } = await inquirer.prompt([
        {
          type: "confirm",
          name: "override",
          message: chalk.red(`directory ${this.appName} exist,override it");)
        }
      ]);
      if (override) {
        console.log(chalk.green("removing..."));
        fs.removeSync(this.appDir);
        return true;
      } else {
        process.exit(1);
        return false;
      }
    }
    return true;
  }

  async create() {
    const { stateManagement, cssPre, design } = this.answers;

    console.log();

    console.log(`you pick: ${chalk.yellow(`${stateManagement}, ${cssPre}, ${design}, Router, ESLint`)}`);

    console.log();

    const isOk = await this.testExistDir(this.appDir, this.appName);

    if (!isOk) {
      return;
    }

    console.log(`