Webpack 和 Typescript `__extends`答案

【问题标题】：Webpack and Typescript `__extends`Webpack 和 Typescript `__extends`
【发布时间】：2016-08-02 02:12:25
【问题描述】：

我在 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;

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

【问题讨论】：

这是 TypeScript 编译器在检测到“extends”关键字时的默认行为。由于编译器不知道您是否要将输出捆绑到一个或多个文件中，因此无论关键字在哪里，它都会发出 sn-p。
谷歌搜索后我发现--noEmitHelpers 标志，它禁用助手。但现在我需要手动将所有 TS 助手包含在 Webpack npmjs.com/package/typescript-helpers 中。我现在在家，但明天我会尝试使用 imports-loader webpack.github.io/docs/shimming-modules.html#importing 或其他方式。

标签： typescript webpack

【解决方案1】：

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

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

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

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

【讨论】：

是的，谢谢，我用谷歌搜索相同的解决方案。但是我如何才能正确导入并包含 Webpack 模块中的所有帮助程序？
看起来ProvidePlugin 是我要找的。span>

【解决方案2】：

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

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

我们可以在 tsconfig 中使用"importHelpers": true 选项：https://www.typescriptlang.org/docs/handbook/compiler-options.html
但它添加了所有 ts 助手而不重复（我用 ts-loader 尝试过）。

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

【讨论】：

【解决方案3】：

Webpack 的 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/

【讨论】：