React项目修改package.json入口为app.js后为何仍需index.js？

• 你修改的package.json字段不匹配构建工具的默认配置

  绝大多数React脚手架（Create React App、Vite 生成的React项目等）的本地启动、构建逻辑并不会读取package.json的main字段作为项目入口，该字段通常只作为npm包对外发布时的主入口标识，仅修改这个字段不会改变本地项目的入口指向。

• 未同步修改构建工具的入口配置
  不同工具的入口修改方式存在差异，仅改package.json不会生效：
  • 使用Create React App：需要先执行eject操作，再修改config/paths.js中的appIndexJs配置项指向你的app.js路径；也可以引入react-app-rewired等工具覆写默认配置，实现入口修改。
  • 使用Vite：需要在vite.config.js中新增build.rollupOptions.input配置指定入口为app.js，同时修改根目录下index.html内引入的脚本路径，将原本的/src/index.js替换为你的app.js路径。
  • 使用原生Webpack：直接修改webpack.config.js中的entry配置项，将值改为app.js的绝对/相对路径即可。
• 项目HTML模板硬编码了index.js引入逻辑
  几乎所有React项目的根目录index.html模板中，都会硬编码引入index.js的脚本标签，如果你没有修改该引入路径，页面加载时会依然请求index.js文件，如果该文件不存在、或者内部没有引入app.js渲染根组件，就会直接导致程序崩溃。

内容的提问来源于stack exchange，提问作者Hatice Yazıcı