[changed] Use webpack instead of Browserify

Closes remix-run#625
Closes remix-run#608

Author: mjackson

CONTRIBUTING.md

@@ -34,11 +34,9 @@ always be in sync.
 
 ### Development
 
-- `scripts/test` will fire up a karma runner and watch for changes in the
-  specs directory.
-- `npm test` will do the same but doesn't watch, just runs the tests.
+- `npm test` will fire up a karma test runner and watch for changes
 - `npm run examples` fires up a webpack dev server that will watch
-  for changes and build the examples.
+  for changes and build the examples
 
 ### Build
 

examples/webpack.config.js

@@ -0,0 +1,48 @@
+var fs = require('fs');
+var path = require('path');
+var webpack = require('webpack');
+
+function isDirectory(dir) {
+  return fs.lstatSync(dir).isDirectory();
+}
+
+module.exports = {
+
+  devtool: 'inline-source-map',
+
+  entry: fs.readdirSync(__dirname).reduce(function (entries, dir) {
+    var isDraft = dir.charAt(0) === '_';
+
+    if (!isDraft && isDirectory(path.join(__dirname, dir)))
+      entries[dir] = path.join(__dirname, dir, 'app.js');
+
+    return entries;
+  }, {}),
+
+  output: {
+    path: 'examples/__build__',
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    publicPath: '/__build__/'
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, loader: 'jsx-loader?harmony' }
+    ]
+  },
+
+  resolve: {
+    alias: {
+      'react-router': '../../modules'
+    }
+  },
+
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin('shared.js'),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+    })
+  ]
+
+};

karma.conf.js

@@ -1,41 +1,39 @@
+var webpack = require('webpack');
+
 module.exports = function (config) {
   config.set({
 
-    basePath: '',
+    browsers: [ process.env.CONTINUOUS_INTEGRATION ? 'Firefox' : 'Chrome' ],
+
+    singleRun: process.env.CONTINUOUS_INTEGRATION === 'true',
 
-    frameworks: [ 'mocha', 'browserify' ],
+    frameworks: [ 'mocha' ],
 
     files: [
-      'modules/**/__tests__/*-test.js'
+      'tests.webpack.js'
     ],
 
     preprocessors: {
-      'modules/**/__tests__/*-test.js': [ 'browserify' ]
+      'tests.webpack.js': [ 'webpack', 'sourcemap' ]
     },
 
-    browserify: {
-      debug: true,
-      watch: true,
-      transform: [
-        [ 'reactify', { 'es6': true } ],
-        'envify'
+    webpack: {
+      devtool: 'inline-source-map',
+      module: {
+        loaders: [
+          { test: /\.js$/, loader: 'jsx-loader?harmony' }
+        ]
+      },
+      plugins: [
+        new webpack.DefinePlugin({
+          'process.env.NODE_ENV': JSON.stringify('test')
+        })
       ]
     },
 
-    reporters: [ 'progress' ],
-
-    port: 9876,
-
-    colors: true,
-
-    logLevel: config.LOG_INFO,
-
-    autoWatch: true,
-
-    browsers: [ 'Chrome' ],
-
-    captureTimeout: 60000,
+    webpackServer: {
+      noInfo: true
+    }
 
-    singleRun: false
   });
 };

package.json

@@ -13,39 +13,36 @@
     "example": "examples"
   },
   "scripts": {
-    "examples": "webpack-dev-server --inline --no-info --content-base examples",
-    "test": "scripts/test --browsers Firefox --single-run",
-    "lint": "jsxhint examples modules"
-
+    "build": "webpack modules/index.js dist/react-router.js",
+    "build-min": "uglifyjs dist/react-router.js --compress warnings=false > dist/react-router.min.js",
+    "examples": "webpack-dev-server --config examples/webpack.config.js --no-info --content-base examples",
+    "test": "jsxhint . && karma start"
   },
   "authors": [
     "Ryan Florence",
     "Michael Jackson"
   ],
   "license": "MIT",
   "devDependencies": {
-    "browserify": "4.2.3",
-    "browserify-shim": "3.6.0",
-    "bundle-loader": "0.5.1",
-    "envify": "1.2.0",
+    "bundle-loader": "^0.5.2",
     "events": "1.0.2",
-    "expect": "0.1.1",
-    "jsx-loader": "0.12.0",
+    "expect": "^1.1.0",
+    "jsx-loader": "^0.12.2",
     "jsxhint": "^0.8.1",
-    "karma": "0.12.16",
-    "karma-browserify": "1.0.0",
-    "karma-chrome-launcher": "0.1.4",
+    "karma": "^0.12.28",
+    "karma-chrome-launcher": "^0.1.7",
     "karma-cli": "0.0.4",
-    "karma-firefox-launcher": "0.1.3",
-    "karma-mocha": "0.1.3",
-    "mocha": "1.20.1",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-mocha": "^0.1.10",
+    "karma-sourcemap-loader": "^0.3.2",
+    "karma-webpack": "^1.3.1",
+    "mocha": "^2.0.1",
     "react": "0.12.x",
-    "reactify": "0.15.x",
     "rf-release": "0.4.0",
     "rx": "2.3.18",
-    "uglify-js": "2.4.15",
-    "webpack": "1.4.5",
-    "webpack-dev-server": "1.6.5"
+    "uglify-js": "^2.4.16",
+    "webpack": "^1.4.13",
+    "webpack-dev-server": "^1.6.6"
   },
   "peerDependencies": {
     "react": "0.12.x"
@@ -65,8 +62,5 @@
     "route",
     "routes",
     "router"
-  ],
-  "browserify-shim": {
-    "react": "global:React"
-  }
-}
+  ]
+}

scripts/build

@@ -1,7 +1,5 @@
 #!/bin/sh
-mkdir -p dist
-NODE_ENV=production node_modules/.bin/browserify modules/index.js -t browserify-shim -t envify --detect-globals false -s ReactRouter > dist/react-router.js
-node_modules/.bin/uglifyjs dist/react-router.js --compress warnings=false > dist/react-router.min.js
+npm run build
+npm run build-min
 echo "gzipped, the global build is:"
 echo "`gzip -c dist/react-router.min.js | wc -c` bytes"
-

scripts/test

@@ -0,0 +1,2 @@
+var context = require.context('./modules', true, /-test\.js$/);
+context.keys().forEach(context);

tests.webpack.js

@@ -1,44 +1,16 @@
-var fs = require('fs');
-var path = require('path');
 var webpack = require('webpack');
 
-var EXAMPLES_DIR = path.resolve(__dirname, 'examples');
-
-function isDirectory(dir) {
-  return fs.lstatSync(dir).isDirectory();
-}
-
 module.exports = {
 
-  entry: fs.readdirSync(EXAMPLES_DIR).reduce(function (entries, dir) {
-    var isDraft = dir.charAt(0) === '_';
-
-    if (!isDraft && isDirectory(path.join(EXAMPLES_DIR, dir)))
-      entries[dir] = path.join(EXAMPLES_DIR, dir, 'app.js');
-
-    return entries;
-  }, {}),
-
   output: {
-    filename: '[name].js',
-    chunkFilename: '[id].chunk.js',
-    publicPath: '__build__'
-  },
-
-  module: {
-    loaders: [
-      { test: /\.js$/, loader: 'jsx-loader?harmony' }
-    ]
-  },
-
-  resolve: {
-    alias: {
-      'react-router': '../../modules/index'
-    }
+    library: 'ReactRouter',
+    libraryTarget: 'var'
   },
 
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin('shared.js')
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
+    })
   ]
-
+  
 };