react-scriptsで複数のエントリポイントを作る

こんばんは。また急に寒くなりましたね。ヒートテック必要やん。

CRAで作ったReactアプリケーションで複数のエントリポイントが欲しくなった場面があり、シンボリックリンクを貼って試したらうまくいったのでメモします。

react-scriptsではindex.tsxがエントリーポイントとして固定されていますが、このファイルをシンボリックリンクにして、ビルド時やdevサーバー起動時に適宜別ファイルに変えています。

以下の例ではindex.form.tsxindex.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にシンボリックリンクを載せて良いのかは謎です

tech  React 

See also