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，并 保持其和上游的同步 (help.github.com/articles/fo…) 以获得所有更新。Backstroke 是能帮助你完成这种功能的一个机器人程序。
--End--
查看更多前端好文
请搜索 fewelife 关注公众号
转载请注明出处
