Bundling your own JS library with Rollup

When I decide to write my own vanilla js library and the next thing that pops into my mind is how do I bundle up this library.
What I did was just go through some of the libraries that I used in day-to-day life. I noticed that most libraries bundle up with Rollup and few of them bundle up with Webpack. Then I read a few articles to compare Rollup vs Webpack. Most of the article quoted that.

Rollup for Libraries & Webpack for Application

The Parcel is out of my consideration since libraries which I used day-to-day not build with the Parcel.

Finally, I decided to build my library with a Rollup. So far I’ve no regrets choosing Rollup.

It’s really great that now some essential plugins maintain by the rollup community and no longer maintain in original registries or git repositories. now you can find essential plugins in one place.
https://github.com/rollup/plugins

Here are a few of the plugins I used which maintained by the rollup plugin community.

@rollup/plugin-babel
@rollup/plugin-json
@rollup/plugin-replace
@rollup/plugin-strip

If you notice these kid warnings use those relevant registry or repository.

some of the other essential plugins which I used from outside of the rollup plugin community.

@babel/preset-env
rollup-plugin-postcss
rollup-plugin-istanbul

One thing I need to highlight is that I end up with two rollup config files due to some error during setup unit test bundling. In that case, I had to keep two rollup config files, one for source code and another one for unit testing.

rollup.config.js
rollup-test.config.js

Let’s look into rollup.confg.js

I used the strip plugin to remove unnecessary logs & debuggers.

plugins: [   strip({    functions: functionsToBeRemove,   }),

The json for extract version number from the package.json file.

json(),

The replace plugin for replacing the base URL of the API endpoints.

replace({    
__BASE_URL__: process.env.MF_BASE_URL? process.env.MF_BASE_URL : ''   
})

The postcss for bundle up style files.

postcss({    
   minimize: true,    
   extensions: ['.css'],    
   extract: path.resolve('dist/my-first-js-lib.css'),   
}),

In my case, I wanted to just copy essential styles from themain.css file into the bundle without using styles inside of the js library.

It didn’t work with the above configurations, and to achieve this I had to define that main.css file as an external and update rollup version from 1.29.0 to 2.26.3 (also update relevant packages to rollup lib)

https://github.com/egoist/rollup-plugin-postcss/issues/307#issuecomment-675386186

external: [‘./styles/main.scss’]

The istanbul plugin has been used in rollup-test.config.js generate test coverage report.

istanbul({
   exclude: ['test/**/*.js', 'node_modules/**/*.js']
 }),

It’s not that difficult to bundle up js library with the rollup and plugins. rollup offers 28 essential plugins maintain under the rollup repository and some other decent third-party plugins.

This is just to express my experience in bundling the basic js library. I think designing & writing a js library is another topic for me. So I’ll share that experience in a later story.