Home

How does it work?

What's the matter?

Using babel-loader without babel-plugin-external-helpers in Webpack

// webpack.config.js

module.exports = {
    entry: './main.js',
    module: {
        rules: [{
            test: /\.js$/i,
            loader: 'babel-loader?presets[]=env',
        }],
    }
};

results in a bundle in which almost every module has additional helper functions defined:

// ...
var _navigation2 = _interopRequireDefault(_navigation);

// "babel-loader" defines some helper functions inside every module
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// ...

Which seems kind of excessive in case of many modules in the project.

What to do?

Use babel-plugin-external-helpers with babel-loader:

// webpack.config.js

module.exports = {
    entry: './main.js',
    module: {
        rules: [{
            test: /\.js$/i,
            loader: 'babel-loader?presets[]=env&plugins[]=babel-plugin-external-helpers',
        }],
    }
};

In this case babel-loader doesn't create any helper functions inside modules, it just uses methods of babelHelpers object:

var _navigation2 = babelHelpers.interopRequireDefault(_navigation);

babelHelpers.classCallCheck(this, SomeClass);

That's all?

Not so fast. Using babel-plugin-external-helpers just makes babel-loader use babelHelpers methods inside modules, it doesn't define it. Running the bundle will raise ReferenceError if no code defined babelHelpers object earlier. This could be fixed by creating babel-helpers.js file (babel-cli npm package should be installed) and using it in Webpack configuration.

./node_modules/.bin/babel-external-helpers [options] > babel-helpers.js

// webpack.config.js

module.exports = {
    entry: ['./babel-helpers.js', './main.js'],
    module: {
        rules: [{
            test: /\.js$/i,
            loader: 'babel-loader?presets[]=env&plugins[]=babel-plugin-external-helpers',
        }],
    }
};

Is there a shortcut?

Use webpack-babel-external-helpers-2 plugin! It modifies Webpack configuration after Webpack processed all arguments and loaded all configuration files. The plugin processes all rules in module.rules and configures babel-loader to use babel-plugin-external-helpers, also it injects module containing definition of babelHelpers object with all its methods (or methods specified in whitelist option) to the resulting bundle.

// webpack.config.js

const WebpackBabelExternalsPlugin = require('webpack-babel-external-helpers-2');

module.exports = {
    entry: './main.js',
    module: {
        rules: [{
            test: /\.js$/i,
            loader: 'babel-loader?presets[]=env',
        }],
    },
    plugins: [
        new WebpackBabelExternalsPlugin(/* plugin options object */),
    ],
};