rollupjs - Rollup JS 使用 rollup-plugin-modify 插件构建不替换构建文件中的所有字符串实例（使用 'replace-in-file' 插件代替）

Question

我想在 Svelte 应用程序中解决文件缓存更新问题，并且想要汇总构建的这一部分。我决定向分布式构建脚本中的文件引用（例如'index.html?v=0.1'）添加一个查询字符串参数。我在 rollup.config.js 脚本中创建了一个常量“ __cVersion__”并尝试使用“rollup-plugin-modify”，但这仅更新了我的 main.js 和 App.svelte 代码（正在编译的文件）。我还尝试了具有相同结果的“@rollup/plugin-replace”插件。我需要我也从 src 复制（而不是构建）到 public 的文件，以便__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
    }
};

标签： rollupjs

Answer 1

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

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