在 React 代碼中使用自動更新的 CRA 環境變量

最近寫了本《Git 進階指南》的 Gitbook，但（可能）因爲 Gitbook CDN 上的緩存過於頑固，因此須要在訪問 Gitbook 時，自動加上清緩存參數 ?v=版本號。

React 代碼以下，當訪問站點 /gb 時，自動跳轉外站並帶上版本號：

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";

const App = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
      <Route path="/gb" component={Gitbook} />
    </div>
  </Router>
);

const Gitbook = () => {
  window.location = `https://gb.yekai.net/?v=${process.env.REACT_APP_VERSION}`;
  return (
    <div className="loading-box"></div>
  );
};

export default App;
複製代碼

CRA 文檔提到 process.env 必須使用 REACT_APP 的前綴 ，因此咱們這裏命名爲 REACT_APP_VERSION 。

而 version 的值，則但願能在每次運行發佈時自動更新。

具體 package.json 定義以下：

{
  "name": "yekai-net",
  "version": "1.1.2",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "publish": "REACT_APP_VERSION=$(npm version patch) npm run build && rsync -av ./build yekai:/root/centos-config/www/yekai.net/"
  }
}
複製代碼

當運行 npm run publish 時，會先使用 npm version patch 命令自動更新項目版本號（此例是 1.1.2 patch 後爲 1.1.3），並設置給環境變量 REACT_APP_VERSION。

因此後面的 npm run build 能將 React 代碼中的 ${process.env.REACT_APP_VERSION} 變量，編譯成具體的 version 值 1.1.3。

最後，使用 rsync 同步到遠程主機便可。