如何在通过 NPM 分发时管理 React 组件（Redux、CSS）的自定义方面

Posted 2023-02-22

【中文标题】如何在通过 NPM 分发时管理 React 组件（Redux、CSS）的自定义方面

【英文标题】：How to manage custom aspects of a React component (Redux, CSS) whilst distributing via NPM

【发布时间】：2018-11-25 04:34:57

【问题描述】：

问题：自定义 Redux 容器和 CSS 通常如何通过 NPM 处理？ 下面的结构不适用于 NPM 等传统包分发平台，因为我需要编辑自定义不同项目中的 Redux 容器和 CSS 等文件。

---

鉴于我在自定义 React 组件库中有许多组件，具有以下结构和文件：

> Component root dir
 > Component.js
 > Component.css 
 > Component_container.js
 > Component_custom.css

Redux 容器保存从项目更改的存储引用 投射 CSS 还为每个项目提供可自定义的样式 这些组件通过其容器引用其他组件

例如：

App.js   
  => Component_1_container.js   
    => Component_1.js   
      => Component_2_container.js
        => Component_2.js 

这很棒，因为它允许我从共享代码中分离出自定义代码，我可以在许多项目中更新 Component.js 和 Component.css 而无需触及自定义文件中的代码。但是自定义容器和 CSS 文件无法通过 NPM 进行管理。

我可以很容易地看到如何将 CSS 提取到单独的文件夹中。 Redux 容器更难，因为它们被其他组件引用为上述结构中的依赖项。将它们从 NPM 移出到另一个项目文件夹中会使组件之间的引用难以管理。

【参考方案1】：

我正在考虑非常相似的问题，我认为您可以创建一个名为 ui-kit 的单独模块（无论是 npm 模块还是只是您项目中标记为模块的文件夹），并且所有组件都将是 @987654323 @free，因为此组件的客户端可以使用其他商店或不使用任何商店。

此外，您将拥有文件夹 component 或您现在拥有的文件夹，并且您的 高级组件(App.js) 将只知道您的 组件哪个会知道ui-kit

结构：

app
  -> Components (containers)
    -> Component.js
    -> Component.css
  -> ui-kit (Redux free components)
    -> Component.js
    -> Component.css
  App.js (High-level component)

【讨论】：

是的，这是一种潜在的解决方案，唯一的问题是 NPM 组件相互之间存在交叉依赖关系，引用了其他组件的容器元素。如果这些位于您项目中的其他位置，如何准确说明对其他组件的相互关系引用？

本项目文件结构可参考：github.com/react-boilerplate/react-boilerplate/tree/master/app

谢谢，这很有用。

【参考方案2】：

经过相当多的指南和示例存储库，似乎最好的方法是让几个容器元素位于更高级别，控制许多相关组件。

我觉得每个组件都可以通过自己的容器单独访问商店，并且可以根据项目进行更改，这是一个不错的想法，但这是一个难以管理的解决方案。

这里的主要内容是展示组件不应该将容器组件称为依赖项。

从组件目录中分离出容器和自定义样式文件后，创建仅包含可重用代码的 NPM 组件就足够简单了。

问题是在一个应用程序中使用多少个容器，这里很好地总结了如何根据容器对组件进行分组，我发现这对回答这个问题很有用： http://www.thegreatcodeadventure.com/the-react-plus-redux-container-pattern/