react で 「Warning: It looks like you're using a minified copy .....」のwarningを消す方法

warning内容

以下のwarningの消し方に結構詰まったので共有。

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

webpack か browserify を使っている場合だと、公式サイトに対応方法が書いてあるが、 grunt を使っていて、対処法が載っていなく困った。

その公式サイトはここ

facebook.github.io

要するにproduction 用のbuildをしろと言うことなので、 いろいろ調べた結果、grunt-env というプラグインをいれて設定すれば解決できた。

手順

1, grunt-envのインストール

npm install --save-dev grunt-env

2, gruntfile.js でタスクを読み込む

grunt.loadNpmTasks('grunt-env');

3, gruntfile.js に記述を追加

grunt.initConfig({

...

env: {
    production: {
        NODE_ENV: 'production'
    }
},

...

});

4, gruntfile.js でタスクを登録する

grunt.registerTask('default', ['env:production', 'browserify']);

browserifyのタスクの前に実行する必要がある。

これでgruntを動かし直したら production 用のビルドになり、warningが消えました。