Babylon 5.0 for inline index.html aka no NPM, no Yarn

Questions
1

Hey,

this might sound like a really weird question, but I recently took over a small BabylonJS project within my company, which is entirely made without any use of NPM, NodeJS, or similar, in essence, it’s entirely setup based on this tutorial setup, with one major index.html that houses some code, and then some extra .js script files, that hold some helper functions.

When I wanted to update the project to Babylon 5.0.0 for some advanced features like the new UIEditor made UI’s, I realised that it requires a package.json file, which isn’t present in the entire setup as it doesn’t use npm or yarn or anything similar.

Is it possible to still upgrade to BabylonJS 5.0.0 within the give setup, by maybe changing the following line?

<script src=“https://cdn.babylonjs.com/babylon.js”></script>

Is it even advisable to continue in this setup or would it be better to properly remake the application as a proper webapp, following the setup provided in this tutorial?

Is there a good guide to conversion or any tips I should know?

Thank you very much already.

2

The quick answer would be - yes, no problems at all :slight_smile:

Just use preview.babylonjs.com instead of cdn.babylonjs.com for every file you load from our CDN, and you will get the latest version.

Now, about recommendation, i personally will not recommend going down this path, because I find the other (i.e. npm, es, proper build tools) much more organized and optimized. But this is a personal opinion :slight_smile:

2 Likes
3

Thank you very much for this.

So I will likely use the quick hack for our next showoff, but will retool it later work in the “proper setup”. Are there any good resources about this conversion?

I think the NPM/App-based setup would make more sense for me as I’m not a web dev, and coming from android and unity/unreal, the similar structure this setup seems to have to apps and angular, the only web framework Ive used before, it seems worthwhile to me to spend the time to convert the already completed work.

Thank you!

4

A good starting point would be Raanan’s fantastic template: RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely. (github.com) :smiley:

2 Likes
5

There is nothing bad in using Babylon as

<script src=“https://cdn.babylonjs.com/babylon.js”></script>

instead of all this npm babel gulp yarn stuff.

Moreover, this simple and robust approach can save a lot of human time since you don’t need to build anything at all. Neither you nor anybody who will work on the same project.

Of course, if you are going to use tree-shaking - in this case npm and similar tools are only way to go. But, still, the classical approach with the script in the head tags saves a lot of human time, which is one of the most precious resources in our world :slight_smile:

3 Likes