先说说背景:因为一些原因,需要把react项目build之后输出的文件夹名称修改为想要的名称(而不是默认的build),项目是用creat-react-app脚手架创建的,配置文件用的react-app-rewired来操作,故需要修改配置文件:config-overrides.js,我想把build输入的文件夹名称修该为novelcoronavirusReg-H5,修改步骤如下:
const {override} = require('customize-cra');
//1.引入相关文件,设置相关参数:
const path = require('path');
const paths = require('react-scripts/config/paths');
paths.appBuild = path.join(path.dirname(paths.appBuild), 'novelcoronavirusReg-H5');//注意看这儿
//2.在module.exports 导出配置中增加如下代码:
module.exports = {
//因为用的是customize-cra,故配置如下:
webpack:override(
//其他的配置...
//...
//增加这个配置
config => {
//注意:这句是关键,而问题也就出在这局
config.output.path = path.join(path.dirname(config.output.path), 'novelcoronavirusReg-H5');
return config;
}
)
}
一顿操作猛如虎,尝试了一下yarn build,输出的文件夹名称按照配置已经完美修改为novelcoronavirusReg-H5,正当在觉得世界如此美好之时,运行了一下一下本地启动命令:yarn start,我靠,什么情况,直接给我蹦出了一个错误---The "path" argument must be of type string. Received type undefined,项目运行不起来了,完整错误如下:
填坑之旅:google各种搜索,找到比较靠谱的答案是升级react-scripts到3.4.0以上,然而,我照做了,然并卵。然后就再也找不到想要的答案了。。。此时真想一万句fuxx。冷静下来想想,为啥build没报错,而start命令启动的时候报错呢?似乎好像应该是config.output.path这个配置是运行时生效的,所以start的时候应该是undefined的,所以造成报错。。。
想通了这儿,那么其实我start的时候是并不需要这个配置的,那么我只需做个判断就行了,好了,解决问题:
//上面2中注意的那句代码修改,加上判断,注意:一定要加上'/',否则也会报错
config.output.path = path.join(path.dirname(config.output.path || '/'), 'novelcoronavirusReg-H5');
至此,问题得以解决。