Webpack 包和 TypeScript 产生错误的全局变量格式答案

【问题标题】：Webpack bundle and TypeScript yields wrong global variable formatWebpack 包和 TypeScript 产生错误的全局变量格式
【发布时间】：2016-02-05 10:38:49
【问题描述】：

我正在使用 TypeScript 和 CommonJS 模块输出和 webpack 来创建浏览器包，在 webpack 中使用 libraryTarget: 'var'，这样我的库就可以作为全局变量 'Foo' 使用。但是，全局变量不是我的默认导出类，而是一个包装器，我必须调用 new Foo.default() 来实际实例化我的默认导出类。

这是一个最小的 TypeScript 示例：

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> 标记中包含捆绑包时，我可以从调试器中得知全局变量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 属性中呢？

【问题讨论】：

标签： javascript module typescript webpack

【解决方案1】：

我希望你正在使用 Babel。所以你的问题是 Babel 6 中的默认行为。它不再导出默认的module.exports。

请看下面的 Babel 插件：

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

【讨论】：

投反对票，因为问题 HEADLINE 清楚地表明我使用 TypeScript 作为转译器，不是 Babel。