javascript - 如何在 Rollup.js 中进行缓存清除？

Question

在 my project , 我需要做 cache busting ，因为在新部署之后，浏览器通常只重新加载 HTML 而不是 JS 和 CSS 文件。
目前，我没有以任何方式构建 HTML，它只是已经位于公共(public)目录中。
最简单的方法似乎是在 JS 引用中添加时间戳:

<script type="module" src="bundle/index.js?ts=20201026-102300"></script>

现在，在已经使用 rollup.js 的项目中实现此目标的最佳方法是什么？ ?
我看过 @rollup/plugin-html ，但我对其文档中的示例感到困惑，因为它需要一个 JS 文件作为输入:

 input: 'src/index.js',

那应该是什么JS文件？
相反，我希望需要定义

输入 HTML 文件

一些代码空间来设置时间戳变量

输出 HTML 文件

那么最好的方法是什么， @rollup/plugin-html还是用另一种方法？

Answer 1

我自己来这里寻找这个问题的答案，过了一会儿，我做了一些正则表达式的摆弄，我让它工作了。
注意:此解决方案会在您每次构建 HTML 文件时对其进行编辑。没有输入(模板)HTML 和输出 HTML。

安装 rollup-plugin-replace-html-vars

npm install rollup-plugin-replace-html-vars --save-dev

将此配置添加到您的rollup.config.js文件

// rollup.config.js
// ...
plugins: [
    replaceHtmlVars({
        files: '**/index.html',
        from: /\.\/\w+\/\w+\.\w+.\w+\?v=\d+/g,
        to: './dist/app.min.js?v=' + Date.now(),
    }),
]

在您的 index.html , 将此引用添加到 app.js :

<script type="module" src="./dist/app.min.js?v=1630086943272"></script>

每次运行时，运行汇总和 index.html 中对 app.js 的引用都会有构建时间的时间戳。

奖金:
如果您没有 .min在您的文件名中，请改用此正则表达式:

/\.\/\w+\/\w+\.\w+\?v=\d+/g

全面披露;我不是正则表达式向导，只是设法一起破解了这个。我敢打赌这里有人会有更好的捕捉方式 ./dist/app.min.js?v=1630086943272使用正则表达式，但这适用于我的解决方案。