Question

我正在创建一个JavaScript库，可以接受来自外部库（cwl-svg）的各种插件。在这个库中，我想检查它们是什么类型的插件，所以我使用代码：

import {SVGArrangePlugin} from "cwl-svg";

export default function myFunction(plugins){
    for (plugin of plugins)
        if (plugin instanceof SVGArrangePlugin)
            doSomething();

然后，当我构建我的库时，webpack将cwl-svg库添加到我的包中，就像它应该的那样。

现在让我们说我的库的用户写下面的代码：

import {SVGArrangePlugin} from "cwl-svg";
import func from "my-library";

func([new SVGArrangePlugin()]);

问题是，当用户使用new SVGArrangePlugin()将插件传递给此函数时，他们会从他们自己的cwl-svg库版本传入该类的实例，因为我的库已经它自己的捆绑版本。因此，plugin instanceof SVGArrangePlugin总是返回false，即使plugin与该类的实例相同。

如何使用webpack确保plugin instanceof SVGArrangePlugin返回true？我考虑使用cwl-svg导入我的库externals，但这似乎是将自己导出到窗口对象的库，而我宁愿保留模块中包含的所有内容。我在这里缺少明显的设计决定吗？

Answer 1

externals正是您想要的。它不仅对将数据库导出到全局对象的库有用，而且webpack仍然将其声明为显式依赖项。来自文档：

外部库可以采用以下任何形式提供：


root：该库应该可用作全局变量（例如，通过脚本标记）。

commonjs：该库应该可以作为CommonJS模块使用。

commonjs2：与上面类似，但导出为module.exports.default。

amd：与commonjs类似，但使用的是AMD模块系统。

Webpack捆绑库导致`instanceof`失败

1 个答案: