在 React 代码中使用自动更新的 CRA 环境变量

1,867 阅读1分钟

最近写了本《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 同步到远程主机即可。