Webpack and Typescript `__extends`

1. Please look at @goenning's answer and webpack.ProvidePlugin example for that:

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

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

I've chosen second variant because it is not a great overhead.

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/

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.