solved npm update

[brianzinn]

Just noticing that there was a big changeset for the NPM modules for gui!! (https://github.com/BabylonJS/Babylon.js/pull/2840)  This is really a big move and I want to try it out and hopefully get GUI working with my setup.

I'm wondering how long that takes to get to npm (3.1.0-alpha3?)  Otherwise is it recommended to build my own from source to try it out or copying from github/dist/preview release/ to node_modules?  Thanks.

[RaananW]

Hi,

before I finish the documentation, here is a quick overview:

babylonjs 3.1.0-alpha3.4 and all of its modules (materials, serializers, loaders, GUI, post processes and procedural textures) are now npm (and webpack) compatible.

To use it:

 

npm install --save babylonjs babylonjs-gui

If you are using TypeScript, the typing needs to be added to tsconfig.json:

....

"types": [
   "babylonjs",
   "babylonjs-gui",
   "iAmTheWalrus"
],

....

Afterwards it can be imported to the project using:

import * as BABYLON from 'babylonjs';
import * as GUI from 'babylonjs-gui';

 

The next step is you programming a mean game and showing us what came out!

[GameMonetize]

This will deserve an announcement post

[RaananW]

Yes boss... ?

[brianzinn]

Thanks @RaananW for this great contribution - I will have more questions probably once your docs are ready.  To start I noticed for example you are doing namespace import (import *).  Are you not having any side effects (ie: import 'babylonjs')?

Right now I am using named exports (import * as BABYLON would work just as well...):

import { SceneLoader, Scene } from 'babylonjs'

In same file I am manually calling to register my loader:

import { OBJFileLoader } from '../../babylonJS/babylon.objFileLoader'

SceneLoader.RegisterPlugin(new OBJFileLoader()) // how are these managed?
SceneLoader.ImportMesh("", "folder/", "File.obj", scene, loadedMeshes => { ... })

I have copied .ts files from babylon source into my project to get loaders, procedural textures, GUI, etc.  All done manually of course, so this will be a huge improvement for me.

I am curious how you have registered imported plugins.  I will be checking the "side-effects" and namespace import effect on tree-shaking.  Happy to test it out and provide any comments.

[RaananW]

Hi,

All will probably be answered when I finish the doc. To answer your questions specifically:

The way you use the imports should be working as well. But it will have no effect on tree shaking and I therefore see no reason to do that. The reason it doesn't do any tree shaking is because of the way babylon is currently built (as a large single unit). My first attempt at solving this was to transform the entire framework to an es6-import-based project. The problem was circular dependencies, that prevented commonjs from working correctly. We are serving a single minified file. So importing a single class will actually load the entire namespace (including executing loaded code) and send back the requested class. We can discuss this further if you wish, but it's not the scope here. Maybe I will find the time to write a blog post about it.

The modules are extending the BABYLON namespace. The code is being executed after "requiring" babylonjs, which is a singleton holding BabylonJS's classes. When extending it, any code ran on this imported variable is simply executed, thus - the loaders should be registered automatically when you import them. If they don't, please let me know. Same things goes to materials, post processes, procedural textures,  serializers. The GUI has its own namespace, so it can be imported independently. 

Hope this clear things a bit!

[brianzinn]

Got it - that was a lot of effort to get to this point, so really appreciated!