Webpack 解析导入库的外部答案

【问题标题】：Webpack resolve externals of imported libraryWebpack 解析导入库的外部
【发布时间】：2018-08-24 22:20:20
【问题描述】：

我正在尝试使用 webpack 创建一个库。我的主要目标主要是发布 ES6 模块文件，以便我的客户端应用程序以及导入和树摇库。（它旨在成为一个图标库，以便用户可以捆绑他们在应用中使用的图标）。

我有将 umd 模块构建到 dist 的库，并且我已将 package.json 中的 module 字段设置为导出所有图标的 src 目录文件。

每个图标都是一个 React 组件。我已经导入了 React 和 PropTypes 来创建每一个并将它们设置为 webpack 配置中的外部，但是我认为这在这个用例中并不重要，因为......

我制作了一个测试应用程序，它 npm 链接了我的库并从我的模块中导入了我的一个图标组件。它肯定会转到源文件，但我的应用程序中的 webpack 无法解析这些模块中的 react 和 prop-types。它抱怨每个组件中的每个。

例如：

Module not found: Error: Can't resolve 'react' in '/code/svg-icons/src/components'
@ ../svg-icons/src/components/AlertIcon.js
@ ../svg-icons/src/index.js
@ ./src/index.js

我想这是有道理的，因为我的库中的 AlertIcon 模块没有 node_module 目录来查找 react。

我如何让其他应用程序提供react、prop-types 以及我想在我的库的源模块中导入的任何其他内容？

【问题讨论】：

标签： javascript es6-modules webpack-4

【解决方案1】：

对于你的 svg-icons 包，你只需要通过 Babel 运行它，将它转译成 ES5 就可以了。

依赖于svg-icons 的应用程序是使用webpack 构建的应用程序，它将负责将导入的图标捆绑到您的应用程序包中。

Kent C. Dodds on egghead.io 提供了一个很棒的免费课程。它将为您清除有关该主题的所有内容。

【讨论】：

我认为我的用例更具体一点？我预期的“用户”是已经被 babel 和 webpack 编译的应用程序。我希望他们会安装我的模块并像他们自己的 src/ 模块一样导入它。换句话说，他们会 babel 并打包这些图标，然后树摇出他们使用的 import 语句。这就是肯特所说的吗？
第三方包（你的包将成为第三方包，因为它将安装在 node_modules 中）几乎从不包含在 babel 处理中，所以发布 ES5 代码是你的工作。但是，它们是使用 webpack 处理的，并将通过 import/require 捆绑。强迫开发人员编译你的包会增加很多问题，尤其是当你无法控制构建过程时（就像大多数 CRA 应用程序一样）。摇树与此无关。如果开发人员一个一个地导入你的图标，他们只会在他们的构建中包含这些图标。