React项目如何读取src外JSON？多应用共享数据咨询

问题背景 #

项目目录结构如下：

项目根目录/
├── server.js
├── env.json
├── react-app-1/
└── react-app-2/

多个React应用需要共享根目录下的env.json数据，尝试通过const env = require('./../../env.json');导入时，触发报错：

Module not found: Error: You attempted to import ./../../env.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. [1] You can either move it inside src/, or add a symlink to it from project's node_modules/.

尝试使用dotenv未成功，针对以下问题给出解决方案：

1. 如何创建软链接？ #

根据操作系统不同，命令有所区别：

• Mac/Linux 系统：
  进入目标React应用的node_modules目录（未初始化过先执行npm install），执行命令创建软链接：

ln -s ../../env.json env-shared.json

创建完成后，React组件内可直接通过import env from 'env-shared.json'导入文件。

• Windows 系统：
  以管理员权限打开命令提示符，进入目标React应用的node_modules目录，执行：

mklink env-shared.json ..\..\env.json

若使用PowerShell，执行：

New-Item -ItemType SymbolicLink -Path .\env-shared.json -Target ..\..\env.json

同样可通过import env from 'env-shared.json'完成导入。

2. 本地创建的软链接部署到服务器后是否仍有效？是否需要在服务器重新创建？ #

本地软链接大概率无法直接在服务器生效：

• Git默认不会跟踪软链接（需显式配置），即使同步到服务器，软链接的路径是基于本地目录结构的，服务器部署路径可能与本地存在差异。
• 建议在服务器上重新创建软链接，或在CI/CD部署脚本中加入创建软链接的步骤，确保部署后路径匹配。

3. 还有其他方法可以让React项目访问外部数据吗？ #

除软链接外，还有三种常用方案：

方案一：通过服务器接口返回 #

利用根目录的server.js搭建简单接口，例如GET /api/env，在接口内读取env.json内容并返回。React应用通过fetch('/api/env')请求获取数据。这种方式更灵活，还可根据开发/生产环境返回不同配置。

方案二：构建前自动复制文件 #

在项目根目录编写Node.js脚本，构建前自动将env.json复制到各React应用的src目录：
创建copy-env.js文件：

const fs = require('fs');
const path = require('path');

const envPath = path.resolve(__dirname, 'env.json');
const apps = ['react-app-1', 'react-app-2'];

apps.forEach(app => {
  const targetPath = path.resolve(__dirname, app, 'src', 'env.json');
  fs.copyFileSync(envPath, targetPath);
  console.log(`Copied env.json to ${app}/src`);
});

在每个React应用的package.json中修改脚本：

{
  "scripts": {
    "start": "node ../copy-env.js && react-scripts start",
    "build": "node ../copy-env.js && react-scripts build"
  }
}

方案三：环境变量注入 #

将env.json的键值对转换为带REACT_APP_前缀的环境变量，写入根目录的.env文件（例如REACT_APP_API_URL=http://xxx）。安装dotenv-cli依赖：

npm install dotenv-cli --save-dev

在React应用的package.json中配置脚本加载根目录的.env：

{
  "scripts": {
    "start": "dotenv -e ../.env react-scripts start",
    "build": "dotenv -e ../.env react-scripts build"
  }
}

之后在React代码中可通过process.env.REACT_APP_API_URL访问对应配置。

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