Fix examples to work standalone

Author: gaearon

docs/introduction/Examples.md

@@ -1,26 +1,9 @@
 # Examples
 
-Redux is distributed with a few examples in its [source code](https://github.com/rackt/redux/tree/master/examples).  
-**To run any of them, clone the repo and run `npm install` both in the root and the example folder.**
+Redux is distributed with a few examples in its [source code](https://github.com/rackt/redux/tree/master/examples).
 
 >##### Note on Copying
->If you copy Redux examples outside their folders, remove these lines from their `webpack.config.js`:
->
->```js
->alias: {
->   'redux': path.join(__dirname, '..', '..', 'src')
->},
->```
->and
->```js
->{
->   test: /\.js$/,
->   loaders: ['babel'],
->   include: path.join(__dirname, '..', '..', 'src')
->},
-```
->
-> Otherwise they’ll try to resolve Redux to a relative `src` folder, and the build will fail.
+>If you copy Redux examples outside their folders, you can delete some lines at the end of their `webpack.config.js` files. They follow a “You can safely delete these lines in your project.” comment.
 
 ## Counter
 
@@ -29,13 +12,10 @@ Run the [Counter](https://github.com/rackt/redux/tree/master/examples/counter) e
 ```
 git clone https://github.com/rackt/redux.git
 
-cd redux
-npm install
-
-cd examples/counter
+cd redux/examples/counter
 npm install
-
 npm start
+
 open http://localhost:3000/
 ```
 
@@ -51,13 +31,10 @@ Run the [TodoMVC](https://github.com/rackt/redux/tree/master/examples/todomvc) e
 ```
 git clone https://github.com/rackt/redux.git
 
-cd redux
+cd redux/examples/todomvc
 npm install
-
-cd examples/todomvc
-npm install
-
 npm start
+
 open http://localhost:3000/
 ```
 
@@ -74,13 +51,10 @@ Run the [Async](https://github.com/rackt/redux/tree/master/examples/async) examp
 ```
 git clone https://github.com/rackt/redux.git
 
-cd redux
+cd redux/examples/async
 npm install
-
-cd examples/async
-npm install
-
 npm start
+
 open http://localhost:3000/
 ```
 
@@ -97,13 +71,10 @@ Run the [Real World](https://github.com/rackt/redux/tree/master/examples/real-wo
 ```
 git clone https://github.com/rackt/redux.git
 
-cd redux
+cd redux/examples/real-world
 npm install
-
-cd examples/real-world
-npm install
-
 npm start
+
 open http://localhost:3000/
 ```
 

examples/async/webpack.config.js

@@ -17,22 +17,29 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
-  resolve: {
-    alias: {
-      'redux': path.join(__dirname, '..', '..', 'src')
-    },
-    extensions: ['', '.js']
-  },
   module: {
     loaders: [{
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       exclude: /node_modules/,
       include: __dirname
-    }, {
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: path.join(__dirname, '..', '..', 'src')
     }]
   }
 };
+
+
+// When inside Redux repo, prefer src to compiled version.
+// You can safely delete these lines in your project.
+var reduxSrc = path.join(__dirname, '..', '..', 'src');
+var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules');
+var fs = require('fs');
+if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {
+  // Resolve Redux to source
+  module.exports.resolve = { alias: { 'redux': reduxSrc } };
+  // Compile Redux from source
+  module.exports.module.loaders.push({
+    test: /\.js$/,
+    loaders: ['babel'],
+    include: reduxSrc
+  });
+}

examples/counter/package.json

@@ -4,7 +4,7 @@
   "description": "Redux counter example",
   "scripts": {
     "start": "node server.js",
-    "test": "mocha --recursive --compilers js:babel/register",
+    "test": "mocha --recursive --compilers js:babel-core/register",
     "test:watch": "npm test -- --watch"
   },
   "repository": {

examples/counter/webpack.config.js

@@ -17,22 +17,28 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
-  resolve: {
-    alias: {
-      'redux': path.join(__dirname, '..', '..', 'src')
-    },
-    extensions: ['', '.js']
-  },
   module: {
     loaders: [{
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       exclude: /node_modules/,
       include: __dirname
-    }, {
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: path.join(__dirname, '..', '..', 'src')
     }]
   }
 };
+
+// When inside Redux repo, prefer src to compiled version.
+// You can safely delete these lines in your project.
+var reduxSrc = path.join(__dirname, '..', '..', 'src');
+var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules');
+var fs = require('fs');
+if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {
+  // Resolve Redux to source
+  module.exports.resolve = { alias: { 'redux': reduxSrc } };
+  // Compile Redux from source
+  module.exports.module.loaders.push({
+    test: /\.js$/,
+    loaders: ['babel'],
+    include: reduxSrc
+  });
+}

examples/real-world/webpack.config.js

@@ -17,22 +17,29 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
-  resolve: {
-    alias: {
-      'redux': path.join(__dirname, '..', '..', 'src')
-    },
-    extensions: ['', '.js']
-  },
   module: {
     loaders: [{
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       exclude: /node_modules/,
       include: __dirname
-    }, {
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: path.join(__dirname, '..', '..', 'src')
     }]
   }
 };
+
+
+// When inside Redux repo, prefer src to compiled version.
+// You can safely delete these lines in your project.
+var reduxSrc = path.join(__dirname, '..', '..', 'src');
+var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules');
+var fs = require('fs');
+if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {
+  // Resolve Redux to source
+  module.exports.resolve = { alias: { 'redux': reduxSrc } };
+  // Compile Redux from source
+  module.exports.module.loaders.push({
+    test: /\.js$/,
+    loaders: ['babel'],
+    include: reduxSrc
+  });
+}

examples/todomvc/package.json

@@ -4,7 +4,7 @@
   "description": "Redux TodoMVC example",
   "scripts": {
     "start": "node server.js",
-    "test": "mocha --recursive --compilers js:babel/register",
+    "test": "mocha --recursive --compilers js:babel-core/register",
     "test:watch": "npm test -- --watch"
   },
   "repository": {

examples/todomvc/webpack.config.js

@@ -17,26 +17,33 @@ module.exports = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
   ],
-  resolve: {
-    alias: {
-      'redux': path.join(__dirname, '..', '..', 'src')
-    },
-    extensions: ['', '.js']
-  },
   module: {
     loaders: [{
       test: /\.js$/,
       loaders: ['react-hot', 'babel'],
       exclude: /node_modules/,
       include: __dirname
-    }, {
-      test: /\.js$/,
-      loaders: ['babel'],
-      include: path.join(__dirname, '..', '..', 'src')
     }, {
       test: /\.css?$/,
       loaders: ['style', 'raw'],
       include: __dirname
     }]
   }
 };
+
+
+// When inside Redux repo, prefer src to compiled version.
+// You can safely delete these lines in your project.
+var reduxSrc = path.join(__dirname, '..', '..', 'src');
+var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules');
+var fs = require('fs');
+if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) {
+  // Resolve Redux to source
+  module.exports.resolve = { alias: { 'redux': reduxSrc } };
+  // Compile Redux from source
+  module.exports.module.loaders.push({
+    test: /\.js$/,
+    loaders: ['babel'],
+    include: reduxSrc
+  });
+}