做一个基于react-scripts的脚手架

摘要：前言作为官方的脚手架是相当好用的。注意就是脚手架的核心配置代码。另一个是使用，用户通过增加修改配置。所以才有了今天的主题基于的脚手架，确切说应该是基于的脚手架。其中一定要填写。

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的主要目的是给我开发调试用的。现在可以直接在控制台输入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(`