Bundlers

Bundlers take care of bundling or grouping assets together, including modules at build time. The main responsibility of bundlers is to understand the dependency graph of your code (whether that means links in an HTML file, imports in ES2015, or TypeScript code) and to bundle/group everything together.

That is the basis of all bundlers, but some of them can actually do a whole lot more:

• Tree shaking: Removing unused/dead code (also known as dead code elimination)
• Splitting code: Splitting your code into different bundles that you can load lazily (that is, on demand/when needed)
• Transpiling code (for example, TypeScript to JavaScript)
• Inlining different types of resources (for example, HTML, CSS, JSON, images, and many others​)
• Minification and uglification: Compressing the code for production
• Processing CSS (for example, using SASS, Less, PostCSS, and many others​)
• Processing other types of resources
• Linting code: Checking the code quality
• Testing code: Executing tests automatically
• Generating source maps
• Copying and transforming assets: Copying images, fonts, and much more and transforming them if needed (for example, compressing images)
• Handling cache busting: Adding suffixes to generated files (for example, hashes) to avoid caching issues
• Running development web servers with hot reloading: Just like browser-sync, which we used for TodoIt
• Providing Hot Module Replacement (HMR) during development: Automatically updating modules at runtime when code changes, without needed a full page refresh. You can learn more about HMR here: https://parceljs.org/hmr.html.

And this list could go on and on.

Here are a few examples of bundlers:

• Webpack: https://webpack.js.org
• Parcel: https://parceljs.org
• Rollup: https://rollupjs.org/guide/en
• StealJS: https://stealjs.com
• FuseBox: https://fuse-box.org
• Babel: https://babeljs.io
• Browserify: http://browserify.org

Webpack is one of the most popular bundlers at the moment. It has a vast ecosystem of plugins (https://webpack.js.org/plugins) and loaders (https://webpack.js.org/loaders), giving it an impressive feature set.

You might not have realized it until now, but, in Chapter 4, Leveraging Generics and Enums to Build a Media Management Web Application, we already used the Parcel bundler! Thanks to that, we could directly link our mediaman.ts file in the HTML. Parcel took care of the whole of the processing for us, including the transpilation and bundling of our TypeScript code and the processing of the HTML/CSS files.

The key takeaway message here is that module bundlers are very important tools in today's JavaScript ecosystem. As platforms evolve (whether we consider the client/web or server side), some of their features get standardized/integrated. However, this standardization process takes time. So, for the time being, using bundlers has great benefits.