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?
– a desktop programmer who has had very little exposure to web development
Maybe @sebavan or @RaananW will be able to help.
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
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! :-))
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