node 和 reactrewired 修改 React 打包目录的流程

Posted 2023-03-17

参考技术A

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

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

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

修改步骤如下：

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

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

package.json 中的脚本配置为：

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

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

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

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

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

nodejs---修改文件名字

D:\node\update_name目录有如下文件：

1：文件夹：icons

2：js文件：update-name.js

 

js文件代码:

// 引入fs文件处理模块
var fs = require("fs");
// 现在我们要关心的是‘icons‘文件夹
// 我们不妨用变量表示这个文件夹名称，方便日后维护和管理
var src = ‘icons‘;

// API文档中中找到遍历文件夹的API
// 找到了，是fs.readdir(path, callback)
// 文档中有叙述：
// 读取 path 路径所在目录的内容。 回调函数 (callback) 接受两个参数 (err, files) 其中 files 是一个存储目录中所包含的文件名称的数组
// 因此：
fs.readdir(src, function(err, files) {
// files是名称数组，因此
// 可以使用forEach遍历哈, 此处为ES5 JS一点知识
// 如果不清楚，也可以使用for循环哈
files.forEach(function(filename) {
// 下面就是文件名称重命名
// API文档中找到重命名的API，如下
// fs.rename(oldPath, newPath, callback)
// 下面，我们就可以依葫芦画瓢，确定新旧文件名称：
var oldPath = src + ‘/‘ + filename,
// newPath = src + ‘/‘ + filename.replace(/_/g, ‘-‘);
newPath = src + ‘/‘ + filename + "-20";

// 重命名走起
fs.rename(oldPath, newPath, function(err) {
if (!err) {
console.log(filename + ‘下划线替换成功!‘);
}
})
});
});

cd到文件路径，在终端执行命令： node update-name.js