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

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

　やりたいこと

<div class="myButton">
</div>

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

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

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

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

この出力モードの中に umd があり、umd で出力すると、window　以下に展開されます。
この出力ができたら、script タグから参照することができるようになる、というわけです。

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

優しそうな顔してなかなかストイックなかたで、CRA に無駄な機能を増やさないようにしているようです。
この姿勢にはとても共感がもてます。
カスタマイズしたければ reject すればいいっていう割り切りがとても素晴らしいです。

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

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

こちらを使うと commonjs 形式で index.js 以外のエントリーを追加してビルドができます。
ただ commonjs のみの出力で、css などは出力してくれませんでした。

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

README 参照（手抜き）