build with webpack and babel instead of browserify

Author: mziwisky

examples/basic/app.js

@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var React = require('react');
 var ReactDOM = require('react-dom');
 var Menu = require('../../lib/index');

package.json

@@ -21,8 +21,11 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "browserify": "13.0.0",
-    "browserify-shim": "3.8.12",
+    "babel-core": "6.13.2",
+    "babel-loader": "6.2.4",
+    "babel-plugin-transform-object-rest-spread": "6.8.0",
+    "babel-preset-es2015": "6.13.2",
+    "babel-preset-react": "6.11.1",
     "envify": "3.4.0",
     "expect": "1.14.0",
     "jsx-loader": "0.13.2",
@@ -37,7 +40,6 @@
     "react": "^0.14.7",
     "react-addons-test-utils": "^0.14.7",
     "react-dom": "^0.14.7",
-    "reactify": "^1.1.1",
     "rf-release": "0.4.0",
     "uglify-js": "2.6.1",
     "webpack": "1.13.1",
@@ -57,14 +59,6 @@
     "menu",
     "dropdown"
   ],
-  "browserify-shim": {
-    "react": "global:React"
-  },
-  "browserify": {
-    "transform": [
-      "reactify"
-    ]
-  },
   "dependencies": {
     "js-stylesheet": "0.0.1"
   }

scripts/build

@@ -1,10 +1,5 @@
 #!/bin/sh
 mkdir -p dist
-NODE_ENV=production node_modules/.bin/browserify lib/index.js \
-  -t reactify \
-  -t browserify-shim \
-  -t envify \
-  --detect-globals false \
-  -s ReactMenu > dist/react-menu.js
+node_modules/.bin/webpack
 node_modules/.bin/uglifyjs dist/react-menu.js \
   --compress warnings=false > dist/react-menu.min.js

scripts/dev-examples

@@ -1,2 +1,2 @@
 #!/bin/sh
-node_modules/.bin/webpack-dev-server --inline --content-base examples/
+node_modules/.bin/webpack-dev-server --inline --config webpack.examples-config.js --content-base examples/

webpack.config.js

@@ -1,40 +1,25 @@
-var fs = require('fs');
-var path = require('path');
-
-var EXAMPLES_DIR = path.resolve(__dirname, 'examples');
-
-function isDirectory(dir) {
-  return fs.lstatSync(dir).isDirectory();
-}
-
-function buildEntries() {
-  return fs.readdirSync(EXAMPLES_DIR).reduce(function (entries, dir) {
-    if (dir === 'build')
-      return entries;
-
-    var isDraft = dir.charAt(0) === '_';
-
-    if (!isDraft && isDirectory(path.join(EXAMPLES_DIR, dir)))
-      entries[dir] = path.join(EXAMPLES_DIR, dir, 'app.js');
-
-    return entries;
-  }, {});
-}
-
 module.exports = {
-
-  entry: buildEntries(),
+  entry: {
+    'react-menu': './lib/index.js'
+  },
 
   output: {
+    library: "ReactMenu",
+    libraryTarget: "umd",
     filename: '[name].js',
-    chunkFilename: '[id].chunk.js',
-    path: 'examples/__build__',
-    publicPath: '/__build__/'
+    path: 'dist',
   },
 
   module: {
     loaders: [
-      { test: /\.(js|jsx)$/, loader: 'jsx-loader?harmony' }
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        query: {
+          presets: ['react', 'es2015'],
+          plugins: ['transform-object-rest-spread'],
+        },
+      }
     ]
   },
 };

webpack.examples-config.js

@@ -0,0 +1,47 @@
+var fs = require('fs');
+var path = require('path');
+
+var EXAMPLES_DIR = path.resolve(__dirname, 'examples');
+
+function isDirectory(dir) {
+  return fs.lstatSync(dir).isDirectory();
+}
+
+function buildEntries() {
+  return fs.readdirSync(EXAMPLES_DIR).reduce(function (entries, dir) {
+    if (dir === 'build')
+      return entries;
+
+    var isDraft = dir.charAt(0) === '_';
+
+    if (!isDraft && isDirectory(path.join(EXAMPLES_DIR, dir)))
+      entries[dir] = path.join(EXAMPLES_DIR, dir, 'app.js');
+
+    return entries;
+  }, {});
+}
+
+module.exports = {
+  entry: buildEntries(),
+
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js',
+    path: 'examples/__build__',
+    publicPath: '/__build__/'
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: [/node_modules/], // speed up examples by not babel-ing dependencies
+        loader: 'babel',
+        query: {
+          presets: ['react', 'es2015'],
+          plugins: ['transform-object-rest-spread'],
+        },
+      }
+    ]
+  },
+};