概要
Create React App（以下、CRA）は知識がなくてもReactアプリを構築してくれる優れもの。
難しいことは識者が対応してくれているので、ユーザーは使っているだけで恩恵を受け続けれる。
だからCRAはイジェクト(CRAが中で持っている設定ファイルを取り出し、以降自己管理)したくない。
イジェクトすれば簡単にMarkdownファイルを読めるんですが、イジェクトしないとちょっと個別対応が必要になるというお話。
読者対象
- MarkdownをReactで読み込みたい
- CRAのイジェクトは絶対にしたくないでござる
- CRAのイジェクトせずに設定ファイルをカスタムできるパッケージも導入したくないでござる
経緯
読み込む方法について議論されていた模様
再処知らずにmdを読み込んだところ、デプロイ時のファイルパス？の文字列が取得( ﾟДﾟ)ﾊｧ?
import doc from './doc.md';
これはどういうことだ？と思ってググってみると、どうやらCRAがMarkdownを読み込むための手段を提供できていない模様。
どう提供するかをいろいろ議論していることが判明。
関係ないが議論の過程でSVGについては、サポートするようになった模様。
https://github.com/facebook/create-react-app/issues/3722
もしwebpackの設定ファイルにアクセスできる場合、webpackにraw-loaderというパッケージがあるので、mdファイルの場合にそれを介してやると、簡単にファイルの中身を読み込める。
私はこうしておいた
fetchAPIを使って非同期で取得するのも手段の一つ。
理由を失念したが、私はそれについては不採用。
https://stackoverflow.com/questions/42928530/how-do-i-load-a-markdown-file-into-a-react-component
イジェクトはしたくないし、webpackの設定取り出すパッケージも公式のものじゃないなら気が進まない。
ということで、前述の議論の内容をみて、紹介されていた中の一つであるraw.macroというパッケージを採用することに決定。
バンドルサイズが小さく、chunkファイルになるので、アプリ本体から切り離せるのがいい。
https://github.com/facebook/create-react-app/issues/3722#issuecomment-458124126
まとめ
CRAがmdファイルをサポートできていないのが意外だったので、簡単であるが経緯の記録としてまとめておいた。
もし将来mdファイルをサポートしたら、おそらくCRAの公式ドキュメントのこのページ、もしくは同階層に新しいページができて、そこに記述されると思われる。
https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files
各自の環境に適した方法で対処しておき、CRAが手段を提供するのを長い目で見守りましょう