スタティックアセットを持つReactコンポーネントをnpmに公開するには？

Question

私はReactコンポーネントを開発していますが、これをnpmに公開したいのですが、スタティックアセット（CSSや画像など）をコンポーネントと共に配布する方法に関するベストプラクティスは見つかりませんでした。まあ、もちろん、すべての情報源はプレーンなjsとプレーンなCSSに変換されるべきです。 jsの場合はすべてがシンプルです - ユーザーは、彼が使用しているどんなバンドラでもそれを要求するだけです。しかし、CSSの場合、それは扱いにくいです。コンポーネントを簡単にカスタマイズできるようにするために（CSSオーバーライドによって）インラインスタイルを使用したくありません。ですから、私は、node_modulesからcssファイルを必要な場所にコピーする（またはSASSや他のプリプロセッサでインポートする）ようにユーザに頼むしかないと思います。しかし、私のCSSファイルが他の静的資産（画像、フォントなど）を参照している場合はどうでしょうか？パスは完全に台無しになるでしょう。だから、私はそれを行う正しい方法は何かに興味がありますか？ユーザーが簡単に使用できるようにする方法と一般的な落とし穴を避ける方法

Answer 1

これは本当に良い質問です。私の答えがあなたが期待しているものであるかどうかは分かりません（技術よりも哲学的です）が、それは良い出発点だと思います。

まず、「正しい方法」はないと思います。パッケージを維持しているチーム（1人のチームになることができます）を想像してください。名前を付ける方法は、それらに意味をなさない方法であり、それは「正しい方法」です。だから、物事に名前を付けるための「標準」はなく、あなたが正しいと思うように物事を命名し、あなたは行かなくてはなりません。

今、IMHO、あなたのパッケージを使用する人は、あなたの使い方を心配する必要があります。その人はあなたのパッケージから何を使いたいのか、そして何を使いたいのか、どのように使いたいのかを選択できるからです。

たとえば、webpackを使用している場合は、url-loaderを使用することができます。これにより、URLの問題が解決されます。

webpackを使用していない場合は、パッケージに関する一貫したドキュメントとその使い方を提供することができます。ユーザーは、必要なツールを使用してこれに従います。ユーザーがgrepとsedをワークフローに使用したい場合は、それらの管理下にあるので問題ありません。

また、イメージを使用するスタイルを提供する場合は、プリプロセッサなどを使用して、ユーザーがいくつかの変数をカスタマイズして物のパスを設定できるようにすることもできます。たとえば、assets-pathと言うと、SASSを使用すると、ユーザーは$assets-path: '/path/to/assets/'を追加してCSSをコンパイルするだけです。

私はパッケージを使用しているときはいつも、「大丈夫、そこにはたくさんのものがあります。私はそれらをすべて使う必要はなく、私が望むものを使用します。私はあなたのパッケージを使用し、CSSファイルがあることを知っています。私は助けてくれるツールを見つけようとします。

「標準」に従う場合は、githubで最も人気のある反応プロジェクトをチェックしてみてください。しかし、前にも述べたように、名前を付ける方法は彼らにとって意味のある方法です。それはあなたに意味をなさないかもしれません！ :)

希望します！