Question

我在TypeScript的帮助下编写项目。项目分为许多模块。我用Webpack将所有模块捆绑到一个文件中。

对于从父类扩展的每个模块类，webpack添加了TypeScript __extends帮助器。结果 - 我得到了许多重复的代码。

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

那么，有什么方法可以解决这个问题吗？

Answer 1

Webpack＆＃39; ProvidePlugin实际上有一个未记录的功能：您可以使用数组而不是字符串对其进行配置，并且它将从模块的导出中提取给定的对象路径。

这使您可以使用TypeScript的官方tslib模块，该模块可导出所有需要的功能。

以下代码适用于webpack@2.2.1：

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

确保强制Webpack使用tslib的ES6模块版本：

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

并将tsc / tsconfig.json配置为不为每个模块发出辅助函数：

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

修改：我已经合并了文档更新的拉取请求，因此您也可以在官方网站上找到它，现在：https://webpack.js.org/guides/shimming/

Answer 2

一种可能的解决方案是配置TypeScript，以便在编译和自己编写时省略这些帮助程序，一次在单个文件中，稍后将由webpack捆绑。

在compilerOptions.noEmitHelpers文件上将true设置为tsconfig.json。

使用extends.js函数定义（typescript-helpers）创建__extends并将其添加到您的webpack包中。

从未尝试过，但我已就__awaiter和代码覆盖率做了类似here的事情。

Answer 3

请查看@ goenning的答案和webpack.ProvidePlugin示例：
```
new webpack.ProvidePlugin({
    __extends: path.join(__dirname, './src', 'extends.ts')
})
```
Ps我没有足够的声誉来评论@ goenning的回答
我们可以在 tsconfig 中使用"importHelpers": true选项：https://www.typescriptlang.org/docs/handbook/compiler-options.html
但它添加了所有 ts帮助程序而没有重复（我已经尝试使用 ts-loader ）。

我选择了第二种变体，因为它不是一个很好的开销。

Webpack和Typescript`__extends`

3 个答案: