React项目重命名src为application后启动报错的原因及配置咨询

Create React App（CRA）的默认构建配置里硬编码了核心文件的路径：

• 项目入口文件默认指向根目录下的src/index.js
• 静态资源入口index.html默认指向根目录下的public/index.html
  你改了文件夹名称或移动了位置，但配置没同步更新，所以构建工具还是会去原来的默认路径找文件，自然就报错了。

根据你是否愿意暴露CRA的底层配置，有两种方案可选：

方案1：执行eject暴露配置（不可逆操作） #

• 在项目根目录运行命令：

  npm run eject
  

  执行后会生成config和scripts文件夹，里面是CRA的底层配置文件。
• 打开config/paths.js文件：
  • 找到appSrc变量，把原来的path.resolve(__dirname, '../src')改成你的新目录，比如path.resolve(__dirname, '../application')
  • 如果把public移到了application里，找到appHtml变量，把path.resolve(__dirname, '../public/index.html')改成path.resolve(__dirname, '../application/public/index.html')
• 保存文件后重新运行npm start就可以了。

方案2：用react-app-rewired修改配置（推荐，无需暴露底层配置） #

这种方式不用执行不可逆的eject，更安全：

1. 先安装依赖：

   npm install react-app-rewired customize-cra --save-dev
   

2. 在项目根目录新建config-overrides.js文件，写入以下代码：

   const { paths } = require('react-app-rewired');
   const path = require('path');
   
   // 替换src目录为application
   paths.appSrc = path.resolve(__dirname, 'application');
   // 如果public移到了application里，替换index.html路径
   paths.appHtml = path.resolve(__dirname, 'application/public/index.html');
   
   module.exports = function override(config, env) {
     return config;
   };
   

3. 修改package.json里的脚本命令，把react-scripts替换成react-app-rewired：

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

4. 重新运行npm start就能生效了。

注意点 #

• 如果只是把src改名为application，没移动public，那只需要修改appSrc的路径就行，appHtml保持默认。
• eject操作一旦执行就没法恢复到CRA的默认隐藏配置状态，所以优先选方案2。

内容的提问来源于stack exchange，提问作者41 72 6c