javascript - Webpack 包和 TypeScript 产生错误的全局变量格式

Question

我使用带有 CommonJS 模块输出的 TypeScript 和 webpack 创建一个浏览器包，使用 libraryTarget: 'var'在 webpack 中，这样我的库将作为全局变量“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'
    }

现在，当将 bundle 包含在 <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 中呢？属性(property)？

Answer 1

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

请看下面的 Babel 插件:

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