Let's be honest making plugins in Rollup can be exhausting, making plugins in Vite can be exhausting, but trying to develop a utility that supports both version, with same inputs expecting the same output is where the real adventure begins.
Here's a small analysis and comparison that can help thinking things through.
Rollup
First let's run this snippet,
export default {
input: 'src/index.js',
output: { dir: 'dist' },
plugins: [{
buildStart() { console.log('build started') },
transform(code, id) { console.log(`transforming ${id}`) },
buildEnd() { console.log('build ended') },
}]
}
If we run npx rollup -c
, here's the output
build started
transforming src/index.js
build ended
Nothing surprising, now if we run npx rollup -cw
(watch), we got
build started
transforming src/index.js
build ended
Same output but now it's waiting for changes. What happens if we change index.js
? Then the output will be the same, buildStart
and buildEnd
hooks are always called, and transform
is subsequently called on changed files only (there is a cache system).
Let's jump on Vite behavior before we can compare the two.
Vite
Here's our test config
export default defineConfig({
plugins: [{
buildStart() { console.log('build started') },
transformIndexHtml() { console.log('transform index html') },
transform(code, id) { console.log(`transforming ${id}`) },
buildEnd() { console.log('build ended') },
}]
})
And let's run npx vite build
, here's the output:
build started
transforming src/index.js
build ended
transform index html
Very similar to Rollup. In Vite transformIndexHtml
can be used to transform the final index html.
Now let see when we run Vite in watch mode (dev) using npx vite
build started
transform index html
transforming src/index.js
Ok what's going on here? Why is the index html transformed before the script and where is build ended
log? The index is prior to the script because it's the first resource dynamically called during development. For the buildEnd
hook, well... dev is not build so it makes sense (who is using this hook anyway?)
Comparison
Now that we have enough understanding of how both systems work, it's time to make a cheat sheet for a quick comparison:
The first thing to notice is that both Rollup and Vite have pretty similar execution for the build process. Things get tricky in watch mode.
Another thing important to note is that buildStart
and transformIndexHtml
can be asynchronous which means the content transformations won't actually start until these functions are actually resolved.
Top comments (0)