Webpack and Typescript `__extends`

Question

I write project with help of TypeScript. Project divided into many modules. I bundle all modules into one file with Webpack.

For each module-class, which extends from parent class, webpack added TypeScript __extends helper. As result - i got many repeated code.

/***/ },
/* 24 */
/***/ function(module, exports, __webpack_require__) {

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var DeepExtend_1 = __webpack_require__(6);

//...

exports.SafariDetector = SafariDetector;


/***/ },
/* 25 */
/***/ function(module, exports, __webpack_require__) {

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var DeepExtend_1 = __webpack_require__(6);

//...

exports.SafariMobileDetector = SafariMobileDetector;

So, any way to fix that?

Answer 1

Webpack's ProvidePlugin actually has an undocumented feature: you can configure it with an array instead of a string and it'll extract the given object path from the exports of a module.

This allows you to make use of TypeScript's official tslib module, which exports all the desired functions.

The following code works with [email protected]:

new webpack.ProvidePlugin({
    '__assign': ['tslib', '__assign'],
    '__extends': ['tslib', '__extends'],
})

Make sure to force Webpack to use the ES6 module version of tslib:

aliases: {
    'tslib$': 'tslib/tslib.es6.js',
}

And configure your tsc/tsconfig.json not to emit the helper functions for every module:

{
    "compilerOptions": {
        "noEmitHelpers": true,
    }
}

Edit: My pull-request for a documentation update has been merged, so you'll find this on the official website as well, now: https://webpack.js.org/guides/shimming/

Answer 2

One possible solution would be cofiguring TypeScript to omit those helpers when compiling and write it by yourself, once and in a single file that will be later bundled by webpack.

Set compilerOptions.noEmitHelpers to true on your tsconfig.json file.

Create a extends.js with __extends function definition (typescript-helpers) and add it into your webpack bundle.

Never tried that, but I've done something similar here regarding __awaiter and code coverage.