My first impression to Rollup --watch option

Rich Harris announced he finished implementing watch option to Rollup.js. (experimetal)

For the people who doesn’t know Rollup.js, it’s one of the JavaScript module bundler like Browserify or Webpack.

Browserify was appeared for using node.js features in the browser. And Webpack is more useful. Not only JavaScript modules but also CSS or Images we can hundle with Webpack. But sometime it’s complicated to use...

So here came Rollup.js

My first impression for Rollup.js was “Yeah, this is ok. Rollup seems to be more simpler than others. But what is difference? Does it has any strength compared with others?”

And then I found Rollup can do “Tree shaking”. This seemed good. It’s ES6 based, so we can expect “static analysis” which enables smarter bundling.

But at that time, Rollup didn’t have watch option. I was not sure if we can use it in our production.

But it has been certainly growing, so now it gained watch option. So here is my first impression for it.

npm packages

First of all we need to install precise npm packages.

Now we just want to try watch feature, so let’s install two packages.

npm install --save-dev rollup rollup-watch

After watch feature is included to Rollup.js as default feature in the near future, we will have to install only rollup package, I guess.

npm scripts

Installing packages has done now. So let’s add one more script to npm scripts.

This time we don’t create rollup.config.js because it’s not necessary. You know, things must be as simple as possible.

“scripts”: {
  “rollup-watch”: “rollup -w --input ./src/main.js --output ./dist/bundle.js”

js files

I made three js files. Here they are.

// ./src/calc.js
const sum = (a, b) => a + b
export default sum
// ./src/log.js
const log = (x) => { console.log(x) }
export default log
// ./src/main.js
import sum from ‘./calc.js’
import log from ‘./log.js’
log(sum(3, 4))

main.js is the entry file which imports two modules and consumes them.

run script

Now we can run rollup-watch script.

npm run rollup-watch

Then rollup runs and starts to watch ./src/main.js

bundle file

Here is bundle js file.

// ./dist/bundle.js
const sum = (a, b) => a + b
const log = (x) => { console.log(x) }
log(sum(3, 4))

It worked!

Watch continues

And every time we modify files under watch, rollup re-bundle them again.

Ok! It seems good. I’m now thinking about using it in our production especially in SPA.

How do you think about it?

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.