在 React 程式碼中使用自動更新的 CRA 環境變數

貓哥kaiye發表於2019-02-03
React變數

最近寫了本《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 同步到遠端主機即可。

相關文章