Webpack and Typescript `__extends`
Please look at @goenning's answer and webpack.ProvidePlugin example for that:
new webpack.ProvidePlugin({ __extends: path.join(__dirname, './src', 'extends.ts') })
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.