Webpack и Typcript `__extends`

Question

Я пишу проект с помощью TypeScript. Проект разделен на множество модулей. Я связываю все модули в один файл с помощью Webpack.

Для каждого модуля-класса, который распространяется от родительского класса, добавлен веб-пакет TypeScript __extends helper. В результате - я получил много повторного кода.

/***/ }, 
/* 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 для этого:

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

   Ps Я не хватает репутации для комментариев к @ goenning Ответим

2. Мы мог использовать "importHelpers": true опцион tsconfig: https://www.typescriptlang.org/docs/handbook/compiler-options.html
   Но он добавляет все ts помощники без дублирования (я пробовал это с ts-loader).

Я выбрал второй вариант, потому что это не очень удобно.

Answer 2

Одним из возможных решений было бы сопоставление TypeScript, чтобы опустить эти помощники при компиляции и написать его самостоятельно, один раз и в одном файле, который позже будет связан с webpack.

compilerOptions.noEmitHelpers до true на вашем tsconfig.json файлах.

Создайте extends.js с определением функции __extends (typescript-helpers) и добавьте его в свой пакет веб-пакетов.

Никогда не пробовал, но я сделал что-то подобное here относительно __awaiter и покрытия кода.

Answer 3

У пакета ProvidePlugin у Webpack фактически есть недокументированная функция: вы можете настроить его с помощью массива вместо строки и извлечь данный путь объекта из экспорта модуля.

Это позволяет использовать официальный tslib модуль TypeScript, который экспортирует все нужные функции.

Следующий код работает с 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, 
    } 
} 

Edit: Мой выдвижная запрос на обновление документации были объединены, так что вы найдете это на официальном сайте, а также, в настоящее время: https://webpack.js.org/guides/shimming/