如何将带有静态资产的 React 组件发布到 npm？答案

【问题标题】：How to publish React component with static assets to npm?如何将带有静态资产的 React 组件发布到 npm？
【发布时间】：2016-11-04 11:11:36
【问题描述】：

我正在开发一个 React 组件，我想将它发布到 npm，但我找不到任何关于如何与组件一起分发静态资产（如 css 和图像）的最佳实践。好吧，当然所有的源代码都应该转译为纯 js 和纯 css。在 js 的情况下，一切都很简单——用户只需使用他正在使用的任何捆绑器都需要它。但在 css 的情况下，这很棘手。我不想使用内联样式，因为我希望组件易于定制（通过 css 覆盖）。所以，我想唯一的方法是要求用户将 css 文件从 node_modules 复制到他需要的地方（或使用 SASS 或任何其他预处理器导入它）。但是，如果我的 css 文件引用了其他静态资源（如图像、字体等）怎么办？我猜这些路径会完全混乱。所以，我对什么是正确的方法很感兴趣？如何让用户更容易消费，如何避免常见的陷阱？

【问题讨论】：

也许你应该向你展示 production/dist webpack 配置。
@MacKentoch 我没有针对此的 webpack 配置，因为我认为 npm 不是捆绑/缩小版本的正确位置。我所做的只是将 jsx 转换为 ES5。

标签： javascript node.js reactjs npm webpack

【解决方案1】：

这是一个非常好的问题。我不确定我的回答是否符合您的期望（这将比技术更具哲学性），但我认为这是一个很好的起点。

首先，我认为没有“正确的方法”。想象一个团队（可以是单人团队）维护一个包，他们命名事物的方式对他们来说是有意义的，这就是“正确的方式”。所以，没有命名事物的“标准”，以你认为正确的方式命名事物，你很高兴。

现在，恕我直言，将使用您的软件包的人应该担心如何使用它，而不是您。因为这个人可能会从你的包中选择要使用或不使用什么，以及他们想要如何使用它。

例如，如果使用 webpack，我们可以使用url-loader，这将解决我们的 urls 问题。

如果不使用 webpack，那么你可以做的是提供关于你的包的一致文档，以及如何使用它。您的用户将遵循这一点，使用他们想要的工具。如果您的用户想在他们的工作流程中使用grep 和sed，那没关系，因为他们可以控制它。

另外——现在专门讨论 CSS——如果你想提供使用图像的样式，你可以尝试使用预处理器或类似的东西，并让你的用户自定义一些变量来设置事物的路径。例如，假设您会说assets-path，使用SASS，您的用户只需添加$assets-path: '/path/to/assets/' 并编译CSS。

每当我使用一个包时，我倾向于认为“好吧，里面有很多东西，我不需要全部使用，我会使用我想要的东西”，如果我会使用你的包，而且我知道会有 CSS 文件，我会尝试找到一套好的工具来帮助我。

如果您想遵循一些“标准”，请尝试查看 github 上最流行的 React 项目，但是，正如我之前所说，他们命名东西的方式对他们来说是有意义的。这对你来说可能没有意义！ :)

希望对你有帮助！

【讨论】：