PabloRosales JavaScript Developer

Using Rollup Config Files


Using the command line options on Rollup gives you a lot to start, there are a lot more, as of now Rollup command line help shows this options:

Check out the Rollup CheatSheet for more examples on how to use this options.

Basic config

Lets continue where we left off last time, but instead of telling Rollup about our input and output files on the package.json scripts section, lets tell it to look for our conf file. We need to change our package.json scripts section to this:

Now lets create a directory called configs and a file called rollup.dev.js inside. Our first config file will look like this:

Running the build command now will give us the same output from our last section in UMD format. Nice thing about Rollup is that it processes the config file also, so we can write export default {...}.

Check out the sample code for this part at Rollup Samples.

Watching our files for changes

You might have noticed that I used a config file called rollup.dev.js, main reason is so we can demonstrate having two different config files, one for development and one for production. The development configuration can be updated to watch for our changes as we edit our code.

Lets change our build to use a production config. Copy our configs/rollup.dev.js into configs/rollup.prod.js, and edit the scripts section on the package.json file to look like this:

Now lets add a new entry for use on development, I like to use the name dev for the task instead of watch since we might do more than just watch our files. Edit the package.json file scripts section to look like this:

Notice how we used the -w command line option for Rollup, this will tell it to watch our files. You could use this on the command line if you were not using a config file. Lets now edit our configs/rollup.dev.js file like this to add the watch options:

We configured Rollup to include on the watched files our src directory and to exclude the node_packages directory.

Now that we are watching the file, rollup will build it again each time we edit it, we could use the output file now on the browser or from the command line without having to run the build task, this saves a lot of time since is usually very very fast.

Check out the sample code for this part at Rollup Samples.

Made with by PR