Webpack 解析导入库的外部
Webpack resolve externals of imported library
我正在尝试使用 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 以及我想在我的库的源模块中导入的任何其他内容？
对于您的 svg-icons 包，您只需要 运行 通过 Babel，将其转译为 ES5，就是这样。
依赖于 svg-icons 的应用程序将使用 webpack 构建，它将负责将导入的图标捆绑到您的应用程序包中。
Kent C. Dodds on egghead.io 提供了关于该主题的很棒的免费课程。它将为您清除有关该主题的所有内容。
我正在尝试使用 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 以及我想在我的库的源模块中导入的任何其他内容？
对于您的 svg-icons 包，您只需要 运行 通过 Babel，将其转译为 ES5，就是这样。
依赖于 svg-icons 的应用程序将使用 webpack 构建，它将负责将导入的图标捆绑到您的应用程序包中。
Kent C. Dodds on egghead.io 提供了关于该主题的很棒的免费课程。它将为您清除有关该主题的所有内容。