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?
Yes, Rollup is left to right, like a pipe, while Webpack is right from left, like compose.
Yes, the order matters: plugins are bound to the compiler and applied in the order specified.
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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With