[譯] 定製 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 關注公衆號

轉載請註明出處