Merge pull request #935 from josmardias/babel-6_

Update to Babel 6 (replaces #778)

Author: quicksnap

.babelrc

@@ -1,26 +1,25 @@
 {
-  "stage": 0,
-  "optional": "runtime",
-  "loose": "all",
+  "presets": ["react", "es2015", "stage-0"],
+
   "plugins": [
-    "typecheck"
+    "transform-runtime",
+    "add-module-exports",
+    "transform-decorators-legacy",
+    "transform-react-display-name"
   ],
+
   "env": {
     "development": {
       "plugins": [
-        "react-transform"
-      ],
-      "extra": {
-        "react-transform": {
-          "transforms": [{
-            "transform": "react-transform-catch-errors",
-            "imports": [
-              "react",
-              "redbox-react"
+        "typecheck",
+        ["react-transform", {
+            "transforms": [{
+                "transform": "react-transform-catch-errors",
+                "imports": ["react", "redbox-react"]
+              }
             ]
-          }]
-        }
-      }
+        }]
+      ]
     }
   }
 }

package.json

@@ -27,8 +27,8 @@
     "start": "concurrent --kill-others \"npm run start-prod\" \"npm run start-prod-api\"",
     "start-prod": "better-npm-run start-prod",
     "start-prod-api": "better-npm-run start-prod-api",
-    "build": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js",
-    "postinstall": "webpack --display-error-details --config webpack/prod.config.js",
+    "build": "better-npm-run build",
+    "postinstall": "npm run build",
     "lint": "eslint -c .eslintrc src api",
     "start-dev": "better-npm-run start-dev",
     "start-dev-api": "better-npm-run start-dev-api",
@@ -79,16 +79,33 @@
         "UV_THREADPOOL_SIZE": 100,
         "NODE_PATH": "./src"
       }
+    },
+    "build": {
+      "command": "webpack --verbose --colors --display-error-details --config webpack/prod.config.js",
+      "env": {
+        "NODE_ENV": "production"
+      }
     }
   },
   "dependencies": {
-    "babel": "~5.8.29",
-    "babel-plugin-typecheck": "^2.0.0",
+    "babel-core": "^6.5.2",
+    "babel-loader": "^6.2.1",
+    "babel-plugin-add-module-exports": "^0.1.2",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-react-display-name": "^6.3.13",
+    "babel-plugin-transform-runtime": "^6.3.13",
+    "babel-polyfill": "^6.3.14",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "babel-register": "^6.3.13",
+    "babel-runtime": "^6.3.19",
     "body-parser": "^1.14.1",
     "compression": "^1.6.0",
     "express": "^4.13.3",
     "express-session": "^1.12.1",
     "file-loader": "^0.8.5",
+    "hoist-non-react-statics": "^1.0.3",
     "http-proxy": "^1.12.0",
     "invariant": "^2.2.0",
     "less": "^2.5.3",
@@ -122,37 +139,35 @@
   },
   "devDependencies": {
     "autoprefixer-loader": "^3.1.0",
-    "babel-core": "~5.8.33",
-    "babel-eslint": "^4.1.3",
-    "babel-loader": "~5.3.3",
-    "babel-plugin-react-transform": "~1.1.1",
-    "babel-runtime": "~5.8.29",
+    "babel-eslint": "^5.0.0-beta6",
+    "babel-plugin-react-transform": "^2.0.0",
+    "babel-plugin-typecheck": "^3.6.0",
     "better-npm-run": "^0.0.4",
     "bootstrap-sass": "^3.3.5",
     "bootstrap-sass-loader": "^1.0.9",
     "chai": "^3.3.0",
+    "clean-webpack-plugin": "^0.1.6",
     "concurrently": "^0.1.1",
+    "css-loader": "^0.23.1",
     "eslint": "1.10.3",
     "eslint-config-airbnb": "0.1.0",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-import": "^0.8.0",
     "eslint-plugin-react": "^3.5.0",
-    "clean-webpack-plugin": "^0.1.6",
-    "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^0.9.1",
     "font-awesome": "^4.4.0",
     "font-awesome-webpack": "0.0.4",
-    "karma": "^0.13.10",
     "json-loader": "^0.5.4",
+    "karma": "^0.13.10",
     "karma-cli": "^0.1.1",
     "karma-mocha": "^0.2.0",
     "karma-mocha-reporter": "^1.1.1",
     "karma-phantomjs-launcher": "^0.2.1",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^1.7.0",
     "mocha": "^2.3.3",
-    "phantomjs": "^1.9.18",
     "node-sass": "^3.4.2",
+    "phantomjs": "^1.9.18",
     "phantomjs-polyfill": "0.0.1",
     "react-a11y": "^0.2.6",
     "react-addons-test-utils": "^0.14.0",

server.babel.js

@@ -12,4 +12,4 @@ try {
   console.error(err);
 }
 
-require('babel-core/register')(config);
+require('babel-register')(config);

src/client.js

@@ -1,7 +1,7 @@
 /**
  * THIS IS THE ENTRY POINT FOR THE CLIENT, JUST LIKE server.js IS THE ENTRY POINT FOR THE SERVER.
  */
-import 'babel/polyfill';
+import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import createStore from './redux/create';

src/config.js

@@ -1,4 +1,4 @@
-require('babel/polyfill');
+require('babel-polyfill');
 
 const environment = {
   development: {

webpack/dev.config.js

@@ -1,10 +1,9 @@
-require('babel/polyfill');
+require('babel-polyfill');
 
 // Webpack config for development
 var fs = require('fs');
 var path = require('path');
 var webpack = require('webpack');
-var WebpackIsomorphicTools = require('webpack-isomorphic-tools');
 var assetsPath = path.resolve(__dirname, '../static/dist');
 var host = (process.env.HOST || 'localhost');
 var port = parseInt(process.env.PORT) + 1 || 3001;
@@ -23,23 +22,40 @@ try {
   console.error(err);
 }
 
+
 var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
-var babelLoaderQuery = Object.assign({}, babelrcObject, babelrcObjectDevelopment);
+
+// merge global and dev-only plugins
+var combinedPlugins = babelrcObject.plugins || [];
+combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);
+
+var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
 delete babelLoaderQuery.env;
 
+// Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add
+// the babel plugin react-transform-hmr manually here.
+
+// make sure react-transform is enabled
 babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
-if (babelLoaderQuery.plugins.indexOf('react-transform') < 0) {
-  babelLoaderQuery.plugins.push('react-transform');
+var reactTransform = null;
+for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
+  var plugin = babelLoaderQuery.plugins[i];
+  if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
+    reactTransform = plugin;
+  }
 }
 
-babelLoaderQuery.extra = babelLoaderQuery.extra || {};
-if (!babelLoaderQuery.extra['react-transform']) {
-  babelLoaderQuery.extra['react-transform'] = {};
+if (!reactTransform) {
+  reactTransform = ['react-transform', {transforms: []}];
+  babelLoaderQuery.plugins.push(reactTransform);
 }
-if (!babelLoaderQuery.extra['react-transform'].transforms) {
-  babelLoaderQuery.extra['react-transform'].transforms = [];
+
+if (!reactTransform[1] || !reactTransform[1].transforms) {
+  reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
 }
-babelLoaderQuery.extra['react-transform'].transforms.push({
+
+// make sure react-transform-hmr is enabled
+reactTransform[1].transforms.push({
   transform: 'react-transform-hmr',
   imports: ['react'],
   locals: ['module']

webpack/prod.config.js

@@ -1,4 +1,4 @@
-require('babel/polyfill');
+require('babel-polyfill');
 
 // Webpack config for creating the production bundle.
 var path = require('path');
@@ -58,6 +58,10 @@ module.exports = {
     // css files from the extract-text-plugin loader
     new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
     new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      },
+
       __CLIENT__: true,
       __SERVER__: false,
       __DEVELOPMENT__: false,
@@ -67,14 +71,6 @@ module.exports = {
     // ignore dev config
     new webpack.IgnorePlugin(/\.\/dev/, /\/config$/),
 
-    // set global vars
-    new webpack.DefinePlugin({
-      'process.env': {
-        // Useful to reduce the size of client-side libraries, e.g. react
-        NODE_ENV: JSON.stringify('production')
-      }
-    }),
-
     // optimizations
     new webpack.optimize.DedupePlugin(),
     new webpack.optimize.OccurenceOrderPlugin(),