[译] 定制 create-react-app：如何制做本身的模版

原文：auth0.com/blog/how-to…

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 一个 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 目录：

react-scripts 目录

登陆到 npm：

登陆 npm

按提示进行，并发布。

发布到 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 关注公众号

转载请注明出处