前端有什么发布打包自动加版本的工具吗？

This topic created in 1476 days ago, the information mentioned may be changed or developed.

不想麻烦运维（就是想前端自己试）

现在前后端分离打包后的结构是这样的

dist/
-- index.html (引用 js ,css)
-- js/*.js
-- css/*.css

我想达到的效果是

dist/
-- index.html (引用 v1.1.0/js , v1.1.0/css)
-- v1.1.0/
-----js/*.js
-----css/*.css

如果只是加个目录应该没什么问题，打包的时候资源文件 path 能设置。

这样每次 build 的时候版本号增加如 v1.1.1, v1.1.2 ....(增量更新 index.html 覆盖)

dist/
-- index.html (引用最新的 v1.1.2/js , v1.1.2/css)
-- v1.1.0
-- v1.1.1/
-- v1.1.2/
--- js
--- css

这个方案应该没问题吧，服务器 build 结束以后增量更新（可以先上传完 v1.1.2 资源文件后再上传 index.html 覆盖）

现在问题就是，怎么能让每次的版本能自动打上呢？(不想每次手动去改，也不一定非要固定的格式，能每次自增就行)

- 我想到了一个比较傻的方案，每次 build 的时候去远端 index.html 里拉现在是 xxx 版本，然后根据自己定的规则去 build 下一个版本号

CSS

v1.1.2

v1.1.0

build

20 replies • 2022-05-17 12:33:54 +08:00

tao1991123

May 7, 2022

jenkins + 自己写脚本

dreasky

May 7, 2022

npm version patch 可以自动+1 版本的写在脚本里在加 package.json build script 里面

passon

May 7, 2022

这种方式只能用于测试环境吧，生产环境缓存策略就失效了

shakaraka

PRO

May 7, 2022

这个是 ci 做的事吧？你自己不用管

dengqing

May 7, 2022

方案没问题，我们目前发布就是这样

index.html 丢在服务器交给 nginx 管理

所有静态资源丢到 oss ，目录就是 tag 名

我们发布正式环境都会打个 tag：release-v1.x.x 那么路径就是 release-v1.x.x ，交给 ci 跑就行

iqoo

May 7, 2022

一个小更新，所有老版本的资源缓存全部失效😁

dcsuibian

May 7, 2022

加这个版本具体是想干什么？我没看出这个的好处

i3x

May 7, 2022 via Android

@iqoo 这也是好处啊。就像 xxxx.css?ver=xxx 不就是为了防止使用错误的版本。

Envov

May 7, 2022

需要前端配合写一个脚本，npm run release
release 可以跟一个 --tag 的子选项，ci 工具接收到发布条件的时候，比如 git tag 的推送，把 tag 内容作为子选项的参数执行构建
例如我推送了 tag 为 1.0.1 的标签到 master ，触发了 ci 工具的更新，ci 工具执行的是 npm run release --tag 1.0.1 。
前端实现 release 的方法很多，最终目的都是把 tag 作为 webpack 的 publicPath 的前缀，以及修改导出资源的文件夹名称。

2I0Mto2kjm0c0B9i

May 7, 2022

我用 Google zx 专门写了个版本修改的功能，就是在你 prod build 之前检查下当前版本号，然后自动生成一个版本号或者在命令行输入一个新版本号，后续 index.html 引入新版本号的静态文件

Biwood

May 7, 2022 via Android

脚本不就是干这个的吗，写 shell 或 python 或 nodejs 脚本都能做到，语法不同思路一样：从 package.json 读一下最新 tag ，根据 tag 新建文件夹，把 dist 文件复制过去，完事。

serge001

May 7, 2022

有了解过 webpack 的 hash 配置么？先了解下你的需求是不是可以通过 hash 解决

Pastsong

May 7, 2022

用 cdn 加协商缓存，发布新版本 bust cdn cache 就行

dcsuibian

May 7, 2022

@i3x 可是跟 #12 说的一样，缓存问题感觉通过分块 hash 码变更才是更好的方式。这样分块内容改了就变，不改就不变。感觉比版本号更好。

learningman

May 7, 2022

@i3x 你有 10m 的 js 文件，然而你只改了个 config.js

iqoo

May 7, 2022

@i3x 绝大部分缓存的数据都是没问题的，为了更新一个有问题的文件清空所有缓存，显然极不合理。

wangkun025

May 7, 2022

运维：赏口饭吃吧。

Buges

May 8, 2022 via Android

为啥 js 和 css 加版本，而 index.html 就要覆盖？
整个构建输出目录加版本不行吗？

linkopeneyes

May 11, 2022

试试 semantic-release ？

susumail

May 17, 2022

用时间戳做版本号即可
build.sh：
export currentTime=$(date "+%Y%m%d%H%M%S");

mkdir output/webroot/
cp -r dist/* output/webroot/$currentTime

再根据 process.env.currentTime 在 webpack.config 修改 publicPath