如何在ES Modules中安全暴露package.json的应用版本？

1. 安全仅导出版本信息的方法 #

你考虑的单独文件导出版本的方式是有效的，能避免暴露package.json的其他内容。原因是Next.js（基于webpack）的tree-shaking机制会自动剔除未被使用的代码，当你只导入appVersion时，打包后的产物里不会包含package.json的其他字段（比如依赖列表、脚本等）。

具体实现代码如下：

// utils/appVersion.ts
import packageJson from "../package.json" assert { type: "json" };
export const appVersion = packageJson.version;

然后在全局上下文文件中导入使用：

// hooks/global-context.tsx
import { appVersion } from "../utils/appVersion";

if (environment !== 'production') {
  console.log(`Version: ${appVersion} - Environment: ${environment}`);
}

如果想更彻底地隔离package.json的内容，可以用构建前脚本生成版本文件的方式：

1. 在项目根目录添加prebuild脚本（可选择用jq工具或Node.js脚本实现）：

   // package.json
   {
     "scripts": {
       "prebuild": "echo 'export const appVersion = \"'$(jq -r .version package.json)'\";' > utils/appVersion.ts",
       "build": "next build"
     }
   }
   

2. 执行npm run build时，prebuild会自动生成只包含版本的appVersion.ts文件，内容类似：

   export const appVersion = "1.0.0";
   

这种方式完全避免了在客户端代码中导入整个package.json，彻底消除敏感信息暴露的风险。

2. 最佳实践与替代方案 #

方案一：工具文件单独导出版本（推荐） #

这是最简洁的方式，依赖Next.js的tree-shaking能力，既能满足需求又不会引入额外复杂度。只要确保你只导出和使用version字段，打包产物就不会包含package.json的其他内容。

方案二：构建时生成版本文件 #

适合对安全性要求极高的场景，完全隔离package.json与客户端代码，避免任何潜在的打包疏漏。如果不想用jq，可以用Node.js脚本实现：

// scripts/generate-version.js
const fs = require('fs');
const packageJson = require('../package.json');

const content = `export const appVersion = "${packageJson.version}";`;
fs.writeFileSync('./utils/appVersion.ts', content);

然后修改package.json的prebuild脚本：

"prebuild": "node scripts/generate-version.js"

方案三：利用Next.js的webpack配置注入版本 #

虽然你提到无法使用环境变量，但可以通过webpack的DefinePlugin直接注入版本到客户端代码：

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        APP_VERSION: JSON.stringify(packageJson.version),
      })
    );
    return config;
  },
};

module.exports = nextConfig;

然后在代码中直接使用：

if (environment !== 'production') {
  console.log(`Version: ${APP_VERSION} - Environment: ${environment}`);
}

这种方式通过webpack全局注入版本，无需导入任何文件，适合偏好无文件依赖实现的场景。

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