DevTools 中显示 Vue 打包版本和时间**

2024-02-01 06:10:16

随着私有化部署项目的增多，每个用户的代码版本不一致的问题日益凸显。在排查 bug 时，如果没有明确的版本信息，很容易无的放矢。为了解决这一问题，我们可以通过将项目构建的时间以及版本号放入 DevTools 中，方便参考对照。

实现原理

要在 DevTools 中显示打包版本和时间，我们需要使用 webpack 插件。该插件会在构建过程中收集必要的信息，并将其添加到 webpack 编译结果中。在浏览器加载项目后，插件会从编译结果中提取信息，并将其显示在 DevTools 的“版本”选项卡中。

webpack 插件代码

class BuildInfoPlugin {
  apply(compiler) {
    // 在 webpack 编译完成后触发
    compiler.hooks.done.tap('BuildInfoPlugin', (stats) => {
      // 获取打包版本和时间
      const version = stats.compilation.version;
      const timestamp = new Date().toLocaleString();

      // 将信息添加到 webpack 编译结果中
      stats.compilation.assets['build-info.json'] = {
        source: JSON.stringify({
          version,
          timestamp,
        }),
        size: 0,
      };
    });
  }
}

使用插件

要使用该插件，请将其添加到 webpack 配置文件中：

const BuildInfoPlugin = require('build-info-webpack-plugin');

module.exports = {
  // ...其他 webpack 配置
  plugins: [
    new BuildInfoPlugin(),
  ],
};

DevTools 集成

接下来，我们需要创建一个 DevTools 扩展程序，以从 webpack 编译结果中提取信息并将其显示在 DevTools 中。

DevTools 扩展程序代码

// ...扩展程序代码

// 在 DevTools 加载后触发
chrome.devtools.network.onNavigated.addListener(() => {
  // 从 webpack 编译结果中获取信息
  fetch('build-info.json')
    .then((response) => response.json())
    .then((data) => {
      // 将信息显示在 DevTools 中
      chrome.devtools.panels.create('版本', '版本', 'build-info.html');
      chrome.devtools.panels.elements.onShown.addListener(() => {
        document.getElementById('version').innerHTML = data.version;
        document.getElementById('timestamp').innerHTML = data.timestamp;
      });
    });
});