网站建设教程参加苏州久远网络,创意视差wordpress主题,免费wordpress XIU主题,wordpress4.6 nodejs文章目录 一、前言二、webpack三、vite四、最后 一、前言
容器化时代#xff0c;当页面出现问题时#xff0c;如果你的新版本有可能已经修复了#xff0c;那样你再排查它就没有意义了。为什么不一定是最新版本呢#xff1f;一是可能是缓存作祟#xff0c;二是可能运维成员… 文章目录 一、前言二、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 script injected.new HtmlWebpackPlugin(Object.assign({},{inject: true,template: paths.appHtml,},...))]修改Object.assign的第一个参数
Object.assign({meta: {version: appPackageJson.version,},},{inject: true,template: paths.appHtml,},)这样页面的head中就有了版本号 不使用eject当然也是可以的有脚手架提供的钩子函数原理一样都是修改这里就不赘述了。
三、vite
对于vite项目可以使用vite-plugin-html-template插件。在vite.config.ts中添加以下代码
import htmlTemplate from vite-plugin-html-template
import { version } from ./package.json;// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), htmlTemplate({data: {version},}),],...
})因为引用了json文件需要修改默认的tsconfig.config.json在include中添加package.json
{include: [xxx, package.json],
}将index.html移动到public目录下在head中添加一句
headmeta version%- version % /...
/head原来body中的script要去掉
bodydiv idapp/divscript typemodule src/src/main.ts/script
/body这样在页面上就能看到版本号了 四、最后
本人每篇文章都是一字一句码出来希望对大家有所帮助多提提意见。顺手来个三连击点赞收藏关注✨一起加油☕
