Reduce transpiled code helpers with babel and webpack

Question

In my project, I'm using babel to transpile down to ES5. I'm using webpack to bundle everything together. There are several places where babel adds a function at the top of any given file to support some feature (like rest params here or import statements here).

For example, pretty much every file has this at the top:

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; };

And several files have this:

var _toConsumableArray = function (arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } };

In my smaller project this isn't a huge deal, but in my project at work, I'm doing the same thing and I'm sure I could shave more than a few bytes by figuring out a way to just have all of these polyfills in one place and have babel/webpack reference those. So rather than having _interopRequire in every file that's using import (which is almost every file), have it in one place and be referenced.

Is there a way to do this?

Answer 1

I had the same question some time ago, and there is clear answer in documentation:

https://babeljs.io/docs/en/babel-runtime

In webpack config you can do it just as 'babel?optional=runtime'