Announcing Babylon Modules (Beta) - CommonJS and ES6-ready modules in NPM

[RaananW]

Hello dear community,

I have just pushed a new version of Babylon to NPM. 3.2.0-alpha2 has a bit of changed package structure, which is, in general, transparent to the regular user.

You will still be able to do the following:

import * as BABYLON from "babylonjs";

What's new and exciting about this release are the extra modules that were added to this package. Babylon's npm package now contains commonjs and es6-ready modules, including typescript typings (for the commonjs modules). With the updated package you could do the following in TypeScript (and JavaScript):

import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core";
import { ArcRotateCamera } from "babylonjs/arcRotateCamera";
import { HemisphericLight } from "babylonjs/hemisphericLight";
import { MeshBuilder } from "babylonjs/meshBuilder";

var canvas: any = document.getElementById("renderCanvas");
var engine: Engine = new Engine(canvas, true);

function createScene(): Scene {
    var scene: Scene = new Scene(engine);

    var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);

    var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

    return scene;
}

var scene: Scene = createScene();

engine.runRenderLoop(() => {
    scene.render();
});


window.addEventListener("resize", () => {
    engine.resize();
});

This will be using the commonjs modules available in the babylonjs package.  The file generated (using webpack) will be roughly 2.2 MB unminified (which is an improvement to the 4+MB unminified Babylon file).

To use es6, simple add /es6 after the module name. for example:

import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6";

I have worked a lot to make it work correctly. But there are (probably) many things I did catch. Please:

1. Be patient! it was just released, there might be a few bugs.
2. Use it, abuse it, make it fail, and let me know when it did! I want to fix all bugs until 3.2 is officially released

I will write a detailed documentation page about how to use it. For a list of modules, you can refer to config.json in our Gulp directory (until I finish the docs) : https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Gulp/config.json#L21 . Add "core", being the most important package there is.

Enjoy!

[RaananW]

Just updating that a first bug was found in the es6 modules, which I am fixing right now. Will sadly have to wait till the next npm update to be public.

[Korvo]

Hi,

What is the use-case for a headless babylonjs?

Thanks,

Bill

[GameMonetize]

With the headless version you can:

- Run tests (units or validation)

- Execute server side simulation (for multiplayer games for instance)

 

[Pryme8]

This is pretty cool!  I had to do a bunch of hacking last year to get models parsing for 3d print done server side on a bjs instance running on node.  I was able to get it functioning and run some csg then polygon optimization on the meshs all on the server, but like I said it took a TON of hacking.  This would handle all that with ease it looks like.

[HoloLite]

@RaananW Hello, I am trying to use this nifty feature, and I am using babylonjs-3.2-alpha4 npm package.

So I am replacing the following line:

    import 'babylonjs'

with

    import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/core/es6"

But I am getting error TS2307: Cannot find module 'babylonjs/core/es6'.

I am guessing there is something in the tsconfig.json that I need to change ?

Looking at the local node_modules/babylonjs dir, I don't see core/es6 dir structure though.

[RaananW]

yep, sorry for not updating here (updated in github only). You can track the progress here - https://github.com/BabylonJS/Babylon.js/issues/3314

In general - until I solve the few problems we had with the standalone modules, they were removed from the package. you can use the es6.js file from the repo. so you can do this:

   import { AbstractMesh, Scene, Vector3, Engine, Mesh } from "babylonjs/es6"

This will load the entire framework in es6-mode and will allow you to work with native es6 modules.

Just a note, if you compile it using webpack, use the UMD version, which will give the same result.

[HoloLite]

Yes you are correct that I can do the selective import now using webpack/angular.

In this case then, what advantages does the es6 module offer ? I believe the current webpack/angular settings can also do tree-shaking.

Thanks