create-react-appでTypeScript環境を構築したときにsourcemapを出力しない方法
Reactのテンプレートを作る方法にcreate-react-app
があります。
これを使うと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';
package.jsonのscriptsでビルド実行時に環境変数を渡してあげることでsourcemap
を出力せずにビルドすることができました。
npm scripts
を修正すると↓の用になると思います。
"build": "GENERATE_SOURCEMAP=false react-scripts-ts build"