Webpack and Typescript `__extends`

Question

I am writing a project using TypeScript. The project is divided into many modules. I am merging all the modules into one file using Webpack.

For each class module that extends from the parent class, webpack has added the TypeScript __extends . As a result, I have many duplicate codes.

 /***/ }, /* 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 this?

Answer 1

1. Please have a look at the @goenning answer and webpack.ProvidePlugin example for this:

    new webpack.ProvidePlugin({ __extends: path.join(__dirname, './src', 'extends.ts') }) 

   Ps I don't have enough reputation for commenting on @goenning answer

2. We can use "importHelpers": true in the tsconfig file : https://www.typescriptlang.org/docs/handbook/compiler-options.html.
   But it adds all ts helpers without duplication (I tried this with ts-loader ).

I chose the second option because it is not a big overhead.

Answer 2

Webpack ProvidePlugin actually has an undocumented function: you can configure it using an array instead of a string, and it will extract the given object path from the module export.

This allows you to use the official TypeScript tslib module, which exports all the necessary functions.

The following code works with webpack@2.2.1 :

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

Make sure Webpack is using the ES6 tslib module version:

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

And configure tsc / tsconfig.json not to use helper functions for each module:

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

Change My download request for updating the documentation has been combined, so you will find it on the official website, and now: https://webpack.js.org/guides/shimming/

Answer 3

One possible solution would be to type TypeScript to omit these compilation helpers and write it yourself, once and in one file, which will later be linked to webpack.

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

Create an extends.js definition with __extends ( typescript-helpers ) and add it to your web package package.

I have never tried this, but I did something similar here regarding __awaiter and code coverage.