webpack - 使用 Webpack 外部的问题

Question

我正在创建一个依赖于 Styled-Components 的库。我还在制作一个依赖于我的库和 Styled-Components 的应用程序。没有做任何特别的事情，我收到了关于正在加载两个 Styled-Components 实例的警告。经过一番研究，似乎我需要使用 webpack externals，以免将 Styled-Components 编译到我的库包中。

我的第一个问题是我是否还需要利用 npm 的对等依赖项？这是一个正交的概念吗？无论如何，我还添加了 Styled-Components 作为我库的对等依赖项。

我的主机应用程序有很多问题。所以我创建了一个简化的演示应用程序（如果需要，会将所有这些发布到 repo）。它只是一个导入我的库的 index.js 文件。然后我还 npm install Styled-Components。我使用 es6 语法来导入我的库，所以我添加了所有必需的 babel 包。我设置了我的 webpack 配置来捆绑我的应用程序。

但我得到这个错误：

../libs/ab-chart/dist/bundle.js 中的错误模块未找到：错误：无法解析“/Users/abollba/Dropbox/all/web/apps/libs/ab-中的“样式组件”图表/分布'

我已经倾注了几个小时的 webpack 文档。我已经无休止地构建、拆除和试验每个配置键。我正处于即将放弃的地步。有太多的因素和令人困惑的错误，甚至不知道该做什么。我非常感谢任何帮助！

编辑（更多信息）：

提供答案中要求的信息：

1)库 webpack 配置

2)库包.json

3）我在我的应用程序中包含这个库，如下所示：import { Chart } from "ab-chart";

4)主机应用程序的 package.json

5)主机应用程序的 webpack 配置

标签： webpackcommonjses6-modules