Webpack 捆绑库导致“instanceof”失败答案

【问题标题】：Webpack bundling library causing `instanceof` to failWebpack 捆绑库导致“instanceof”失败
【发布时间】：2018-02-19 13:24:51
【问题描述】：

我正在制作一个 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 与该类的实例相同。

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

【问题讨论】：

理想情况下，您只需要cwl-svg.. 的一个实例。但如果这不可能，您可以这样做 -> plugin.constructor.name === "SVGArrangePlugin"

标签： javascript webpack ecmascript-6 commonjs instanceof

【解决方案1】：

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

外部库可能以下列任何形式提供：

root：该库应作为全局变量提供（例如，通过脚本标签）。

commonjs：该库应作为 CommonJS 模块提供。

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

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

【讨论】：