Build a Modern JS Project - #5 Rollup with CJS, ESM & UMD
In this next episode, we'll configure a build setup in our project. Our source code will define React components and export them via ES6 modules. Although ES modules have already landed in evergreen browsers as of late 2017 (see for ex.), we as library authors cannot predict the end runtime with much certitude. While some developers may target the more recent versions of Chrome and Firefox, others might need to support a broader market share including IE11 or Opera Mini.
Our module should also ideally be written in isomorphic JavaScript, meaning that it should run in both browser and Node environments. Moreover, we should also deliver our code such that it can be executed in a global browser namespace, while also retaining backwards compatibility with legacy module systems, such as AMD or UMD. At the same time, we should strive for best performance with build tools like Webpack by enabling tree shaking in ES modules.
With these critical constraints in mind, it sounds like we'd need to ship several bundles each geared towards a specific module system. For one, we will generate a CJS bundle and flag it as the main entry point in package.json Next, we will produce an ESM build that will offer tree shaking out of the box with bundlers like Webpack, Parcel, or Browserify. Finally, we will also publish a UMD bundle on unpkg to support legacy formats like browser globals or RequireJS, thereby covering all platforms on the web and in NodeJS.
Despite its popularity among SPAs, Webpack is rarely used when authoring JavaScript packages The go-to bundler for NPM modules is Rollup Rollup excels at producing lean bundles and eliminating dead code. Tailored towards ES6 modules, it was the first bundler to introduce tree-shaking, which Webpack then picked up. Rollup also has an elaborate net of opt-in plugins, similar to loaders in Webpack. It's very straightforward to use, and I guarantee that you'll fall in love with it, just like I did. Let's give it a try!
We're starting to tread on a territory in JavaScript that is still enveloped in fog and mystery. Many of the things I am about to reveal to you are only known in closed circles of gurus and oracles that hold their wisdom secret... I'm just kidding of course, but this arcane knowledge will probably unlock some of your finest skills in JavaScript, so please, attend to it with focus and care. Here are some selected readings to help you navigate the module landscape in JavaScript.
JavaScript Modules: A Beginner's Guide (Part 1) and (Part 2)
Practical guide to JS modules
Where ES Modules (ESM) shine
Watch video Build a Modern JS Project - #5 Rollup with CJS, ESM & UMD online without registration, duration 12 minute 14 second in high hd quality. This video was added by user Code Realm 30 December 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 24 thousand once and liked it 40 people.