浅谈前端开发中的版本管理(前端版本管理工具)
off999 2024-11-05 10:56 39 浏览 0 评论
软件开发和发布过程中,版本是个极其重要的因素。大至操作系统,小到功能组件,都会涉及到版本相关的问题。
本文主要讨论了静态资源的版本管理,以及前端开发使用npm之后npm包管理的相关内容。
静态资源
浏览器缓存在减少资源请求、加快页面载入速度的同时,也给开发者带来新的问题:新发布的资源因为缓存问题而无法被成功载入。
在此情况下,轻会导致新的功能无法展示,重可能会因为资源不兼容导致页面报错、功能无法使用。为了解决这一类的问题,开发者往往会在静态资源信息中添加版本信息。
版本号的来源
每次发布都不一样的值即可作为版本号来源,所以版本号可以自定义并且手工维护,也可以是发布时的时间戳的md5的值,或是通过各类工具自动生成的值。
自定义版本号:自定义的版本号简洁明了,能够清楚地知道版本的信息,但是弊端在于,需要手工的去维护版本信息。
自动生成的版本号:将时间戳、动态hash等自动生成的信息作为版本号也是比较常见的方法。在打包脚本中配置好相关信息之后,不再需要额外的干预即可自动生成版本信息。
通过webpack打包静态资源文件属于比较常见的做法,webpack中的hash/chunkhash/contenthash实现的版本号即属于自动生成的版本信息,通过适当配置,能够实现每个文件都带有不同的版本信息。
其中hash在webpack编译时动态生成,所以如果通过hash去命名资源文件,所有生成的静态文件会共享同一个hash。chunkhash是根据chunk内容生成hash,所以chunkhash够实现不同文件不同hash的目标。然而contenthash,一般只用于ExtractTextPlugin中,如打包css文件并且添加contenthash等。
chunkhash打包js代码的问题在于,如果js文件中引用了css模块,每次css模块修改而js本身不做修改的情况下,js文件对应的chunkhash也会被修改,原因在于默认的chunkhash将引入的css代码也视为该chunk的一部分,不论是更新js代码还是css代码,都会导致chunkhash的更新。webpack打包时,可以尝试引入webpack-md5-hash解决chunkhash的问题。
版本信息的位置
对于静态资源来说,版本信息一般可以追加到路径、资源名称或者查询参数中。
资源路径:对于大部分的静态文件服务器来说,资源的URI往往可以映射到服务器上的特定磁盘路径。基于版本号的请求路径,可以在文件系统中创建以版本号命名的目录,并且拷贝静态资源到该目录中。
这样做带来的好处在于,每个版本都是单独的目录,版本间做到互不影响。弊端也显而易见:部分没有改变的静态资源也会因为路径名的变换而无法实现缓存。
资源名称:将版本信息添加到文件名上意味着打包过程中,需要重命名静态资源文件,但是不需要创建新的目录,所有的静态文件放在同一目录下。基于文件内容产生的hash作为文件名,能够做到内容不变的静态文件的请求URI也不会发生变化。
查询参数:jQuery disable cache之后,GET方式请求资源的时候会在路径中添加时间戳信息即属于这种。
将版本信息追加到查询参数中,与追加到资源名称中类似,不同的地方在于资源名称不会发生变化,可能会导致不同版本间的文件相互覆盖,所以需要在发布之前将当前已存在的资源做备份。
npm下的版本管理
npm在前端开发中使用的越来越多。
npm的版本管理是基于semver实现的,包的版本应该包含主版本号、次版本号和修订版本号。通过~, ^以及<、>等约定使用的版本范围。
不论是在npm2还是npm3中,同一个包的不同版本也能够被很好的兼容,不同版本的包会被安装到各自的路径之下,并且在require/import过程中调用特定版本的npm包。但其中也有一些例外,一些约定了peerDependencies的npm包,往往需要特定版本的兼容,并且这些版本是排他的,即出现其他版本时,npm install过程中会出现警告。
npm多层级的依赖关系可能会带来另外一个问题:只能将直接依赖的npm包写在package.json中,而无法约定这些依赖自身所依赖的包,也无法确定其中的版本信息。
为了固定整个依赖关系的版本信息,npm提供了npm shrinkwap的功能。npm shrinkwrap通过将完整的依赖版本信息输出到npm-shrinkwrap.json文件中。在此后的npm install过程中,npm会优先查找并且安装npm-shrinkwrap.json文件中的依赖内容。npm shrinkwrap应该项目起始阶段就应用到项目中,并且在新的依赖添加之后,不断更新。
本文作者:于心愿(点融黑帮),就职于点融网Social前端开发团队,在成为前端开发工程师之前,做过运维开发工程师。平时喜欢JavaScript、Python等,空暇时候喜欢打乒乓球。
本文由@点融黑帮(ID:DianrongMafia)原创发布于今日头条,未经许可,禁止转载。
相关推荐
- 安全教育登录入口平台(安全教育登录入口平台官网)
-
122交通安全教育怎么登录:122交通网的注册方法是首先登录网址http://www.122.cn/,接着打开网页后,点击右上角的“个人登录”;其次进入邮箱注册,然后进入到注册页面,输入相关信息即可完...
- 大鱼吃小鱼经典版(大鱼吃小鱼经典版(经典版)官方版)
-
大鱼吃小鱼小鱼吃虾是于谦跟郭麒麟的《我的棒儿呢?》郭德纲说于思洋郭麒麟作诗的相声,最后郭麒麟做了一首,师傅躺在师母身上大鱼吃小鱼小鱼吃虾虾吃水水落石出师傅压师娘师娘压床床压地地动山摇。...
-
- 哪个软件可以免费pdf转ppt(免费的pdf转ppt软件哪个好)
-
要想将ppt免费转换为pdf的话,我们建议大家可以下一个那个wps,如果你是会员的话,可以注册为会员,这样的话,在wps里面的话,就可以免费将ppt呢转换为pdfpdf之后呢,我们就可以直接使用,不需要去直接不需要去另外保存,为什么格式转...
-
2026-02-04 09:03 off999
- 电信宽带测速官网入口(电信宽带测速官网入口app)
-
这个网站看看http://www.swok.cn/pcindex.jsp1.登录中国电信网上营业厅,宽带光纤,贴心服务,宽带测速2.下载第三方软件,如360等。进行在线测速进行宽带测速时,尽...
- 植物大战僵尸95版手机下载(植物大战僵尸95 版下载)
-
1可以在应用商店或者游戏平台上下载植物大战僵尸95版手机游戏。2下载教程:打开应用商店或者游戏平台,搜索“植物大战僵尸95版”,找到游戏后点击下载按钮,等待下载完成即可安装并开始游戏。3注意:确...
- 免费下载ppt成品的网站(ppt成品免费下载的网站有哪些)
-
1、Chuangkit(chuangkit.com)直达地址:chuangkit.com2、Woodo幻灯片(woodo.cn)直达链接:woodo.cn3、OfficePlus(officeplu...
- 2025世界杯赛程表(2025世界杯在哪个国家)
-
2022年卡塔尔世界杯赛程公布,全部比赛在卡塔尔境内8座球场举行,2022年,决赛阶段球队全部确定。揭幕战于当地时间11月20日19时进行,由东道主卡塔尔对阵厄瓜多尔,决赛于当地时间12月18日...
- 下载搜狐视频电视剧(搜狐电视剧下载安装)
-
搜狐视频APP下载好的视频想要导出到手机相册里方法如下1、打开手机搜狐视频软件,进入搜狐视频后我们点击右上角的“查找”,找到自已喜欢的视频。2、在“浏览器页面搜索”窗口中,输入要下载的视频的名称,然后...
- 永久免费听歌网站(丫丫音乐网)
-
可以到《我爱音乐网》《好听音乐网》《一听音乐网》《YYMP3音乐网》还可以到《九天音乐网》永久免费听歌软件有酷狗音乐和天猫精灵,以前要跳舞经常要下载舞曲,我从QQ上找不到舞曲下载就从酷狗音乐上找,大多...
- 音乐格式转换mp3软件(音乐格式转换器免费版)
-
有两种方法:方法一在手机上操作:1、进入手机中的文件管理。2、在其中选择“音乐”,将显示出手机中的全部音乐。3、点击“全选”,选中所有音乐文件。4、点击屏幕右下方的省略号图标,在弹出菜单中选择“...
- 电子书txt下载(免费的最全的小说阅读器)
-
1.Z-library里面收录了近千万本电子书籍,需求量大。2.苦瓜书盘没有广告,不需要账号注册,使用起来非常简单,直接搜索预览下载即可。3.鸠摩搜书整体风格简洁清晰,书籍资源丰富。4.亚马逊图书书籍...
- 最好免费观看高清电影(播放免费的最好看的电影)
-
在目前的网上选择中,IMDb(互联网电影数据库)被认为是最全的电影网站之一。这个网站提供了各种类型的电影和电视节目的海量信息,包括剧情介绍、演员表、评价、评论等。其还提供了有关电影制作背后的详细信息,...
- 孤单枪手2简体中文版(孤单枪手2简体中文版官方下载)
-
要将《孤胆枪手2》游戏的征兵秘籍切换为中文,您可以按照以下步骤进行操作:首先,打开游戏设置选项,通常可以在游戏主菜单或游戏内部找到。然后,寻找语言选项或界面选项,点击进入。在语言选项中,选择中文作为游...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (77)
- python封装 (57)
- python写入txt (66)
- python读取文件夹下所有文件 (59)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)
