How do we avoid boilerplate code in files transpiled by Babel?

Question

For example, if I run

babel src --source-maps --out-dir . --modules common

on the src folder of my project, it output all the files in ., but each and every file contains things like

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

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'); } }

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

Is it somehow possible to have babel write these common boilerplate things to a file, then use require in each file to import them? So the boilerplate code in each file might now look like this:

var { _createClass, _get, _interopRequireDefault, _classCallCheck, _inherits } = require(`./babel-functions`)

and the babel-functions.js file (or whatever it shall be named) would be located in the --out-dir, which is . in my case, and all files would have that require statement at the top. Files in folders would have require(../babel-functions), require(../../babel-functions), etc.

Is there some type of option to do this (or similar) with Babel?

Answer 1

Using external-helpers is one option, and alternatively you should use runtime, which is more along the lines of what you suggested in that all of the helpers are loaded via require(). runtime also automatically adds references to a polyfill for you, so you would also not do require('babel/polyfill') when using runtime. The only downside of runtime is that because if avoids polluting globals, new prototype methods like Array.prototype.fill do not work and require non-standard code to be used. runtime is great for writing libraries especially though.

Answer 2

Babel provides the ability to use external helpers, instead of inlining them, using babel --external-helpers on the command line or babel.transform("code", { externalHelpers: true }); when calling Babel through the API.

When using either of these, Babel will assume a variable babelHelpers defined with it's helpers.

Requiring babel-core/external-helpers (after installing babel-core from NPM) will inject the helpers into global on node.

Other methods of generating and inserting the helpers are documented at the documentation: https://babeljs.io/docs/plugins/external-helpers.