Search code examples
svelterollup

Do the order of rollup plugins matter?


Playing around with rollup and Svelte it seems like changing the order of plugins inside of rollup.config.js makes no difference.

plugins: [
    svelte({
        preprocess: sveltePreprocess(),
        compilerOptions: {
            // enable run-time checks when not in production
            dev: !production
        }
    }),
    // we'll extract any component CSS out into
    // a separate file - better for performance
    css({ output: 'bundle.css' }),

    // If you have external dependencies installed from
    // npm, you'll most likely need these plugins. In
    // some cases you'll need additional configuration -
    // consult the documentation for details:
    // https://github.com/rollup/plugins/tree/master/packages/commonjs
    resolve({
        browser: true,
        dedupe: ['svelte']
    }),
    commonjs(),
    typescript({
        sourceMap: !production,
        inlineSources: !production
    }),
    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()
],

Is it always the case that the order is irrelevant? Do the plugins actually run in sequence or not?


Solution

  • Yes, the order matters.

    Plugins can use several hooks, as explained in Rollup's docs. Some hooks are run in parallel but others, like the transform hook notably, are run in sequence, and the hooks are passed the result of the previous one.

    For example, if you put a plugin that transforms JS before the Svelte plugin, it won't work.