Пакет Webpack и TypeScript дают неверный глобальный переменный формат

Question

Я использую TypeScript с выходом модуля CommonJS и webpack для создания пакета браузера, используя libraryTarget: 'var' в webpack, чтобы моя библиотека была доступна как глобальная переменная 'Foo'. Однако вместо того, чтобы глобальная переменная являлась моим экспортированным по умолчанию классом, глобальная переменная будет оболочкой, и я должен вызвать new Foo.default(), чтобы фактически создать экземпляр экспортированного по умолчанию класса.

Вот минимальный машинопись пример:

export default class Foo {} 

После компиляции, это будет обычный JS результат:

var Foo = (function() { 
    function Foo() { 
    } 
    return Foo; 
})(); 
Object.defineProperty(exports, "__esModule", { value: true }); 
exports.default = Foo; 

Соответствующий webpack.config.js раздел:

output: 
    { 
     library: 'Foo', 
     libraryTarget: 'var' 
    } 

Теперь, когда вы включаете пакет в тег <script>, я могу сказать из отладчика, что gl Obal переменная Foo является оболочкой, а функция конструктор Foo фактически является собственностью default, так что мне нужно позвонить:

var foo_instance = new Foo.default(); 

Но я ожидаю, что это будет:

var foo_instance = new Foo(); 

Я уже нашел что если я изменю в TS компиляции выведите строку exports.default = Foo в module.exports = Foo, тогда я могу позвонить new Foo() так же, как и следовало ожидать.

Итак, как я могу использовать webpack правильно, чтобы моя функция конструктора не была завернута в свойство default?

Answer 1

Я ожидаю, что вы используете Вавилон. Итак, ваша проблема - это поведение по умолчанию в Babel 6. Оно больше не экспортирует значение по умолчанию module.exports.

Пожалуйста, посмотрите на следующий плагин Бабеля:

https://www.npmjs.com/package/babel-plugin-add-module-exports