Webpack和Typescript`__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

Webpack ProvidePlugin实际上有一个未记录的功能:您可以使用数组而不是字符串来配置它,它将从模块的导出中提取给定的对象路径.

这允许您使用TypeScript的官方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 2

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

在您的文件上设置compilerOptions.noEmitHelpers为。truetsconfig.json

创建一个extends.jswith__extends函数定义（typescript-helpers）并将其添加到您的 webpack 包中。

从来没有尝试过，但我在这里做了一些关于__awaiter代码覆盖率的类似事情。

Answer 3

1. 请查看@goenning 的回答和 webpack.ProvidePlugin 示例：

   new 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）。

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