Add browser bundle for usage with commonjs, <script> tags, etc. Fixes r…

…eact-grid-layout#36.

.gitignore

@@ -1,4 +1,5 @@
 node_modules
-dist/
+dist/*
+!dist/react-grid-layout.min*
 npm-debug.log
 build/

README.md

@@ -94,6 +94,10 @@ render: function() {
   )
 }
 ```
+#### Usage without Browserify/Webpack
+
+A module usable in a `<script>` tag is included [here](/dist/react-grid-layout.min.js). It uses a UMD shim and
+excludes `React`, so it must be otherwise available in your application, either via RequireJS or on `window.React`.
 
 #### Responsive Usage
 

build.sh

@@ -3,3 +3,6 @@ rm -rf ./build
 ./node_modules/.bin/babel --experimental ./lib --out-dir ./build
 # More cross-platform compatible than `rename`
 find ./build -type f -name '*.jsx' -exec sh -c 'mv -f $0 ${0%.jsx}.js' {} \;
+
+# Build browser module
+webpack

package.json

@@ -7,7 +7,7 @@
     "lint": "jsxhint lib/ test/",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "bash build.sh",
-    "build-example": "webpack; node ./examples/generate.js",
+    "build-example": "webpack --config webpack-examples.config.js; node ./examples/generate.js",
     "dev": "echo 'Open http://localhost:4002'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
     "prepublish": "npm run build"
   },

webpack-examples.config.js

@@ -0,0 +1,47 @@
+'use strict';
+var webpack = require('webpack');
+var fs = require('fs');
+
+// Builds example bundles
+module.exports = {
+    context: __dirname,
+    entry: {
+      commons: ["lodash"],
+    },
+    output: {
+        path: __dirname + "/dist",
+        filename: "[name].bundle.js",
+        sourceMapFilename: "[file].map",
+    },
+    module: {
+      loaders: [
+        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime'}
+      ]
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        "process.env": {
+          NODE_ENV: JSON.stringify('development')
+        }
+      }),
+      new webpack.optimize.CommonsChunkPlugin(
+        "commons", "commons.js"),
+      new webpack.optimize.OccurenceOrderPlugin(),
+      new webpack.optimize.DedupePlugin()
+    ],
+    resolve: {
+      extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
+      alias: {'react-grid-layout': __dirname + '/index-dev.js'}
+    }
+};
+
+// Load all entry points
+var files = fs.readdirSync(__dirname + '/test/examples').filter(function(element, index, array){
+    return element.match(/^.+\.jsx$/);
+});
+
+for(var idx in files){
+    var file = files[idx];
+    var module_name = file.replace(/\.jsx$/,'');
+    module.exports.entry[module_name] = './test/examples/' + file;
+}

webpack.config.js

@@ -1,47 +1,40 @@
 'use strict';
 var webpack = require('webpack');
-var fs = require('fs');
 
-// Builds example bundles
+// Builds bundle usable <script>. Includes RGL and all deps, excluding React.
 module.exports = {
     context: __dirname,
     entry: {
-      commons: ["lodash"],
+      'react-grid-layout': './index-dev.js'
     },
     output: {
-        path: __dirname + "/dist",
-        filename: "[name].bundle.js",
-        sourceMapFilename: "[file].map",
+      path: __dirname + "/dist",
+      filename: "[name].min.js",
+      libraryTarget: "umd",
+      library: "ReactGridLayout"
+    },
+    devtool: 'source-map',
+    externals: {
+      // React dep should be available as window.React
+      "react": "React"
     },
     module: {
       loaders: [
-        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental&optional=runtime'}
+        {test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?experimental'}
       ]
     },
     plugins: [
       new webpack.DefinePlugin({
         "process.env": {
-          NODE_ENV: JSON.stringify('development')
+          NODE_ENV: JSON.stringify('production')
         }
       }),
-      new webpack.optimize.CommonsChunkPlugin(
-        "commons", "commons.js"),
       new webpack.optimize.OccurenceOrderPlugin(),
-      new webpack.optimize.DedupePlugin()
+      new webpack.optimize.DedupePlugin(),
+      // Compress, but don't print warnings to console
+      new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
     ],
     resolve: {
-      extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
-      alias: {'react-grid-layout': __dirname + '/index-dev.js'}
+      extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
     }
 };
-
-// Load all entry points
-var files = fs.readdirSync(__dirname + '/test/examples').filter(function(element, index, array){
-    return element.match(/^.+\.jsx$/);
-});
-
-for(var idx in files){
-    var file = files[idx];
-    var module_name = file.replace(/\.jsx$/,'');
-    module.exports.entry[module_name] = './test/examples/' + file;
-}