daily-dev.net

React, firebase, 機械学習など

React - production環境でconsole.logなどの出力を消す

sponsored

f:id:serendipity4u:20181002170351p:plain

このためには、webpackのコンパイル設定を手動で変えられるようにする必要がある。 package.jsonのscriptsに

    "eject": "react-scripts eject"

を追加して、

npm run ejectを走らせる。

f:id:serendipity4u:20181002170243p:plain

これは簡単のためcreate-react-appが隠蔽している、パッケージの依存関係や設定ファイルを書き出してくれるコマンド。

ejectする前に、commitし忘れているファイルがないか確認する。commitしていないと動かない。

さてこれを行うと configディレクトリが作成されてその中にwebpack.config.prod.jsがある

このなかの

    new webpack.optimize.UglifyJsPlugin({
    })

という箇所でconsole.logを表示しないように

  new webpack.optimize.UglifyJsPlugin({
      drop_console: true,
      compress: {
        drop_console: true,

drop_consoleオプションをtrueにしておく。

これで本番環境でデバッグ情報がでなくなった。