Search code examples
javascriptbuildbabeljscode-translation

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


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?


Solution

  • 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.