javascript - 如何将带有静态 Assets 的 React 组件发布到 npm？

Question

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

Answer 1

这真是个好问题。我不确定我的回答是否符合您的预期(哲学性多于技术性)，但我认为这是一个很好的起点。

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

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

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

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

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

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

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

希望对您有所帮助!