Webpack与打字稿`__extends`

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

1. 请查看@goenning的答案和webpack.ProvidePlugin示例： 新webpack.ProvidePlugin({ __extends: path.join(__dirname，'./src'，'extends.ts') })
2. 我们可以在"importHelpers": true tsconfig：https://www.typescriptlang.org/docs/handbook/compiler-options.html中使用选项 但是它添加了所有的 ts助手，没有重复(我已经用ts-loader尝试过了)。

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

Answer 2

Webpack的ProvidePlugin实际上有一个无文档的特性:您可以用数组而不是字符串来配置它，它将从模块的导出中提取给定的对象路径。

这允许您使用类型记录的正式tslib模块，该模块导出所有所需的功能。

下面的代码用于webpack@2.2.1

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

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

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

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

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

编辑：我对文档更新的请求已经合并，所以您也可以在官方网站上找到它，现在是：https://webpack.js.org/guides/shimming/。

Answer 3

一种可能的解决方案是配置TypeScript，在自己编译和编写时省略这些助手，一次和一个单独的文件，稍后由webpack打包。

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

创建一个extends.js和__extends函数定义(打字本-帮手)，并将其添加到webpack包中。

从未尝试过这种方法，但我在__awaiter和代码覆盖率方面做了类似的工作。