commit 36ce24c2b0b7c079fa0d75a90065f3dde3374cab
parent e5637864705685fc5d55153a44af8aa9faa1a4e8
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Fri, 2 Oct 2015 08:52:53 +0300
Merge PR271#: Replace React Hot Loader with React Transform
Diffstat:
4 files changed, 70 insertions(+), 35 deletions(-)
diff --git a/package.json b/package.json
@@ -7,11 +7,11 @@
},
"dependencies": {
"babel": "5.8.23",
- "classnames": "2.1.4",
+ "classnames": "2.1.5",
"eventemitter3": "1.1.1",
"express": "4.13.3",
"fastclick": "1.0.6",
- "fbjs": "0.2.1",
+ "fbjs": "0.3.1",
"flux": "2.1.1",
"front-matter": "1.0.0",
"history": "1.11.1",
@@ -27,6 +27,7 @@
"autoprefixer": "^6.0.3",
"babel-eslint": "^4.1.3",
"babel-loader": "^5.3.2",
+ "babel-plugin-react-transform": "^1.1.1",
"browser-sync": "^2.9.7",
"css-loader": "^0.19.0",
"csscomb": "^3.1.8",
@@ -35,6 +36,7 @@
"eslint-config-airbnb": "0.1.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.5.0",
+ "file-loader": "^0.8.4",
"gaze": "^0.5.1",
"git-repository": "^0.1.1",
"glob": "^5.0.15",
@@ -49,7 +51,9 @@
"postcss-loader": "^0.6.0",
"postcss-nested": "^1.0.0",
"psi": "^1.0.6",
- "react-hot-loader": "^1.3.0",
+ "react-transform-catch-errors": "^1.0.0",
+ "react-transform-hmr": "^1.0.1",
+ "redbox-react": "^1.1.1",
"replace": "^0.3.0",
"style-loader": "^0.12.4",
"url-loader": "^0.5.6",
diff --git a/src/app.js b/src/app.js
@@ -28,7 +28,7 @@ const context = {
};
function render(state) {
- Router.dispatch(state, (_, component) => {
+ Router.dispatch(state, (newState, component) => {
ReactDOM.render(component, appContainer, () => {
// Restore the scroll position if it was saved into the state
if (state.scrollY !== undefined) {
diff --git a/tools/config.js b/tools/config.js
@@ -8,7 +8,7 @@
*/
import path from 'path';
-import webpack, { DefinePlugin, BannerPlugin } from 'webpack';
+import webpack from 'webpack';
import merge from 'lodash.merge';
const DEBUG = !process.argv.includes('release');
@@ -28,6 +28,14 @@ const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
__DEV__: DEBUG,
};
+const JS_LOADER = {
+ test: /\.jsx?$/,
+ include: [
+ path.resolve(__dirname, '../node_modules/react-routing/src'),
+ path.resolve(__dirname, '../src'),
+ ],
+ loader: 'babel-loader',
+};
//
// Common configuration chunk to be used for both
@@ -66,13 +74,6 @@ const config = {
module: {
loaders: [
{
- test: /\.jsx?$/,
- include: [
- path.resolve(__dirname, '../node_modules/react-routing/src'),
- path.resolve(__dirname, '../src'),
- ],
- loaders: [...(WATCH && ['react-hot']), 'babel-loader'],
- }, {
test: /\.json$/,
loader: 'json-loader',
}, {
@@ -94,7 +95,7 @@ const config = {
onImport: files => files.forEach(this.addDependency),
}),
require('postcss-nested')(),
- require('postcss-cssnext')({autoprefixer: AUTOPREFIXER_BROWSERS}),
+ require('postcss-cssnext')({ autoprefixer: AUTOPREFIXER_BROWSERS }),
];
},
};
@@ -105,29 +106,60 @@ const config = {
const appConfig = merge({}, config, {
entry: [
- ...(WATCH && ['webpack-hot-middleware/client']),
+ ...(WATCH ? ['webpack-hot-middleware/client'] : []),
'./src/app.js',
],
output: {
path: path.join(__dirname, '../build/public'),
filename: 'app.js',
},
- devtool: DEBUG ? 'source-map' : false,
+
+ // Choose a developer tool to enhance debugging
+ // http://webpack.github.io/docs/configuration.html#devtool
+ devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
plugins: [
...config.plugins,
- new DefinePlugin(GLOBALS),
- ...(!DEBUG && [
+ new webpack.DefinePlugin(GLOBALS),
+ ...(!DEBUG ? [
new webpack.optimize.DedupePlugin(),
- new webpack.optimize.UglifyJsPlugin({compress: {warnings: VERBOSE}}),
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: VERBOSE,
+ },
+ }),
new webpack.optimize.AggressiveMergingPlugin(),
- ]),
- ...(WATCH && [
+ ] : []),
+ ...(WATCH ? [
new webpack.HotModuleReplacementPlugin(),
- ]),
+ new webpack.NoErrorsPlugin(),
+ ] : []),
],
module: {
loaders: [
- ...config.module.loaders, {
+ WATCH ? {
+ ...JS_LOADER,
+ query: {
+ // Wraps all React components into arbitrary transforms
+ // https://github.com/gaearon/babel-plugin-react-transform
+ plugins: ['react-transform'],
+ extra: {
+ 'react-transform': {
+ transforms: [
+ {
+ transform: 'react-transform-hmr',
+ imports: ['react'],
+ locals: ['module'],
+ }, {
+ transform: 'react-transform-catch-errors',
+ imports: ['react', 'redbox-react'],
+ },
+ ],
+ },
+ },
+ },
+ } : JS_LOADER,
+ ...config.module.loaders,
+ {
test: /\.css$/,
loader: 'style-loader/useable!css-loader!postcss-loader',
},
@@ -164,16 +196,18 @@ const serverConfig = merge({}, config, {
__filename: false,
__dirname: false,
},
- devtool: DEBUG ? 'source-map' : 'cheap-module-source-map',
+ devtool: 'source-map',
plugins: [
...config.plugins,
- new DefinePlugin(GLOBALS),
- new BannerPlugin('require("source-map-support").install();',
+ new webpack.DefinePlugin(GLOBALS),
+ new webpack.BannerPlugin('require("source-map-support").install();',
{ raw: true, entryOnly: false }),
],
module: {
loaders: [
- ...config.module.loaders, {
+ JS_LOADER,
+ ...config.module.loaders,
+ {
test: /\.css$/,
loader: 'css-loader!postcss-loader',
},
diff --git a/tools/start.js b/tools/start.js
@@ -14,8 +14,8 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
import task from './lib/task';
global.WATCH = true;
-const config = require('./config')[0]; // Client-side bundle configuration
-const bundler = webpack(config);
+const webpackConfig = require('./config')[0]; // Client-side bundle configuration
+const bundler = webpack(webpackConfig);
/**
* Launches a development web server with "live reload" functionality -
@@ -34,15 +34,12 @@ export default task('start', async () => {
webpackDevMiddleware(bundler, {
// IMPORTANT: dev middleware can't access config, so we should
// provide publicPath by ourselves
- publicPath: config.output.publicPath,
+ publicPath: webpackConfig.output.publicPath,
- // pretty colored output
- stats: config.stats,
+ // Pretty colored output
+ stats: webpackConfig.stats,
- hot: true,
- historyApiFallback: true,
-
- // for other settings see
+ // For other settings see
// http://webpack.github.io/docs/webpack-dev-middleware.html
}),
