[译] 定制 create-react-app：如何制作自己的模版

原文：https://auth0.com/blog/how-to-configure-create-react-app/#Test-Your-Custom-Script

TL;DR：有多种可用的工具能帮助开发者构建不同种类的网站和应用。其中之一就是  Create React App(CRA) ，该 CLI 工具帮助 JavaScript 开发者不用配置就能创建 React 应用。可即便是应用了  CRA 这么棒的工具，开发者仍需要稍作调整，增加 CRA 中不含的特别的脚本和模块等。今天，我将教你如何为自己的团队创建自定义的  create-react-app 脚本。

许多开发者已经使用了   create-react -app   来构建他们的 React 应用，但像我之前提到的，开发者仍呼吁更多的配置选项。 其中一些希望获得的支持是：

• PostCSS

• CSS Modules

• LESS

• SASS

• ES7

• MobX

• 服务器渲染

...以及更多开箱可用的功能。

有很多包括 JavaScript 新人在内的开发者，一天天的简直是胡乱地创建 React 应用，所以 Facebook 的 CRA 团队才构建了 create-react-app 工具以使创建此类应用的过程更快更安全。

作为一个需要支持以上我高亮过的功能的开发者，一个办法就是运行 npm run eject 。这条命令拷贝所有配置文件和依赖到你的项目中，然后你可以通过所有这些工具手动配置你的应用以达到满意。

开发者面对 eject 时的主要挑战一是无法再享受 CRA 之后的新特性了，二是在团队内同步设置会非常低效。解决的一个好办法是为你的团队发布一个  react-scripts 的 fork 库，然后所有团队中的开发者只需要运行  create-react-app my-app --scripts-version mycompany-react-scripts 就能拥有完全相同的设置了！

创建一个 fork

打开 GitHub 仓库并 fork 一个 create-react-app 库。

注意：推荐 fork 最新的 stable 分支。Master 是不稳定的。

在 packages 目录内，有一个叫做  react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上，这就是我们能作出改进的地方，可以配置并增加新的脚本和模版。

改进配置

clone 目录后在代码编辑器中打开 react-scripts/scripts/init.js 文件。让我们增加一些 console 信息：

......
......
console.log(chalk.red('VERY IMPORTANT:'));
console.log('Create a .env file at the root of your project with REACT_APP_EMPLOYEE_ID and REACT_APP_POSITION_ID');
console.log('  You can find these values in the company dashboard under application settings.');
console.log('  https://company.bamboohr.com/settings');
console.log();
.......

现在，来更改模版。

打开 react-scripts/template/src/App.js 并将其内容替换为：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  getEnvValues() {
    if (!process.env.REACT_APP_EMPLOYEE_ID || !process.env.REACT_APP_POSITION_ID) {
      throw new Error('Please define `REACT_APP_EMPLOYEE_ID` and `REACT_APP_POSITION_ID` in your .env file');
    }

    const employeeID = process.env.REACT_APP_EMPLOYEE_ID
    const position = process.env.REACT_APP_POSITION_ID;

    return { employeeID, position };
  }

  render() {

    const { employeeID, position } = this.getEnvValues();

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to Unicode Labs</h2>
        </div>
        <p className="App-intro">
           <b> Employee ID: { employeeID } </b><br/><br/>
           <b> Position: { position } </b>
        </p>
      </div>
    );
  }
}

export default App;

然后，到 react-scripts/template/public 目录中，打开  index.html 文件并将  <title> 标签的内容改为  Unicode Labs 。

也可以将 favicon 改为你们公司的 -- 你能随意修改或增加若干团队常用的模版。

在 react-scripts/template 目录中创建一个内容如下的  .env.example 文件：

REACT_APP_EMPLOYEE_ID='44566'
REACT_APP_POSITION_ID='ENGR'

一旦用这个版本的 create-react-app 工具安装完了  react-scripts ，用户就必须将  .env.example 文件重命名为  .env 。你应当将此说明写入  README 文件。

注意： CRA 已经支持了自定义的 env 变量，只要你愿意将  REACT_APP 作为变量前缀的话。

这就是所有我们需要的！

发布 react-scripts 到 NPM

在发布到 npm 之前，我们需要将 react-scripts/package.json 文件中  name 属性的值改为  unicodelabs-react-scripts 。

同时将 description 的值改为  Unicodelabs Configuration and scripts for Create React App. 、将  repository 的值指向正确的地址（本例中为  unicodelabs/create-react-app ）。

现在，从终端中进入 react-scripts 目录：

登录到 npm：

按提示进行，并发布。

测试自定义脚本

在终端中运行：

create-react-app test-app --scripts-version unicodelabs-react-scripts

在你自己的案例中可能会是 yourname-react-scripts ，其中  yourname 是你自己的公司名或者别的什么自定义的命名。

CRA 会执行安装，然后你将 看到：

记得吗？我们早先把这些信息放在了代码里。太棒了！

现在，在终端中进入 test-app 目录，重命名  .env.example 为  .env 并运行  npm start 命令。

你的应用会以新模版启动：

总结

好的程序员会日常不断地打磨他们的工具以提高生产力。 CRA 是一个快速创建 React 应用的利器。此外，fork 并定制化自己的  react-scripts 能帮助你和团队容易地增加所有需要的配置。你需要维护你的 fork，并  保持其和上游的同步 (https://help.github.com/articles/fork-a-repo/#keep-your-fork-synced) 以获得所有更新。Backstroke 是能帮助你完成这种功能的一个机器人程序。