如何阻止React Webpack打包时引入package.json脚本并安全获取版本

嘿，这个问题我之前踩过坑！直接导入整个package.json确实会导致所有内容（包括你不想暴露的脚本、依赖信息）被打包到最终的JS文件里，太不安全了。给你几个实用的解决方案，按需选就行：

1. 用环境变量注入版本号 #

这是最常用的方案，通过打包工具把版本号注入到环境变量中，代码里直接用变量即可，不会引入整个package.json。

举几个主流工具的配置例子：

• Webpack：在webpack配置文件中使用DefinePlugin：

  const packageJson = require('./package.json');
  module.exports = {
    // 其他配置项
    plugins: [
      new webpack.DefinePlugin({
        'process.env.APP_VERSION': JSON.stringify(packageJson.version)
      })
    ]
  };
  

  之后在代码里直接调用process.env.APP_VERSION就能拿到版本号。

• Vite：在vite.config.js中通过define配置注入：

  import { defineConfig } from 'vite';
  import packageJson from './package.json';
  
  export default defineConfig({
    define: {
      '__APP_VERSION__': JSON.stringify(packageJson.version)
    }
  });
  

  代码里用__APP_VERSION__即可获取版本。

• Create React App：在打包脚本中直接设置环境变量：
  修改package.json的scripts：

  "scripts": {
    "build": "REACT_APP_VERSION=$(node -p require('./package.json').version) react-scripts build"
  }
  

  代码里通过process.env.REACT_APP_VERSION访问版本号。

2. 单独提取版本到专用文件 #

创建一个只存版本号的小文件，避免引入整个package.json。

• 先新建src/version.js：

  export const APP_VERSION = '1.0.0';
  

• 在需要的地方导入：import { APP_VERSION } from './version.js';

怕手动同步麻烦？可以写个简单的Node脚本自动同步：

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

fs.writeFileSync(
  '../src/version.js',
  `export const APP_VERSION = '${packageJson.version}';\n`
);

然后在package.json的scripts里加一个预打包命令，每次打包前自动更新版本：

"scripts": {
  "prebuild": "node scripts/sync-version.js",
  "build": "你的打包命令"
}

3. 为什么直接导入package.json会暴露所有内容？ #

模块打包器（比如Webpack、Vite）默认会把你导入的整个文件内容打包进最终产物。因为package.json是JSON格式，无法被tree-shaking优化，所以所有字段都会被包含进去，包括你不想公开的scripts、dependencies等信息。

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