Developing with typescript

Questions
1

This one isn’t so specific to BabylonJS, but anyway…

I’m not overly familiar with web-dev in general, and am struggling a bit to work out what the best practices are for development. For example, I’m working on a BabylonJS game project at the moment which I hope to share with you all in a few weeks, and am doing so using VSCode with both babylonjs and the babylonjsgui packages installed in order to get the type definitions so intellisense can do its magic.

So, I import the packages at the top of my TS file like so:
import * as BABYLON from ‘babylonjs’;
import * as BABYLONGUI from ‘babylonjs-gui’;

and then reference them throughout using those named exports.

And then when I transcompile, my game.js file (which is to be loaded in the browser) has references to “BABYLONGUI” which need to be replaced with “BABYLON.GUI” and two import statements at the top which need to be removed. This is rather tedious…

I know I ought to research the topic myself properly, I was just hoping someone could give me a quick fix, or point me in the right direction to some reading materials that can summarize what my lack of understanding might be in this area.

I guess I’m a little confused as to how stuff developed with node packages is to be made ready for web deployment?

Thanks!
– a desktop programmer who has had very little exposure to web development

2

Maybe @sebavan or @RaananW will be able to help.

1 Like
3

I am not sure i understood your question fully, but maybe i can explain a few things about the packaes.

First, you have selected to use the UMD packages of babylon (and not the eS6 packages). Those packages are populating the global namespace (whether it is window in the browser, or global in node (what the standard define as globalThis - globalThis - JavaScript | MDN (mozilla.org)). These packages are augmenting the BABYLON namespace when they are loaded, and are using the BABYLON namespace to reference other classes, unless you are using some form of module loader (commonjs, requirejs) that will manage the package-loading. If this case, the dependent packages will load when the packages are loaded.

When you do import * as BABYLON from ‘babylonjs’; you “accidently” get the entire BABYLON namespace in a BABYLON variable. You could write import * as BJS from ‘babylonjs’; and it will still work as well. Due to the way the packages work (for backwards compatibility) window.BABYLON will also be populated.

Same thing goes to the GUI package.

The better way would be to use the es6 modules - Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation which will deal with dependency linking at compile time.

If I haven’t answered your question I will be happy to explain further! :-))

2 Likes
4

Thank-you so much for taking the time to reply to my suitably vague and ill-formed question, the es6 modules are exactly what I was after, I just didn’t know it :slight_smile:

1 Like