React中从node_modules内自定义包访问根项目文件的问题

方案一：项目主动传递配置（最符合模块化规范） #

这是最推荐的方式，让项目侧主动把配置传给你的包，彻底避免路径依赖问题：

1. 在项目入口文件（比如src/App.js）中导入配置，并初始化你的包

// 项目src/App.js
import config from './config.json';
import MyPackage from 'my_package';

// 初始化包时传入配置
const myPackageInstance = MyPackage.init(config);

2. 在你的包（node_modules/my_package/index.js）中接收并使用配置

// 你的包index.js
let projectConfig = null;

export function init(config) {
  projectConfig = config;
  // 这里就可以正常使用projectConfig了
  return {
    // 暴露包的方法或实例
    getConfig: () => projectConfig
  };
}

export default { init };

方案二：通过构建工具别名配置（需项目配合） #

如果不想修改包的逻辑，可以让项目的构建工具（Webpack/Vite）配置路径别名，让包能直接通过别名导入配置：

Webpack 配置示例 #

在项目根目录的webpack.config.js中添加别名：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      // 把项目src目录映射为@project-src别名
      '@project-src': path.resolve(__dirname, 'src')
    }
  }
};

然后在你的包中直接用别名导入：

// 你的包index.js
import config from '@project-src/config.json';

注意：需要在包的文档中明确告知使用者要配置这个别名，否则会报错。

Vite 配置示例 #

在项目根目录的vite.config.js中添加别名：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@project-src': path.resolve(__dirname, 'src')
    }
  }
});

方案三：Node.js环境下读取（仅适用于SSR/脚本场景） #

如果你的包是在Node.js环境运行（比如SSR服务端代码），可以通过process.cwd()获取项目根目录，再读取配置文件：

// 你的包index.js（仅Node.js环境可用）
const fs = require('fs');
const path = require('path');

// 获取项目根目录，拼接配置文件路径
const configFilePath = path.join(process.cwd(), 'src', 'config.json');
const config = JSON.parse(fs.readFileSync(configFilePath, 'utf8'));

注意：浏览器环境没有process和fs模块，这个方法不能用于前端浏览器运行的代码。

为什么之前的方法无效？ #

• 相对路径失效：React项目的构建工具（Webpack/Vite）会对node_modules中的包做特殊处理，相对路径的解析是基于包自身的位置，但打包后代码的存放路径可能改变，导致../../src/config.json无法正确指向项目的src目录。
• path库不能在浏览器用：path是Node.js的核心模块，浏览器环境中没有这个模块，只有在Node端运行的代码才能使用。

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