使用 Rollup 哈希文件名

Question

我对捆绑程序相当陌生，尤其是

rollup

。在构建生产时有条件地散列

rollup.config.js

中的文件名，同时保存

index.html

以引用新的

.css

和

.js

散列版本的最佳方法是什么？

我在docs中看到了这一点，但我想我不知道如何根据

dev/prod

设置有条件地设置这些选项？

output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
       // entryFileNames : 'bundle[hash].js
    },

或者使用

rollup-plugin-hash

是更好的解决方案吗？ 仍然不确定更新

index.html

的最佳实践是什么 （清单文件选项提供什么？）

Answer 1

您可以使用像 @rollup/plugin-html 这样的插件来生成引用哈希文件名的 html 文件。

还可以使用 rollup-plugin-manifest 生成包含这些哈希文件名的 JSON 文件。
当您由于某种原因无法使用汇总生成 HTML 时，这非常有用。

由于 Rollup 配置文件只是 Javascript，因此您可以包含一些 if 语句，根据 dev/prod 设置返回不同的结果。

const isProduction = process.env.NODE_ENV === 'production';

export default {
  output: {
    sourcemap: true,
    format: 'iife',
    name: 'app',
    entryFileNames: isProduction ? 'bundle[hash].js' : 'public/build/bundle.js',
    dir: './',
  }
};

参见 output.entryFileNames