如何使用 Webpack 建立一个私有的 React 组件共享库

Posted 2023-03-07

【中文标题】如何使用 Webpack 建立一个私有的 React 组件共享库

【英文标题】：How to set up a private shared library of React components with Webpack

【发布时间】：2015-10-27 12:41:17

【问题描述】：

我在多个 Webpack 项目中使用了许多 React 组件，我想通过 NPM 共享它们。所以我很自然：

将这些组件放入（私有）GitHub 存储库中 将该存储库添加到主项目的package.json 为了同时在组件库上进行开发，我使用npm link 将其符号链接到我的主项目中。

但是，Webpack 无法从我的库组件文件中解析 react，因为库项目文件夹或其任何父项中没有 node_modules。

我在 Webpack 配置的 externals 中看到了与 react 捆绑构建的第 3 方 React 组件，但我不想构建单独的捆绑包或做任何复杂的事情，我只想要求我的库组件的原始源。有人知道怎么做吗？

【参考方案1】：

我希望我能找到一个更优雅的解决方案，但将其添加到我的 webpack.config.js 工作：

resolve: 
    fallback: path.resolve(__dirname, 'node_modules')
,
resolveLoader:  root: path.join(__dirname, "node_modules") ,

但是，我最终决定在 git 子模块中的项目之间共享组件会更容易。