Webpack e Typescript `__extends`

Question

Scrivo progetto con l'aiuto di TypeScript. Progetto diviso in molti moduli. Unisco tutti i moduli in un unico file con Webpack.

Per ogni classe di modulo, che si estende dalla classe padre, webpack ha aggiunto l'helper TypeScript __extends. Come risultato - ho ricevuto molti codici ripetuti.

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

Quindi, un modo per risolvere il problema?

Answer 1

1. Si prega di guardare @ di risposta e l'esempio webpack.ProvidePlugin goenning per questo:

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

   Ps Non ho abbastanza reputazione per un commento a @ risposta di goenning

2. Noi potrebbe utilizzare l'opzione "importHelpers": true è tsconfig: https://www.typescriptlang.org/docs/handbook/compiler-options.html
   Ma aggiunge tutti gli helper ts senza duplicazione (l'ho provato con ts-loader).

Ho scelto la seconda variante perché non è un grande sovraccarico.

Answer 2

Una possibile soluzione potrebbe essere quella di associare TypeScript per omettere quegli helper durante la compilazione e la scrittura da soli, una volta e in un singolo file che verrà successivamente raggruppato in pacchetto da Webpack.

Impostare compilerOptions.noEmitHelpers su true sul file tsconfig.json.

Creare un extends.js con la definizione di funzione __extends (typescript-helpers) e aggiungerlo nel pacchetto Webpack.

Mai provato, ma ho fatto qualcosa di simile here per quanto riguarda __awaiter e copertura del codice.

Answer 3

Il pacchetto di Webpack ProvidePlugin ha in realtà una funzionalità non documentata: è possibile configurarlo con una matrice anziché una stringa ed estrarrà il percorso dell'oggetto specificato dalle esportazioni di un modulo.

Ciò consente di utilizzare il modulo tslib ufficiale di TypeScript, che esporta tutte le funzioni desiderate.

Il seguente codice funziona con webpack@2.2.1:

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

Assicurarsi di forzare Webpack di utilizzare la versione del modulo ES6 di tslib:

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

e configurare il tsc/tsconfig.json non emettere l'helper funzioni per ogni modulo:

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

Edit: Il mio pull-richiesta di aggiornamento della documentazione è stata unita, in modo da trovare questo sul sito ufficiale così, ora: https://webpack.js.org/guides/shimming/