如何在前端项目打包发布后，查询到打包时候node_modules中的某个依赖包安装的版本号

在前端项目打包发布后，如果需要查询某个依赖包在打包时安装的版本号，可以通过以下几种方式实现。这些方法可以帮助你在发布后的环境中追溯依赖的版本信息。

---

方法 1: 在打包时将依赖版本写入到构建产物中

你可以在打包过程中动态获取依赖包的版本号，并将其嵌入到构建产物（如HTML、JavaScript文件）中。以下是具体实现步骤：

实现步骤：

1. 使用 package.json 文件读取依赖版本：
   在打包脚本中，通过 Node.js 的 require 或 fs 模块读取 package.json 中的依赖版本。

2. 将版本信息注入到代码中：
   将版本信息注入到全局变量或静态文件中，以便在运行时访问。

示例代码：

假设你使用的是 Webpack 打包工具，可以添加一个插件来实现：

// webpack.config.js
const fs = require('fs');
const path = require('path');

module.exports = {
  // 其他配置...
  plugins: [
    new (class InjectDependencyVersionsPlugin {
      apply(compiler) {
        compiler.hooks.emit.tapAsync('InjectDependencyVersionsPlugin', (compilation, callback) => {
          // 读取 package.json 文件
          const packageJsonPath = path.resolve(__dirname, 'package.json');
          const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));

          // 获取某个依赖的版本号
          const someDependencyVersion = packageJson.dependencies['some-dependency'];

          // 将版本信息注入到全局变量
          const versionFileContent = `
            window.__BUILD_INFO__ = {
              dependencies: {
                'some-dependency': '${someDependencyVersion}'
              }
            };
          `;

          // 添加到输出文件中
          compilation.assets['build-info.js'] = {
            source: () => versionFileContent,
            size: () => versionFileContent.length
          };

          callback();
        });
      }
    })()
  ]
};

使用方式：

在运行时，你可以通过 window.__BUILD_INFO__.dependencies['some-dependency'] 获取依赖版本。

---

方法 2: 在构建产物中包含 package-lock.json 或 yarn.lock

如果你希望保留完整的依赖版本信息，可以直接将 package-lock.json 或 yarn.lock 文件包含在构建产物中。

实现步骤：

1. 将锁文件复制到构建目录：
   在打包脚本中，将 package-lock.json 或 yarn.lock 文件复制到输出目录中。

2. 运行时解析锁文件：
   在运行时加载并解析锁文件内容，提取所需依赖的版本号。

示例代码：

// webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'package-lock.json', to: 'package-lock.json' } // 或者 yarn.lock
      ]
    })
  ]
};

使用方式：

在运行时，可以通过 fetch 或其他方式加载 package-lock.json 文件，并解析其中的依赖版本信息。

---

方法 3: 使用环境变量注入版本信息

在打包时，将依赖版本号作为环境变量注入到构建产物中。

实现步骤：

1. 在打包脚本中设置环境变量：
   使用 Node.js 脚本或 CI/CD 工具，在打包前读取依赖版本并设置为环境变量。

2. 在代码中使用环境变量：
   在代码中通过 process.env 或其他方式访问环境变量。

示例代码：

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

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.SOME_DEPENDENCY_VERSION': JSON.stringify(packageJson.dependencies['some-dependency'])
    })
  ]
};

使用方式：

在代码中可以通过 process.env.SOME_DEPENDENCY_VERSION 访问依赖版本号。

---

方法 4: 在构建日志中记录版本信息

在打包过程中，直接将依赖版本信息打印到构建日志中，并保存为构建元数据。

实现步骤：

1. 在打包脚本中打印依赖版本：
   在打包脚本中读取 package.json 并打印依赖版本。

2. 保存构建日志：
   将构建日志保存到文件或 CI/CD 系统中，供后续查询。

示例代码：

# 在 package.json 的 scripts 中添加命令
"scripts": {
  "build": "node print-deps-version.js && webpack"
}

// print-deps-version.js
const packageJson = require('./package.json');

console.log('Dependencies:');
Object.entries(packageJson.dependencies).forEach(([name, version]) => {
  console.log(`${name}: ${version}`);
});

使用方式：

构建时会打印所有依赖的版本号，方便后续追溯。

---

方法 5: 使用第三方工具生成构建报告

一些工具（如 webpack-bundle-analyzer 或 npm ls）可以帮助分析和记录依赖版本信息。

示例：使用 npm ls

在打包时运行以下命令，生成依赖树并保存到文件中：

npm ls --json > dependencies.json

在发布后，可以通过查看 dependencies.json 文件获取依赖版本信息。

---

总结

以上方法各有优缺点，选择适合你的场景即可：

• 如果需要在运行时访问版本信息，推荐 方法 1 或 方法 3。
• 如果需要完整记录依赖信息，推荐 方法 2 或 方法 5。
• 如果只是单纯记录版本信息供后续追溯，推荐 方法 4。

根据实际需求选择合适的方式，并确保在生产环境中不要泄露敏感信息。