使用 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，您可以根据 dev/prod 设置包含一些 if statements that return different results。

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

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

使用 Rollup 的散列文件名

Hashed file names using Rollup

hash

rollupjs