如何在React前端无需Node.js获取package.json依赖版本并展示给用户

如果你不想手动维护版本号或编写单独的Node.js脚本，完全可以借助React项目常用构建工具的内置能力，自动把package.json中的版本信息（或指定内容）转为前端可访问的全局变量或静态资源。

方法1：Vite 全局变量注入 #

Vite支持通过define配置项直接将package.json内容注入为全局变量，无需额外脚本：

1. 在vite.config.js中添加配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

export default defineConfig({
  plugins: [react()],
  define: {
    // 仅注入版本号作为全局变量
    '__LIB_VERSION__': JSON.stringify(packageJson.version),
    // 按需注入整个package.json（注意过滤敏感字段）
    '__LIB_PACKAGE__': JSON.stringify(packageJson)
  }
});

2. 在React组件中直接使用：

function VersionBanner() {
  return (
    <div className="version-info">
      当前库版本：{__LIB_VERSION__}
    </div>
  );
}

方法2：Create React App 环境变量自动注入 #

Create React App（CRA）支持通过环境变量自动读取package.json字段，无需手动处理：

1. 在项目根目录的.env（或.env.production）文件中添加：

REACT_APP_LIB_VERSION=$npm_package_version

CRA会自动识别$npm_package_version，将其替换为package.json中的version值。

2. 在组件中直接调用环境变量：

function VersionDisplay() {
  return (
    <span>版本：{process.env.REACT_APP_LIB_VERSION}</span>
  );
}

方法3：生成静态JSON文件（纯前端可访问） #

如果希望完全通过静态资源访问（无需全局变量注入），可以让构建工具自动生成包含版本信息的静态JSON文件：

以Vite为例，借助rollup-plugin-copy插件实现：

1. 安装插件：

npm install rollup-plugin-copy --save-dev

2. 在vite.config.js中配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import copy from 'rollup-plugin-copy';
import fs from 'fs';

// 提取需要的字段，避免暴露敏感信息
const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
const versionData = JSON.stringify({ version: packageJson.version });

// 提前生成version.json文件
fs.writeFileSync('./version.json', versionData);

export default defineConfig({
  plugins: [
    react(),
    copy({
      targets: [
        { src: 'version.json', dest: 'dist' } // 构建时复制到输出目录
      ]
    })
  ]
});

3. 在React组件中通过fetch读取：

import { useState, useEffect } from 'react';

function VersionBanner() {
  const [version, setVersion] = useState('加载中...');

  useEffect(() => {
    fetch('/version.json')
      .then(res => res.json())
      .then(data => setVersion(data.version))
      .catch(() => setVersion('未知'));
  }, []);

  return <div>库版本：{version}</div>;
}

这些方案都不需要你手动编写独立的Node.js脚本，而是利用构建工具的原生能力自动完成package.json到前端可访问资源的转换。

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