create-react-appでTypeScript環境を構築したときにsourcemapを出力しない方法

Reactのテンプレートを作る方法にcreate-react-appがあります。

github.com

これを使うとcreate-react-appコマンドで簡単にテンプレートを作って、初期設定されているnpm scriptsでサーバー起動やビルドといったことが簡単にできるようになっています。

React+TypeScriptの環境を構築したい場合はどうするのかというとプロジェクト作成時のオプションで--scripts-version=react-scripts-tsを指定することでTypeScriptの環境を構築することができます。 github.com

プロジェクトのビルドをするために、初期で用意されているnpm scriptsを実行します。

$ yarn build

buildディレクトリ以下に成果物が作成されます。
jsディレクトリ配下を見るとsourcemapも作成されています。
開発中は便利なのですが、本番環境にデプロイするときはsourcemapは作成しなくていいので、作成しないためにはどうするのか調べてみました。

webpack.config.prod.js にてsourcemapの出力を制御するために、nodeの環境変数を読み込んでいる部分がありました。

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

参照:create-react-app-typescript/webpack.config.prod.js at master · wmonk/create-react-app-typescript · GitHub

package.jsonのscriptsでビルド実行時に環境変数を渡してあげることでsourcemapを出力せずにビルドすることができました。

npm scriptsを修正すると↓の用になると思います。

"build": "GENERATE_SOURCEMAP=false react-scripts-ts build"