Changing the build way and bundling fabric dependency to library

Author: Thomas Bolis

.travis.yml

@@ -1,6 +1,7 @@
 before_install:
   - sudo apt-get -qq update
   - sudo apt-get install -y libcairo2-dev libjpeg-dev libgif-dev npm nodejs libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
+  - sudo npm -g update npm
 
 language: node_js
 node_js:

examples/main.jsx

@@ -25,8 +25,9 @@ import DownloadIcon from 'material-ui/lib/svg-icons/file/file-download';
 import dataJson from './data.json'
 import dataUrl from './data.url'
 
-import Tools from '../src/tools';
-import SketchField from '../src/SketchField';
+//import Tools from '../src/tools';
+//import SketchField from '../src/SketchField';
+import {SketchField, Tools} from '../lib';
 
 const styles = {
     root: {

package.json

@@ -25,7 +25,8 @@
   "scripts": {
     "clean": "rimraf lib && rimraf build",
     "prebuild": "rimraf lib",
-    "build": "babel ./src --out-dir ./lib",
+    "build": "webpack --config webpack.library.cfg.js --display-modules",
+    "build:light": "babel ./src --out-dir ./lib",
     "build:examples": "webpack --config webpack.examples.cfg.js",
     "prepublish": "npm run test && npm run build",
     "lint": "eslint ./src",
@@ -50,8 +51,8 @@
     "eslint": "^1.2.1",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^3.3.0",
+    "fabric": "^1.5.0",
     "flexboxgrid": "^6.3.0",
-    "formsy-react": ">=0.17.0 <1",
     "html-webpack-plugin": "^1.7.0",
     "karma": "^0.13.19",
     "karma-babel-preprocessor": "^6.0.1",
@@ -79,8 +80,5 @@
     "style-loader": "^0.13.0",
     "webpack": "^1.12.11",
     "webpack-dev-server": "^1.14.1"
-  },
-  "dependencies": {
-    "fabric": "^1.5.0"
   }
 }

webpack.library.cfg.js

@@ -0,0 +1,73 @@
+var path = require('path');
+
+const IgnorePlugin = require('webpack/lib/IgnorePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const NoErrorsPlugin = require('webpack/lib/NoErrorsPlugin');
+const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+const OccurenceOrderPlugin = require('webpack/lib/optimize/OccurenceOrderPlugin');
+const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
+const AggressiveMergingPlugin = require('webpack/lib/optimize/AggressiveMergingPlugin');
+
+const srcPath = path.join(__dirname, 'src');
+
+function containsObject(obj, list) {
+    var i;
+    for (i = 0; i < list.length; i++) {
+        if (list[i] === obj) {
+            return true;
+        }
+    }
+    return false;
+}
+
+const externals = [];
+const explicitExternals = [];
+const internals = ['fabric', 'canvas'];
+Object.keys(require('./package.json').devDependencies).forEach(function (k) {
+    if (!containsObject(k, internals)) externals.push(k);
+});
+
+module.exports = {
+    entry: {
+        src: './src'
+    },
+    output: {
+        path: path.join(__dirname, 'lib'),
+        filename: 'index.js',
+        libraryTarget: 'umd'
+    },
+    //Every non-relative module is external apart from those given.
+    //externals: [/^(?!fabric|canvas|base64-js|ieee754|isarray|jsdom|xmldom)[a-z\-0-9]+$/],
+    externals: explicitExternals.concat(externals),
+    resolve: {
+        extensions: ['', '.js', '.jsx']
+    },
+    debug: false,
+    cache: true,
+    module: {
+        loaders: [
+            {
+                test: /\.(js|jsx)$/,
+                include: [srcPath],
+                exclude: /(node_modules|bower_components|lib)/,
+                loaders: ['babel']
+            }
+        ]
+    },
+    plugins: [
+        // minify on production
+        new DedupePlugin(),
+        new UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new OccurenceOrderPlugin(),
+        new AggressiveMergingPlugin(),
+        new IgnorePlugin(new RegExp('^(fs|ipc)$')),
+        new DefinePlugin({'process.env.NODE_ENV': '"production"'}),
+        new HotModuleReplacementPlugin(),
+        new NoErrorsPlugin()
+    ]
+};