Question

我想在Svelte应用程序中处理文件缓存更新，并希望在汇总构建的这一部分。我决定在分布式构建脚本中向文件引用（例如'index.html？v = 0.1'）添加一个querystring参数。我在rollup.config.js脚本中创建了一个常量“ __cVersion__”，并尝试使用“ rollup-plugin-modify”，但这仅更新了main.js和App.svelte代码（正在编译的文件））。我还尝试了“ @ rollup / plugin-replace”插件，结果相同。我需要将要从src复制（而非构建）的文件也复制到公共文件，以便还可以在脚本中替换“ __cVersion__”的实例。

以下是我最初的rollup.config.js导出功能（无效的字符串替换）：

export default {
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [

        // this only seems to work on the main.js and .svelte files
        modify({ 
            '__cVersion__': 'c0.1.19'
         }),

        svelte({
            dev: !production,
            css: css => {
                css.write('public/build/bundle.css');
            }
        }),

        copy({
            targets: [{ 
                src: 'src/bs4.4.1.css', 
                dest: 'public/' 
            },
            { 
                src: 'src/sw.js',
                dest: 'public/' 
            },
            { 
                src: 'src/index.html',
                dest: 'public/' 
            },
            { 
                src: 'src/manifest.json', 
                dest: 'public/' 
            },
            { 
                src: 'src/images/*', 
                dest: 'public/images/'
            }
            ]
        }),

        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        // cache files
        workbox({
            mode: 'injectManifest',
            options: {
                swSrc: 'src/sw.js',
                swDest: 'public/sw.js',
                globDirectory: 'public',
                globPatterns: [
                '**/*.{html,json,js,css,png,map}',
                './manifest.json',
                './images/**',
                './bs4.4.1.css',
                './index.html'
                ]
            }
            }),

        !production && serve(),
        !production && livereload('public'),
        production && terser()

    ],
    watch: {
        clearScreen: false
    }
};

Answer 1

我决定采用另一种方法，因为我意识到在尝试替换文件中的“ __cVersion__”之前需要完成构建过程。经过一番反复尝试后，我决定使用以下代码： https://github.com/kuhlaid/svelte2/releases/tag/v0.1.7

如果您在源代码中搜索“ __cVersion__”，则会看到我在何处添加文件修订字符串以尝试强制文件缓存更新...但是，这并不能完全解决问题。

然后，我查看了服务工作者（sw.js），并意识到Workbox'injectManifest'实际上正在处理文件修订。当前设置的唯一问题是我在脚本中添加了“ __cVersion__”常量，但是Workbox从未看到替换内容，因为在替换常量之前，Workbox处理了Service Worker。

我可能需要做的是将src文件复制到“登台目录”，在这里我可以替换脚本中的“ cache”常量，然后从登台文件运行构建汇总。这“应”使Workbox将文件视为已更新，从而在服务工作者文件中为其分配不同的修订号。解决该问题后，我将尝试更新此线程。

Answer 2

默认情况下，rollup-plugin-copy 插件将在 rollup 的 buildEnd 挂钩上触发。
将钩子设置为 writeBundle 为我解决了这个问题，如下所示：

copy({
  targets: [
    { 
      src: ..., 
      dest: ... 
    },
    ...
  ],
  hook: "writeBundle",
}),

使用rollup-plugin-modify插件进行汇总JS生成，而不替换生成文件中的所有字符串实例（改为使用“替换文件”插件）

2 个答案: