Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do the order of rollup plugins matter?

Tags:

rollup

svelte

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?

like image 288
Will Taylor Avatar asked Dec 15 '20 17:12

Will Taylor


People also ask

Does rollup plugin order matter?

Yes, Rollup is left to right, like a pipe, while Webpack is right from left, like compose.

Does order of Webpack plugins matter?

Yes, the order matters: plugins are bound to the compiler and applied in the order specified.

Does rollup use Esbuild?

Esbuild is still used for transpilation and minification in Vite during build, but bundling is left to Rollup. So esbuild is used for part of the build process. Beta Was this translation helpful?

What is a rollup plugin?

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.


1 Answers

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.

like image 178
rixo Avatar answered Oct 21 '22 22:10

rixo