如何修改index.js位置？调整项目结构后npm start启动失败求助

你把React项目的核心源码从根目录的src/移到了frontend/子目录后，启动失败的原因很明确：Create React App默认的react-scripts脚本会固定去项目根目录的src/文件夹寻找入口文件index.js，现在这个文件路径变了，脚本自然找不到它。下面给你几个实用的解决方案：

方案1：通过环境变量指定源码目录（简单跨平台） #

这个方法不需要改动项目核心配置，只需要调整package.json里的启动脚本，告诉脚本新的源码位置：

1. 先安装跨环境变量工具cross-env（兼容Windows、Mac和Linux系统）：

npm install cross-env --save-dev

2. 修改package.json中的scripts字段，在启动命令前添加环境变量指定源码目录：

"scripts": {
  "start": "cross-env SRC=frontend/src react-scripts start",
  "build": "cross-env SRC=frontend/src react-scripts build",
  "test": "cross-env SRC=frontend/src react-scripts test"
}

修改完再执行npm start，脚本就会去你指定的frontend/src目录下找index.js了。

方案2：使用Craco修改配置（无需eject） #

如果你需要更灵活的项目配置，推荐用craco（Create React App Configuration Override）——它允许你在不"eject"项目的前提下，修改Create React App的默认配置：

1. 安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js文件，添加以下内容：

const path = require('path');

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // 更新源码目录和入口文件的路径
      paths.appSrc = path.resolve(__dirname, 'frontend/src');
      paths.appIndexJs = path.resolve(__dirname, 'frontend/src/index.js');
      webpackConfig.entry = paths.appIndexJs;
      return webpackConfig;
    }
  }
};

3. 修改package.json的scripts，把react-scripts替换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

方案3：Eject项目（不推荐） #

注意：这个操作是不可逆的，eject后你会失去Create React App的官方更新支持，只有当你需要深度定制项目配置时才考虑使用：

1. 执行eject命令：

npm run eject

2. 在生成的config/paths.js文件中，修改appSrc和appIndexJs的路径：

// 原默认路径
// const appSrc = resolveApp('src');
// const appIndexJs = resolveModule(resolveApp, 'src/index.js');

// 修改为新路径
const appSrc = resolveApp('frontend/src');
const appIndexJs = resolveModule(resolveApp, 'frontend/src/index.js');

完成后重新执行npm start即可正常启动项目。

内容的提问来源于stack exchange，提问作者Sahand