chore(*): setup hot reload for react / with babel6

Using the following:
* babel-plugin-react-transform - https://github.com/gaearon/babel-plugin-react-transform
* react-transform-hmr - https://github.com/gaearon/react-transform-hmr

Most of the work is in the .babelrc

Note: Any task running babel loaders (most likely builds, dev server, tests) will run with HMR on if NODE_ENV is not set or set to 'development', so if you have the following error, you may have to pass NODE_ENV=production NODE_ENV=mock (according to the use case):

Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

.babelrc

@@ -1,4 +1,20 @@
 {
   "presets": ["es2015", "react"],
-  "plugins": ["transform-class-properties", "transform-es2015-destructuring", "transform-object-rest-spread", "add-module-exports"]
+  "plugins": ["transform-class-properties", "transform-es2015-destructuring", "transform-object-rest-spread", "add-module-exports"],
+  "env": {
+    // only enable it when process.env.NODE_ENV is 'development' or undefined
+    "development": {
+      "plugins": [["react-transform", {
+        "transforms": [{
+          "transform": "react-transform-hmr",
+          // if you use React Native, pass "react-native" instead:
+          "imports": ["react"],
+          // this is important for Webpack HMR:
+          "locals": ["module"]
+        }]
+        // note: you can put more transforms into array
+        // this is just one of them!
+      }]]
+    }
+  }
 }

package.json

@@ -8,15 +8,15 @@
     "postinstall": "npm run webdriver-manager-update",
     "test": "npm run lint && npm run unit-test",
     "test-build": "./bin/test-build.sh",
-    "unit-test": "mocha 'test/unit/**/*.js' --compilers js:babel-core/register --recursive --require ./test/unit/setup.js",
+    "unit-test": "NODE_ENV=mock mocha 'test/unit/**/*.js' --compilers js:babel-core/register --recursive --require ./test/unit/setup.js",
     "unit-test-watch": "npm run lint-watch & npm run unit-test -- --watch",
     "test-e2e": "./node_modules/.bin/protractor protractor.config.js",
     "lint": "./node_modules/.bin/eslint --ext .js --ext .jsx src test",
     "lint-watch": "./node_modules/.bin/esw --watch --ext .js --ext .jsx src test",
     "clean-dist": "node ./bin/clean-dist.js",
     "serve-build": "echo 'Serving distribution folder build/dist' && npm run serve-dist",
     "serve-dist": "./node_modules/.bin/serve build/dist",
-    "build": "npm run clean-dist && npm run webpack-build",
+    "build": "npm run clean-dist && NODE_ENV=production OPTIMIZE=false DEVTOOLS=true SHOW_DEVTOOLS=false npm run webpack-build",
     "build-prod": "npm run clean-dist && NODE_ENV=production npm run webpack-build-prod",
     "build-prod-owner": "API_ROOT_URL='https://topheman-apis-proxy.herokuapp.com/github' npm run build-prod",
     "build-prod-all": "DEVTOOLS=false npm run build-prod && NODE_ENV=production OPTIMIZE=false DEVTOOLS=true DIST_DIR=dist/devtools npm run webpack-build",
@@ -55,6 +55,7 @@
     "babel-eslint": "^5.0.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-add-module-exports": "^0.1.2",
+    "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-plugin-transform-es2015-destructuring": "^6.6.5",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
@@ -86,6 +87,7 @@
     "pre-commit": "^1.1.2",
     "protractor": "^3.0.0",
     "react-addons-test-utils": "^0.14.7",
+    "react-transform-hmr": "^1.0.4",
     "sass-loader": "^3.1.2",
     "serve": "^1.4.0",
     "style-loader": "^0.13.0",

webpack.config.js

@@ -44,6 +44,11 @@ if (/^\w+/.test(DIST_DIR) === false || /\/$/.test(DIST_DIR) === true) { // @todo
 }
 
 log.info('webpack', `${NODE_ENV.toUpperCase()} mode`);
+if (NODE_ENV === 'development') {
+  // react-transform-hmr is activated is development mode - in some use case you may not need it -> specify a NODE_ENV
+  // don't add the plugin `new webpack.HotModuleReplacementPlugin()` with the --hot flag
+  log.info('webpack', 'HOT RELOAD: activated');
+}
 if (DEVTOOLS) {
   log.info('webpack', 'DEVTOOLS active');
 }