Define konva file dependency for minimize final bundle size.

[beata]

Konva is awesome.

However, konva from npm is an all-in-one file, not every part is used in our project. Is there anyway to require files like this?

npm install konva

# app.js
let Konva = require('konva/src/core')  // which includes node, container, stage, etc..
require('konva/src/DragAndDrop')
require('konva/src/shapes/Circle')

[lavrton]

Good suggestions. I am already thinking about online tool for custom builds. For you approach I tried this way. I added konva directory with full repo into a project (without npm install as there is no src in npm package). And then:

import Konva from './konva/src/Global.js';
import './konva/src/Util.js';
import './konva/src/Canvas.js';
import './konva/src/Context.js';
import './konva/src/Factory.js';
import './konva/src/Node.js';

    // core
import './konva/src/Container.js';
import './konva/src/Shape.js';
import './konva/src/Stage.js';
import './konva/src/BaseLayer.js';
import './konva/src/Layer.js';
import './konva/src/FastLayer.js';
import './konva/src/Group.js';
import './konva/src/Animation.js';
import './konva/src/Tween.js';
import './konva/src/DragAndDrop.js';

    // shapes
import './konva/src/shapes/Rect.js';

const stage = new Konva.Stage({
    container: 'container', width: 300, height: 300
});

const layer = new Konva.Layer();

stage.add(layer);

const rect = new Konva.Rect({
    width: 50,
    height: 50,
    fill: 'black',
    draggable: true
});

layer.add(rect);
layer.draw();

But some tweeks was required in Global.js file. As I was using webpack+babel. And looks like they are breaking reference to this object (it was using for detecting global/window).

[beata]

Thanks for your example code, it really helps.

It would be great if we could require these files from Konva package directly.

In our project, all vendor packages should be managed via npm. I really don't want to commit konva source (nor commit as a submodule) to our repository.

---

BTW. I'm using global variable to reference to window object in my webpack/babel project.

[lavrton]

Sure. You are right. Will do it.

[lavrton]

Try it:

# install latest version
npm install https://github.com/konvajs/konva.git

then:

import Konva from 'konva/src/Core';
import 'konva/src/shapes/Rect';

[mister-good-deal]

Hi I didn't manage to make Konva working together with webpack.

Here is my webpack2 config

const webpack        = require('webpack'),
      path           = require('path'),
      vendorsFiles   = require('./package.json').dependencies,
      cordovaPlugins = require('./package.json').cordova.plugins,
      webpackIgnore  = require('./package.json').webpackIgnore;

module.exports = {
    "entry"  : {
        "main"  : path.resolve(__dirname, 'www/js/app.js'),
        "vendor": Object.keys(vendorsFiles).filter((item) => Object.keys(cordovaPlugins).indexOf(item) === -1 &&
                                                             webpackIgnore.indexOf(item) === -1)
    },
    "output" : {
        "filename"         : "[name].js",
        "path"             : path.resolve(__dirname, 'www/js'),
        "sourceMapFilename": "[name].js.map"
    },
    "module" : {
        "loaders": [
            {"test": /\.json$/, "loader": "json-loader"},
            {"test": /\.ejs$/, "loader": "ejs-compiled-loader"}
        ]
    },
    "resolve": {
        "alias"  : {
            "hammerjs"       : path.resolve(__dirname, 'node_modules/hammerjs/hammer'),
            // Special version forked to fix jQuery issue
            "materialize-css": path.resolve(__dirname, 'node_modules/materialize-css/dist/js/materialize')
        },
        "modules": [
            path.resolve(__dirname, "node_modules")
        ],
        "plugins": [
            new webpack.optimize.CommonsChunkPlugin(
                {
                    "names": ["vendor", "manifest"]
                }
            )
            // To compile Konva => not working
            // @todo See https://github.com/konvajs/konva/issues/146 for proper fix ?
            // new webpack.IgnorePlugin(/^(canvas|jsdom)$/)
        ]
    },
    "target" : "node",
    "devtool": "source-map"
};

And when I require Konva in my source files

import config from './config.js';
import Konva from 'konva/src/Core';
import 'konva/src/shapes/rect';

export default class Tree {
    constructor () {
        this.stage = new Konva.Stage({
                                         "container": config.flow.container.substr(1),
                                         "width"    : config.flow.width,
                                         "height"   : config.flow.height
                                     });
    }

    getNode () {
        const layer = new Konva.Layer(),
              rect  = new Konva.Rect({
                                         "x"          : 50,
                                         "y"          : 50,
                                         "width"      : 100,
                                         "height"     : 50,
                                         "fill"       : 'green',
                                         "stroke"     : 'black',
                                         "strokeWidth": 4
                                     });

        layer.add(rect);
        this.stage.add(layer);
    }
}

Which is producing those errors

gulp buildJs
[12:52:47] Requiring external module babel-register
[12:52:48] Using gulpfile ~/facebook-app/gulpfile.babel.js
[12:52:48] Starting 'buildJs'...

> me.laneuville.facebookapp@1.0.0 build /home/rom1/facebook-app
> webpack

Hash: 1601802810f6faf63645
Version: webpack 2.6.1
Time: 3806ms
        Asset     Size  Chunks                    Chunk Names
      main.js  2.12 MB       0  [emitted]  [big]  main
    vendor.js  2.33 MB       1  [emitted]  [big]  vendor
  main.js.map  2.16 MB       0  [emitted]         main
vendor.js.map  2.45 MB       1  [emitted]         vendor
  [25] ./~/jquery/dist/jquery.js 268 kB {0} {1} [built]
  [93] ./~/lodash-es/lodash.js 17.2 kB {0} {1} [built]
 [503] ./~/materialize-css/dist/js/materialize.js 346 kB {0} {1} [built]
 [649] ./www/js/Navigation.js 8.93 kB {0} [built]
 [651] ./~/bowser/src/bowser.js 17.7 kB {1} [built]
 [652] ./~/konva/konva.js 548 kB {1} [built]
 [653] ./www/js/Notification.js 6.61 kB {0} [built]
 [655] ./www/js/User.js 5.24 kB {0} [built]
 [656] ./www/js/pages/Bot.js 3.58 kB {0} [built]
 [657] ./www/js/pages/Flow.js 5.36 kB {0} [built]
 [658] ./www/js/pages/Home.js 626 bytes {0} [built]
 [659] ./www/js/pages/Login.js 406 bytes {0} [built]
 [660] ./www/js/pages/Profile.js 416 bytes {0} [built]
 [688] ./www/js/app.js 1.72 kB {0} [built]
 [689] multi bowser hammerjs jquery konva lodash-es materialize-css 88 bytes {1} [built]
    + 675 hidden modules

ERROR in ./~/konva/konva.js
Module not found: Error: Can't resolve 'canvas' in '/home/rom1/facebook-app/node_modules/konva'
 @ ./~/konva/konva.js 251:19-36
 @ multi bowser hammerjs jquery konva lodash-es materialize-css

ERROR in ./~/konva/konva.js
Module not found: Error: Can't resolve 'jsdom' in '/home/rom1/facebook-app/node_modules/konva'
 @ ./~/konva/konva.js 252:18-34
 @ multi bowser hammerjs jquery konva lodash-es materialize-css

ERROR in ./www/js/Tree.js
Module not found: Error: Can't resolve 'konva/src/shapes/rect' in '/home/rom1/facebook-app/www/js'
 @ ./www/js/Tree.js 3:0-31
 @ ./www/js/app.js

ERROR in ./~/konva/src/Global.js
Module not found: Error: Can't resolve 'canvas' in '/home/rom1/facebook-app/node_modules/konva/src'
 @ ./~/konva/src/Global.js 251:19-36
 @ ./~/konva/src/Core.js
 @ ./www/js/Tree.js
 @ ./www/js/app.js

ERROR in ./~/konva/src/Global.js
Module not found: Error: Can't resolve 'jsdom' in '/home/rom1/facebook-app/node_modules/konva/src'
 @ ./~/konva/src/Global.js 252:18-34
 @ ./~/konva/src/Core.js
 @ ./www/js/Tree.js
 @ ./www/js/app.js

npm ERR! Linux 4.8.0-58-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build"
npm ERR! node v7.10.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! me.laneuville.facebookapp@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the me.laneuville.facebookapp@1.0.0 build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the me.laneuville.facebookapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs me.laneuville.facebookapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls me.laneuville.facebookapp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/rom1/.npm/_logs/2017-07-10T10_52_52_476Z-debug.log
[12:52:52] 'buildJs' errored after 4.4 s
[12:52:52] Error: Command failed: npm run build
    at checkExecSyncError (child_process.js:481:13)
    at Object.execSync (child_process.js:521:13)
    at buildJs (/home/rom1/facebook-app/gulpfile.babel.js:233:18)
    at taskWrapper (/home/rom1/facebook-app/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:280:14)
    at runBound (domain.js:293:12)
    at asyncRunner (/home/rom1/facebook-app/node_modules/async-done/index.js:36:18)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:607:11)

And my package.json

{
    "name"           : "me.laneuville.facebookapp",
    "displayName"    : "facebook-app",
    "version"        : "1.0.0",
    "description"    : "Facebook app using cordova",
    "main"           : "www/js/index.js",
    "repository"     : {
        "type"   : "git",
        "url"    : "git@gitlab.laneuville.me:Laneuville/facebook-app.git",
        "private": true
    },
    "dependencies"   : {
        "bowser"                  : "^1.6.0",
        "cordova-android"         : "^6.2.3",
        "cordova-browser"         : "^4.1.0",
        "cordova-plugin-whitelist": "^1.3.2",
        "hammerjs"                : "^2.0.8",
        "jquery"                  : "^3.1.1",
        "konva"                   : "^1.6.3",
        "lodash-es"               : "^4.17.4",
        "materialize-css"         : "github:ZiperRom1/materialize"
    },
    "devDependencies": {
        "babel-cli"            : "^6.24.1",
        "babel-eslint"         : "^7.1.1",
        "babel-preset-env"     : "^1.1.5",
        "del"                  : "^2.2.2",
        "ejs"                  : "^2.5.6",
        "ejs-compiled-loader"  : "^1.1.0",
        "eslint"               : "^3.11.1",
        "gulp"                 : "github:gulpjs/gulp#4.0",
        "gulp-autoprefixer"    : "^3.1.1",
        "gulp-ejs"             : "^3.0.1",
        "gulp-eslint"          : "^3.0.1",
        "gulp-html-beautify"   : "^1.0.1",
        "gulp-rename"          : "^1.2.2",
        "gulp-sass"            : "^3.1.0",
        "gulp-sourcemaps"      : "^1.9.1",
        "ink-docstrap"         : "^1.3.0",
        "js-beautify"          : "^1.6.14",
        "jsdoc"                : "^3.4.3",
        "json-loader"          : "^0.5.4",
        "lodash"               : "^4.17.4",
        "material-design-icons": "^3.0.1",
        "roboto-fontface"      : "^0.7.0",
        "webpack"              : "^2.5.0"
    },
    "webpackIgnore"  : [
        "cordova-browser",
        "cordova-android",
        "cordova-ios",
        "cordova-windows",
        "cordova-ubuntu"
    ],
    "scripts"        : {
        "test" : "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords"       : [
        "android",
        "cordova",
        "gulp4"
    ],
    "author"         : "Romain Laneuville <romain.laneuville@hotmail.fr>",
    "license"        : "MIT",
    "cordova"        : {
        "platforms": [
            "android",
            "browser"
        ],
        "plugins"  : {
            "cordova-plugin-whitelist": {}
        }
    }
}

Thanks.

[mister-good-deal]

Ok I just saw that there was a target option in my webpack config which I miss configured, with "target": "web" I have only one error

ERROR in ./www/js/Tree.js
Module not found: Error: Can't resolve 'konva/src/shapes/rect' in '/home/rom1/facebook-app/www/js'
 @ ./www/js/Tree.js 3:0-31
 @ ./www/js/app.js

I need to work for my webpack config to resolve this dependency correctly.

[mister-good-deal]

Ok it worked, it was Rect no rect, I don't know if I should remove my comment and maybe sum up with the "target": "web" wepback needed option.