diff --git a/.babelrc b/.babelrc index 41d0cf6cd..9ee969ab3 100644 --- a/.babelrc +++ b/.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"] + } ] - }] - } - } + }] + ] } } } diff --git a/package.json b/package.json index 6a38098b9..941d26f56 100644 --- a/package.json +++ b/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,17 +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.3.26", + "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", - "history": "1.17.0", "file-loader": "^0.8.5", + "history": "1.17.0", "hoist-non-react-statics": "^1.0.3", "http-proxy": "^1.12.0", "invariant": "^2.2.0", @@ -124,28 +140,26 @@ }, "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.4", "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.4", - "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", @@ -153,8 +167,8 @@ "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", diff --git a/server.babel.js b/server.babel.js index 849b5c9fa..c391a927f 100755 --- a/server.babel.js +++ b/server.babel.js @@ -12,4 +12,4 @@ try { console.error(err); } -require('babel-core/register')(config); +require('babel-register')(config); diff --git a/src/client.js b/src/client.js index d01c72dbf..758dd1f22 100755 --- a/src/client.js +++ b/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 createHistory from 'history/lib/createBrowserHistory'; diff --git a/src/config.js b/src/config.js index 4a9011e6e..7fccf62f8 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,4 @@ -require('babel/polyfill'); +require('babel-polyfill'); const environment = { development: { diff --git a/webpack/dev.config.js b/webpack/dev.config.js index 3627f7734..3176dae97 100755 --- a/webpack/dev.config.js +++ b/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'] diff --git a/webpack/prod.config.js b/webpack/prod.config.js index 7a610f649..ea8235391 100755 --- a/webpack/prod.config.js +++ b/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(),