Webpack包和TypeScript產生錯誤的全局變量格式

Question

我使用TypeScript和CommonJS模塊輸出和webpack創建瀏覽器包，在webpack中使用libraryTarget: 'var'，這樣我的庫將作爲全局變量'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 10:28變量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