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

Posted 2022-01-02 毕小宝

背景

基于 SpringBoot + React 前后端分离的工程，为了便于打包，通常需要配置 React 项目的打包目录为 SpringBoot 工程的 resources/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 工程的静态文件目录，例如：

appBuild: resolveApp('../xxx/src/main/resources/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'
    )
);

启示录

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

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

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