在 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 同步到远程主机即可。