如何使用不同的根目录运行“react-scripts start”？

Question

由于特殊原因，我想在两个文件夹 web（React 应用程序）和 mobile 之间共享 package.json 文件：

▸ mobile/
▸ node_modules/
▾ web/
  ▸ public/
  ▸ src/
    README.md
  package-lock.json
  package.json
  yarn.lock

在我的 package.json 文件中，我已经在 scripts 下添加了以下内容："web-start": "react-scripts start"。但是，当我在根文件夹（/Users/edmund/Documents/src/banana-client）中运行它时，我得到了以下信息：

➜  banana-client git:(master) ✗ yarn web-start
yarn web-start v0.24.6
$ react-scripts start web
Could not find a required file.
  Name: index.html
  Searched in: /Users/edmund/Documents/src/banana-client/public
error Command failed with exit code 1.

我能添加根目录的方法吗？

- bigpotato

---

你使用过 ejected create-react-app 吗？react-scripts 是 CRA 的一部分... - Andy Theos

Answer 1

针对这个特定的使用情况，我建议您使用Yarn工作区。

使用Yarn工作区，您可以在单个存储库中拥有多个项目，其中包含一个根级别的主package.json文件，该文件由项目共享，并且它们不共享并单独使用的项目级别的package.json文件。

运行“yarn install”将在根级别安装所有依赖项，如果您不希望某些软件包在根目录安装，则可以进行配置。

您可以在根目录中编写脚本，以帮助您在该工作区中运行内部项目。

因此，您的最终项目结构将类似于：

- project_root
  - web
    - node_modules
    - package.json
  - mobile
    - node_modules
    - package.json

  - node_modules
  - package.json

在这里了解有关 Yarn 工作区的更多信息：https://yarnpkg.com/lang/en/docs/workspaces/

查看此示例以了解其基本用法：https://github.com/pedronauck/yarn-workspaces-example

- Dangling Cruze

---

这个问题是关于让 react-scripts start 在不同的目录中搜索 index.js，而不是关于使用 Yarn 工作区的问题。 - Mahmoud Mousa Hamad

Answer 2

我同意使用 Yarn 工作区可能会帮助您实现所需的内容。否则，您需要将配置为 /src/index.js 的 appIndexJs（在 react-scripts 包的 config/paths.js 中设置）弹出。一旦弹出，则可以修改 config/paths.js 变量 appIndexJs 以适应各种 appIndex。

- user2372736

Answer 3

在上面的答案基础上，只需执行以下操作：

"web-start": "cd web && npm start"

- Anandraj Manickam

Answer 4

我使用以下解决方法解决了同样的问题：

 "web-start": "cd web && react-scripts start"

- MarkusL

---

我认为这个问题不应该被踩，除非因为 CRA 严格地“假定”基本目录，所以它不能按照那种方式工作。这意味着它的配置假定 node_modules 存在于基本目录中。@MarkusL 猜对了，但由于 CRA 的风格，是错误的。 - Siva Tumma