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

最近写了本《》的 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 = () => (  
        
           
            
          
     
  
    );const Gitbook = () => {  window.location = `https://gb.yekai.net/?v=${process.env.REACT_APP_VERSION}`;  return (    
    
  );};export default 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 同步到远程主机即可。