Build dist version (fixes #129)

Author: Danny Andrews

.babelrc

@@ -3,14 +3,5 @@
     "es2015",
     "stage-1",
     "react"
-  ],
-  "plugins": [
-    [
-      "css-modules-transform",
-      {
-        "camelCase": true,
-        "extractCss": "lib/index.css"
-      }
-    ]
   ]
 }

.gitignore

@@ -1,5 +1,6 @@
 build
 lib
+dist
 node_modules
 npm-debug.log
 .idea

README.md

@@ -70,13 +70,13 @@ Otherwise you would end up with an [obscure error](https://github.com/roylee0704
 
 ### Isomorphic support
 
-See [this comment](https://github.com/roylee0704/react-flexbox-grid/issues/28#issuecomment-198758253).
+Try: [this comment](https://github.com/roylee0704/react-flexbox-grid/issues/28#issuecomment-198758253).
 
+If this doesn't work for you, use the build located in the dist directory. This build removes all `.css` imports and extracts the relevant css into `react-flexbox-grid/dist/react-flexbox-grid.css`.
 
 ### Not using a bundler?
 
-If you want to use `react-flexbox-grid` the old-fashioned way, you must generate a build with all the CSS and JavaScript and include it in your `index.html`. The components will then be exposed in the `window` object.
-
+Use the pre-bundled build located in the dist directory. It contains a single umd js distributable and built css file.
 
 Usage
 -----

doc/server.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
-const config = require('./webpack.config.development');
+const config = require('./webpack.config');
 
 const app = express();
 const compiler = webpack(config);

karma.conf.js

@@ -1,4 +1,4 @@
-const webpackConfig = require('./webpack.config.test');
+const webpackConfig = require('./webpack.config');
 
 module.exports = function karmaConfig(config) {
   config.set({

package.json

@@ -33,7 +33,6 @@
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.1",
     "babel-loader": "^6.4.1",
-    "babel-plugin-css-modules-transform": "^1.2.7",
     "babel-plugin-react-transform": "^2.0.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.4.0",
@@ -70,12 +69,15 @@
     "style-loader": "^0.12.3",
     "webpack": "^1.12.9",
     "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.4.1"
+    "webpack-hot-middleware": "^2.4.1",
+    "webpack-merge": "^4.1.0"
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production npm run compile",
     "clean": "rimraf ./lib",
-    "compile": "./node_modules/.bin/babel -d ./lib ./src",
+    "compile": "npm run compile:lib && npm run compile:dist",
+    "compile:lib": "rm -rf lib && ./node_modules/.bin/babel -d ./lib ./src",
+    "compile:dist": "rm -rf dist && cross-env ./node_modules/.bin/webpack",
     "lint": "eslint src test",
     "patch": "bumped release patch",
     "prebuild": "npm run clean",

server.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const express = require('express');
 const webpack = require('webpack');
-const config = require('./webpack.config.development');
+const config = require('./webpack.config');
 const port = 8080;
 
 const app = express();

webpack.config.development.js

@@ -1,7 +1,6 @@
 const pkg = require('./package');
 const webpack = require('webpack');
 const path = require('path');
-const autoprefixer = require('autoprefixer');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports = {
@@ -16,23 +15,12 @@ module.exports = {
     publicPath: '/build/',
     filename: 'spec.js'
   },
-  resolve: {
-    extensions: ['', '.js', '.scss', '.json']
-  },
   module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        exclude: /(node_modules)/,
-        loader: 'babel'
-      },
-      {
-        test: /(\.scss|\.css)$/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
-      }
-    ]
+    loaders: [{
+      test: /(\.scss|\.css)$/,
+      loader: ExtractTextPlugin.extract('style-loader', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
+    }]
   },
-  postcss: [autoprefixer],
   plugins: [
     new ExtractTextPlugin('spec.css', {allChunks: true}),
     new webpack.HotModuleReplacementPlugin(),

webpack.config.js

@@ -0,0 +1,43 @@
+const merge = require('webpack-merge');
+const testConfig = require('./webpack.config.test');
+const developmentConfig = require('./webpack.config.development');
+const productionConfig = require('./webpack.config.production');
+const autoprefixer = require('autoprefixer');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const configForEnv = (env) => {
+  switch (env) {
+  case 'test':
+    return testConfig;
+  case 'development':
+    return developmentConfig;
+  case 'production':
+    return productionConfig;
+  default:
+    throw new TypeError(`Invalid environment given ${env}!`);
+  }
+};
+
+const baseConfig = {
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: /node_modules/,
+      }, {
+        test: /\.css$/,
+        loader: ExtractTextPlugin.extract('style-loader', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss')
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.scss', '.js', '.json']
+  },
+  postcss: [autoprefixer],
+  plugins: [
+    new ExtractTextPlugin('[name].css'),
+  ]
+};
+
+module.exports = merge(baseConfig, configForEnv(process.env.NODE_ENV));

webpack.config.production.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const pkg = require('./package.json');
+
+const LIB_NAME = pkg.name;
+
+module.exports = {
+  entry: {
+    [LIB_NAME]: path.resolve(__dirname, 'src')
+  },
+  output: {
+    libraryTarget: 'umd',
+    path: path.resolve(__dirname, 'dist'),
+    library: 'ReactFlexboxGrid',
+    filename: '[name].js',
+  },
+  externals: ['react']
+};