[译] 定制 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 (
      

        

          
          
Welcome to Unicode Labs
        
        

            Employee ID: { employeeID } 


            Position: { position } 
        
      
    );
  }
}

export default App;

然后，到 react-scripts/template/public 目录中，打开  index.html 文件并将