Webpack och Typescript `__extends`

Jag skriver projekt med hjälp av TypeScript. Projektet är uppdelat i många moduler. Jag slår ihop alla moduler till en fil med Webpack.

För varje modulklass, som utvidgar från föräldraklass, lade webpack till TypeScript __extends hjälpfunktion. Som resultat fick jag mycket upprepad kod.

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

Så, finns det något sätt att fixa det?

Svar #1

Webpacks ProvidePlugin har faktiskt en odokumenterad funktion: du kan konfigurera den med en array istället för en sträng och den kommer att extrahera den angivna objektvägen från exporterna av ett modul.

Detta gör att du kan använda TypeScripts officiella tslib-modul, som exporterar alla önskade funktioner.

Följande kod fungerar med [email :

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

Se till att tvinga Webpack att använda ES6-modulversionen av tslib:

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

Och konfigurera din tsc/tsconfig.json så att den inte genererar hjälpfunktionerna för varje modul:

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

Redigera: Min pull-request för en dokumentationsuppdatering har blivit sammanslagen, så du hittar detta även på den officiella webbplatsen nu: https://webpack.js.org/guides/shimming/

Svar #2

  1. Titta på @goenning:s svar och exempel på webpack.ProvidePlugin för det:

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

  2. Vi kan använda "importHelpers": true-alternativet i tsconfig: https://www.typescriptlang.org/docs/handbook/compiler-options.html
    Men det lägger till alla ts-hjälpare utan duplicering (jag har provat det med ts-loader).

Jag har valt det andra alternativet eftersom det inte är en stor påfrestning.

Relaterade artiklar