こんばんは。また急に寒くなりましたね。ヒートテック必要やん。
CRAで作ったReactアプリケーションで複数のエントリポイントが欲しくなった場面があり、シンボリックリンクを貼って試したらうまくいったのでメモします。
react-scriptsではindex.tsx
がエントリーポイントとして固定されていますが、このファイルをシンボリックリンクにして、ビルド時やdevサーバー起動時に適宜別ファイルに変えています。
以下の例ではindex.form.tsx
とindex.viewer.tsx
の2つのエントリポイントを持ちます。
"scripts": {
"start:form": "yarn run prepare:form && react-scripts start",
"start:viewer": "yarn run prepare:viewer && react-scripts start",
"build:form": "yarn run prepare:form && react-scripts build",
"build:viewer": "yarn run prepare:viewer && react-scripts build",
"prepare:form": "cd src && ln -sf index.form.tsx index.tsx && cd ../",
"prepare:viewer": "cd src && ln -sf index.viewer.tsx index.tsx && cd ../",
// ...
}
ビルドもdevサーバー起動もこれでできますし今のところは問題は出ていません。ですが、同時に2種類にビルドしたりdevサーバーを起動したりはできません。また、Windowsだと別のコマンドの書き換えが必要だと思いますし、gitにシンボリックリンクを載せて良いのかは謎です