前端工程注入版本号

文章目录

  • 一、前言
  • 二、`webpack`
  • 三、`vite`
  • 四、最后

一、前言

容器化时代,当页面出现问题时,如果你的新版本有可能已经修复了,那样你再排查它就没有意义了。为什么不一定是最新版本呢?一是可能是缓存作祟,二是可能运维成员由于某种原因回退了版本。

怎么确认问题发生在哪个版本呢?这就需要我们往页面注入版本号。

通常这一步,是在打包构建时,将package.json中的version字段注入到html上(所以要求每次发布版本,都修改对应的version,最好使用npm version命令操作)。我比较推荐在head中添加一个meta,当然你也可以将它打印出来。

二、webpack

React的脚手架搭建出来的工程为例,核心是html-webpack-plugin这个插件。

使用npm run eject之后,修改config/webpack.config.js文件,添加一句:

// 放在const paths = require("./paths");之后。这句就是读取了package.json文件
const appPackageJson = require(paths.appPackageJson);

搜索HtmlWebpackPlugin,找到这段代码:

 plugins: [
      // Generates an `index.html` file with the 
                    
                    

你可能感兴趣的:(工程化,前端,版本号)