Transpile “debug” and other npm packages to es5

You have tried everything, but nothing really works! But why? — you may ask yourself.

https://unsplash.com/photos/8KfCR12oeUM, Thanks to Markus Spiske.

As for front-end developers, we are often forced by a business strategy to support archaic web browsers. IE11 et al. immediately comes to mind. We are using a lot of 3rd party vendors and are heavily dependent on it. But what if package maintainers decide to simplify their continuous integration (CI) pipelines? Or build processes and stop supporting es5?

Developers run amok. Just a quick search of github issues shows us, that we often struggle to come up with proper solutions for this problem. Let’s dive into the solution that works for us.

Note: This is certainly not the only way. Also, we are using Webpack.

TL;DR

If you’d like to see a working example, here it is:

kmaraz/debug-to-es5

git clone https://github.com/kmaraz/debug-to-es5
npm install
npm run build

A little bit more

If you’ve scrolled here, probably you want to understand how it works, so read on.

First, we need to configure babel-loader:

Piece of code located in webpack.config.js file.

That’s it, very easy. Now we move on to use the loader in the rule for JS files:

This is a part of webpack.config.js configuration.

excludeNodeModulesExcept function is our savior. Huge thanks to @jh3141, who mentioned this in this GitHub comment: https://github.com/webpack/webpack/issues/2031#issuecomment-317589620

Let’s look at this beauty.

From now on, no more issues with transpiling to es5.

It takes modules array as an input (line 5). Then it returns a function (line 13) which for each currently processed module evaluates if it should be transpiled by Babel or not. It does so based on regular expressions (line 10).

Wrap-up

In this short tutorial, we have learned that even selective transpilling can be easily solved. For any suggestions or ideas please use the comments below, or email me directly.