7

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?

Will Taylor
  • 1,650
  • 9
  • 23

1 Answers1

6

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.

rixo
  • 23,815
  • 4
  • 63
  • 68
  • I'm assuming the order is from "top-to-bottom" in the `rollup.config.js` file, and not the reverse, like it is for webpack loaders. – pglezen Mar 07 '21 at 05:06
  • 1
    Yes, Rollup is left to right, like a pipe, while Webpack is right from left, like compose. – rixo Mar 07 '21 at 09:30