node 和 react-app-rewired 修改 React 打包目录的流程

Posted 2022-01-22 毕小宝

背景

基于 SpringBoot + React 前后端分离的工程，为了便于打包，通常需要配置 React 项目的打包目录为 SpringBoot 工程的 target/classes/static/static ，并在 pom.xml 打包插件中配置 prepare-package 阶段执行 npm run build 先打包前端 React 工程。

这样比从 dist 目录下拷贝前端文件到 static 目录方便多了，本文记录两种不同前端打包插件配置 React 打包目录的方法。

基于 node 的工程

创建的工程包含一个 scripts 目录，package.json 中的脚本配置为：

  "scripts": 
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  ,

修改步骤如下：

第一步，执行 npm run eject 先导出配置文件。

第二步，修改 config/paths.js 中的 appBuild 配置为 Web 工程的编译后 classes 下的静态文件目录，例如：

appBuild: resolveApp('../xxx/target/classes/static'),

基于 react-app-rewired 的工程

package.json 中的脚本配置为：

"scripts": 
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  

该场景需要修改创建配置文件 config-overrides.js ，添加 appBuild 配置，步骤如下：

第一步，在根目录下创建文件命名为 config-overrides.js。
第二步，编辑文件，写入定向配置：

const override, fixBabelImports = require('customize-cra');

const path = require('path')
const paths = require('react-scripts/config/paths')

// 修改打包文件路径为 web 工程的 resources 目录
paths.appBuild = path.join(path.dirname(paths.appBuild), 
       '../xxx/src/main/resources/static')
module.exports = override(fixBabelImports('import', 
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    )
);

npm build 打包路径配置的影响

mvn 打包时会先编译生成 classes 目录，如果将 React 项目打包目录设置到 resource/static ，就有一个问题：prepare-package 阶段发生在类编译完成后，此时再执行 npm run build 打包前端，那么前端静态文件生成后，由于编译已经完成，静态文件并没有进入到 classes 目录下，导致两个问题：

1. 要么 static 是上一次前端打包的结果【如果前端有修改的话，页面会是上一次的旧版本】
2. 要么 static 目录不存在【如果手动先删除了的话】

所以，为了保证打包后的 SpringBoot 可执行文件的完整，应该修改前端的打包目录为 target/classes/static 。

启示录

一个 React 项目前后 package.json 配置的脚本内容不一样，后面用的 react-app-rewired 插件，导致先前配置的 appBuild 不生效。

与备份项目对比，发现前后用的打包脚本不一样，才知道了修改 React 的打包目录还有这种方法。

相比于 node 脚本， react-app-rewired 插件不需要导出配置文件，直接添加 appBuild 更方便一些！