如何在自研React包中读取使用项目的package.json文件？

你遇到的问题本质是：浏览器运行环境没有文件系统访问权限，Node.js的fs类库只能在Node环境（比如构建阶段）使用，没法在前端代码里直接读取项目根目录的package.json。下面是几个实用的解决办法：

方案一：让使用方手动传递配置值（最直接） #

不需要任何额外工具，让使用你的包的开发者，在调用你的组件/函数时，手动传入package.json里需要的字段。

示例：
你的包对外暴露的函数：

// 你的包代码
export function initMyPackage(config) {
  // 使用传入的配置值，比如config.projectName、config.reactVersion
  console.log('项目名称:', config.projectName);
}

使用方项目中的调用代码：

// 使用方项目代码
import { initMyPackage } from '你的包名';
import packageJson from './package.json';

initMyPackage({
  projectName: packageJson.name,
  reactVersion: packageJson.dependencies.react
});

方案二：通过webpack DefinePlugin注入全局变量（适合webpack项目） #

利用webpack的构建能力，在使用方项目构建时，把package.json的指定字段注入到全局，你的包直接读取全局变量即可。

步骤1：让使用方配置webpack #

在使用方项目的webpack.config.js中添加DefinePlugin配置：

const webpack = require('webpack');
const packageJson = require('./package.json');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new webpack.DefinePlugin({
      // 注入需要的字段，注意要用JSON.stringify转义
      '__PROJECT_NAME__': JSON.stringify(packageJson.name),
      '__REACT_VERSION__': JSON.stringify(packageJson.dependencies.react)
    })
  ]
};

步骤2：你的包中读取全局变量 #

// 你的包代码
export function getProjectConfig() {
  return {
    projectName: __PROJECT_NAME__,
    reactVersion: __REACT_VERSION__
  };
}

方案三：约定使用方导出配置文件 #

让使用方在项目根目录创建一个比如my-package-config.js的文件，导出需要的配置（可以从package.json中读取），你的包直接导入这个文件。

使用方项目的配置文件： #

// my-package-config.js
import packageJson from './package.json';

export default {
  projectName: packageJson.name,
  reactVersion: packageJson.dependencies.react
};

你的包中导入配置： #

// 你的包代码
// 注意：需要使用方确保这个文件路径能被webpack解析，或者让他们配置alias
import projectConfig from '../../my-package-config.js';

export function initMyPackage() {
  console.log('项目配置:', projectConfig);
}

内容的提问来源于stack exchange，提问作者samet yılmaz