Jump to content

npm update


Recommended Posts

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.

Link to comment
Share on other sites


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": [


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! :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...