Edited at

Create React App で作成したコンポーネントを script タグから使う。

Create React App の便利さに甘えたいが、作りたいのは SPA ではなくライブラリという場合にどうしたらいいのか調べて挫折して自分でなんとかしたっていう記事です。


 やりたいこと

<div class="myButton">

</div>

<script>
ReactDOM.render(<MyButton/>, document.selector(".myButton"));
</script>

この MyButton を CRA で作成しマウント。

CRA は アプリケーションを丸々作ることを前提としているのでこれができないです。


Create React app で作成したコンポーネントをライブラリとして出力する

https://webpack.js.org/configuration/output/

webpack には library 出力モードが用意されています。

この出力モードの中に umd があり、umd で出力すると、window 以下に展開されます。

この出力ができたら、script タグから参照することができるようになる、というわけです。


Create React app のビルド設定のカスタマイズ

Create React app の出力をカスタマイズしたいみたいな issue が上がると Dan Abramov さんがどーんって現れて、こうしたらできる、そんなことしないよといって issue をバンバン閉じていきます。

スクリーンショット 2018-09-25 0.52.54.png

優しそうな顔してなかなかストイックなかたで、CRA に無駄な機能を増やさないようにしているようです。

この姿勢にはとても共感がもてます。

カスタマイズしたければ reject すればいいっていう割り切りがとても素晴らしいです。

やっぱり reject するとアップデートが大変なので困るっていう人はたくさんいて別プロジェクトでカスタマイズ可能な方法が作られています。


React App Rewired

react-app-rewired

こちらを使うと CRA の Webpack など設定を必要な箇所だけ上書きできるようになっています。


react-app-rewire-react-library

react-app-rewire-react-library

こちらを使うと commonjs 形式で index.js 以外のエントリーを追加してビルドができます。

ただ commonjs のみの出力で、css などは出力してくれませんでした。


 umd 形式で出力する方法

他に方法がなかったのでreact-app-rewire-react-libraryを folk して ライブラリのタイプの指定やcssなどを出力できるようにしました。

react-app-rewire-react-umd-library


使い方

README 参照(手抜き)