V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
firhome
V2EX  ›  前端开发

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

  •  
  •   firhome · 56 天前 · 1594 次点击
    这是一个创建于 56 天前的主题,其中的信息可能已经有所发展或是发生改变。
    不想麻烦运维(就是想前端自己试)


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

    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 下一个版本号
    20 条回复    2022-05-17 12:33:54 +08:00
    tao1991123
        1
    tao1991123  
       56 天前
    jenkins + 自己写脚本
    dreasky
        2
    dreasky  
       56 天前
    npm version patch 可以自动+1 版本的 写在脚本里 在加 package.json build script 里面
    passon
        3
    passon  
       56 天前
    这种方式只能用于测试环境吧,生产环境缓存策略就失效了
    wunonglin
        4
    wunonglin  
       56 天前
    这个是 ci 做的事吧?你自己不用管
    dengqing
        5
    dengqing  
       56 天前
    方案没问题,我们目前发布就是这样

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

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

    我们发布正式环境都会打个 tag:release-v1.x.x 那么路径就是 release-v1.x.x ,交给 ci 跑就行
    iqoo
        6
    iqoo  
       56 天前
    一个小更新,所有老版本的资源缓存全部失效😁
    dcsuibian
        7
    dcsuibian  
       56 天前
    加这个版本具体是想干什么?我没看出这个的好处
    i3x
        8
    i3x  
       56 天前 via Android
    @iqoo 这也是好处啊。就像 xxxx.css?ver=xxx 不就是为了防止使用错误的版本。
    Envov
        9
    Envov  
       56 天前
    需要前端配合写一个脚本,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 的前缀,以及修改导出资源的文件夹名称。
    iapplebear
        10
    iapplebear  
       56 天前
    我用 Google zx 专门写了个版本修改的功能,就是在你 prod build 之前检查下当前版本号,然后自动生成一个版本号或者在命令行输入一个新版本号,后续 index.html 引入新版本号的静态文件
    Biwood
        11
    Biwood  
       55 天前 via Android
    脚本不就是干这个的吗,写 shell 或 python 或 nodejs 脚本都能做到,语法不同思路一样:从 package.json 读一下最新 tag ,根据 tag 新建文件夹,把 dist 文件复制过去,完事。
    serge001
        12
    serge001  
       55 天前
    有了解过 webpack 的 hash 配置么?先了解下你的需求是不是可以通过 hash 解决
    Pastsong
        13
    Pastsong  
       55 天前
    用 cdn 加协商缓存,发布新版本 bust cdn cache 就行
    dcsuibian
        14
    dcsuibian  
       55 天前
    @i3x 可是跟 #12 说的一样,缓存问题感觉通过分块 hash 码变更才是更好的方式。这样分块内容改了就变,不改就不变。感觉比版本号更好。
    learningman
        15
    learningman  
       55 天前
    @i3x 你有 10m 的 js 文件,然而你只改了个 config.js
    iqoo
        16
    iqoo  
       55 天前
    @i3x 绝大部分缓存的数据都是没问题的,为了更新一个有问题的文件清空所有缓存,显然极不合理。
    wangkun025
        17
    wangkun025  
       55 天前
    运维:赏口饭吃吧。
    Buges
        18
    Buges  
       55 天前 via Android
    为啥 js 和 css 加版本,而 index.html 就要覆盖?
    整个构建输出目录加版本不行吗?
    sjhhjx0122
        19
    sjhhjx0122  
       52 天前
    试试 semantic-release ?
    susumail
        20
    susumail  
       46 天前
    用时间戳做版本号即可
    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
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2535 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 08:13 · PVG 16:13 · LAX 01:13 · JFK 04:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.