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

Webpack bundle and TypeScript yields wrong global variable format

本文关键字：错误 全局变量 格式 bundle TypeScript Webpack      更新时间：2023-09-26

我正在使用带有 CommonJS 模块输出和 webpack 的 TypeScript 来创建浏览器捆绑包，使用 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 属性中呢？

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

请看下面的 Babel 插件：

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

相关文章：