我正在开发一个React组件，我想将它发布到npm，但我无法找到有关如何在组件旁边分发静态资产（如css和图像）的最佳实践。当然，所有来源都应该转化为普通的js和普通的css。在js的情况下，一切都很简单 - 用户只需要使用他正在使用的任何捆绑器。但就css而言，它很棘手。我不想使用内联样式，因为我希望组件可以轻松定制（通过css覆盖）。所以，我想唯一的方法是让用户将node_modules中的css文件复制到他需要的地方（或者用SASS或任何其他预处理器导入它）。但是，如果我的css文件引用了其他静态资源（如图像，字体等），该怎么办？我想这些路径会完全混乱。所以，我对正确的方法感兴趣吗？如何让用户更容易消费以及如何避免常见的陷阱？
答案 0 :(得分：0)
这是一个非常好的问题。我不确定我的答案是否符合您的预期（它将更具哲学性而不是技术性），但我认为这是一个很好的起点。
首先，我认为没有“正确的方法”。想象一个团队（它可以是一个单独的团队）维护一个包，他们命名事物的方式是对他们有意义的方式，这是“正确的方式”。因此，没有“标准”来命名事物，用你认为正确的方式命名事物并且你很乐意去。
现在，恕我直言，将使用你的包的人应该担心如何使用它，而不是你。由于此人可以从您的包装中选择是否要使用它，以及他们想如何使用它。
例如，如果使用webpack，我们可以使用url-loader，这将解决我们的网址问题。
如果不使用webpack，那么您可以做的是提供有关您的包以及如何使用它的一致文档。您的用户将使用他们想要的工具来关注此项。如果您的用户希望在他们的工作流程中使用sed和assets-path，那就没关系，因为他们可以控制它。
另外 - 现在特别谈论CSS - 如果你想提供使用图像的样式，你可以尝试使用预处理器或类似的东西，让你的用户自定义一些变量来设置事物的路径。例如，假设你会说$assets-path: '/path/to/assets/'，使用SASS，你的用户只需要添加final TextView textView = (TextView) findViewById(R.id.textView);
View.OnClickListener buttonOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
if (textView.getCurrentTextColor() == 0xff0000)
textView.setTextColor(0x800080);
if (textView.getCurrentTextColor() == 0x800080)
textView.setTextColor(0xff0000);
}
};
changeColor.setOnClickListener(buttonOnClickListener);
并编译CSS。
每当我使用包装时，我倾向于认为“好吧，那里有很多东西，我不需要全部使用它们，我会使用我想要的东西”，如果我会使用你的包，我知道会有CSS文件，我会尝试找一套好的工具来帮助我。
如果你想遵循一些“标准”，尝试检查github上最受欢迎的反应项目，但是，正如我之前所说，他们命名的方式是对他们有意义的方式。这对你来说可能没有意义！ ：）
希望它有所帮助！