Question

我正在使用带有CommonJS模块输出的TypeScript和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>标记中包含bundle时，我可以从调试器告诉全局变量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。因此，您的问题是Babel 6中的默认行为。它不再导出默认module.exports。

请查看以下Babel插件：

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

Webpack bundle和TypeScript产生错误的全局变量格式

1 个答案: