近日在做的一个全静态项目,没有任何服务器逻辑,所以版本号策略也采用了纯前端的解决方案.
说实在话,其实都是被逼的,我只要修改一下服务器配置加简单的逻辑判断就可以了,但是后端工程师懒的搞,觉着巨复杂.
说到版本号,其实涉及到版本号有三个问题要考虑:版本发布问题 缓存和版本回滚问题 切换开发和维护环境的问题
其实方案很简单,类似于svn的版本策略,也就是如果有任何文件修改的话,都会更新一个版本号
具体如下:
1 主html不缓存,加载资源的文件不缓存
2 涉及到版本号的资源加载放在单独的文件中
3 app内部的静态文件(js,css涉及到版本号策略),针对图片需要自己独立判断
说起来很复杂,但是用起来比较简单.这其中唯一用到的一个技术就是SSI(Server-Side Include).
具体分为下面2个步骤
第一步:修改加载资源的代码
示例如下:
index.html
1 <!DOCTYPE HTML> 2 <html lang=”en”> 3 <head> 4 <meta charset=”UTF-8″> 5 <title>test</title> 6 </head> 7 <body> 8 <!–#include file=”loadStaticFiles.inc” –> 9 </body> 10 </html>
loadStaticFiles.inc
1 <script type=”text/javascript”> 2 var __version = “_dev”; 3 var loadStaticFilesStr = [ '<script src="'+__version+'/js/ga.js" type="text/javascript"></script>','<script src="'+__version+'/js/test.js" type="text/javascript"></script>','<!-- version:'+__version+' -->'].join(“”); 4 5 document.write(loadStaticFilesStr); 6 </script>
也就是说在版本控制下的文件全部在一个__version名字的文件夹下
每次修改的时候都会有一个新的文件夹建立,之前的那个文件夹就可以删除掉了
第二步: 开启服务器的ssi
如果按照上面的做了,你会发现,没有达到你想要的效果.include的代码直接作为注释了.
所以这一步就是要让服务器支持SSI
nginx的开启方式非常简单:
1 location / { 2 autoindex on; 3 ssi on; 4 root F:/workspace/; 5 index index.html index.htm; 6 }
样就保证你的include能被服务器返回,如果报路径错误,调整路径就可以了
OK,到这,基本的版本控制就解决了
你在本地开发的时候,修改本地的__version变量就可以,发布的时候也是修改此变量
我的目录结构
还需要额外注意的问题:
1 客户端缓存问题.这个不需要担心,和你之前的缓存策略保持一致
2 安全问题,需要禁用执行程序权限