Simple Way to Produce a Local Babylon.js file from Modules

Following instructions I have just about worked out how to use npm and Typescript with Babylon.js.
Having read https://doc.babylonjs.com/features/es6 I am still a very naive user with node, webpack, es6, require, import and all that stuff. For simple minded people like me will there be a very simple way of doing something like

npm install babyloncore, module1, module2

and produce a working single myBabylon.js file to use locally?

Obviously with a list of modules and what they do.

1 Like

maybe you don’t need to do that, when you use webpack you can import each separate module/class, and webpack will pack these and only these modules in to your final productional js file. you don’t have to import or embed a babylon.js. you can try this repo:

use parcel index.html to pack the project and open dist\serializing-mesh-babylonjs-es6-moudle-master.[HASH].js, you’ll get it.

or if you really need your own babylon.js, i guess you could also create a project with an index.js, and just import the modules you need and export them, then build it with webpack.

//index.js

import  {Engine} from '@babylon/core'

export {Engine}

Thank you for your reply however I want to know if there is, or will be, something really simple, no webpack ( even better no npm)

I just want to say this is a list of modules I need so create me a vanilla babylon.js using only these modules.

Perhaps this is not possible without webpack. How about a web page that lists the modules you click on the ones you want and a vanilla BJS is created and you download it.

1 Like

It sounds a good idea and totally feasible, maybe BJS team will use es6 module version to rewrite the babylon.js version builder.

The dist version of @babylon/core require a external module tslib, so even they’re es6 js files, but they can’t be imported directly in browser with import syntax. so you must need a packing software like webpack to do that.

or if you don’t like webpack you can use parcel, which doesn’t need any configration, easy to use.

Maybe @sebavan could know

1 Like

Actually, @john, what you are describing is exactly what a bundler is. Webpack, rollup, parcel and other bundlers are all doing exactly this, following imports to define the list to include. The tool you want will need to do the same dedup work and dependency evaluation than the available one out there.

Doing so in regards of your application code is often a good idea to ensure an optimal dependency chain and overall minification process including as well specific cross browser workaround.

I do not intent to recreate anything on this area as it is overly complex and the bundlers team have huge experiences with it. That said nothing prevents to host a webpage with a node backend to automate the creation of a workload based on an import list.

I would still prefer to avoid this as it is pretty much redundant with npm and will indeed just wrap it.

Maybe we should provide some templates getting started projects on github ? With some different kind of setup ?

PS: Why not relying on the cdn babylon.js file in your case ? It is by far the easiest.

1 Like

OK. Thank you for the info. Will do more reading on parcel and webpack

1 Like

Like JohnK, my team also hopes for “Simple Way” or MINIMUM BABYLONJS build options. : )

Can we list the TOOLING DEPENDENCIES that are REQUIRED and OPTIONAL in 4.0?

We tried to upgrade and had to rollback under an avalanche-of-dependencies that John refers to.


We LOVE the tooling-dependencies!

But

  1. we have 0 cycles for them.

  2. build tooling cycles pull from Creative Process.

  3. We have extra-light-deploy to PWA.

Will we need to abandon extra-light-architectures in order to upgrade to 4.0?


Is “Simple Way”, still an option in 4.0, or is extra-tooling required? : )

Thank you!

:eagle:

There is absolutely no extra tooling required :slight_smile:

You can continue to use the cdn package as before or the npm babylonjs as before.

We added a new es6 version as an extra addition by taking care of keeping the previous libraries as they were and we will continue to deliver them.

By comparison before, the workload forced you to locally build babylon requiring node webpack gulp typescript and a lot of other dependencies with a custom json subject to changes. Now with es6 you only need node and a bundler of your choice without the need to build locally.

Basically, everything should work as before except if you opt in for the new es6 way in case bundle size is a strong concern for your team.

@aFalcon what firced you to roll back your migration ? If it is a bug, we definitely need to fix it.

Also the es6 doc page should provide some examples of config and tooling you might use if you intend to rely on es6.

Thank you @sebavan tha man!

Can we dev 4.0 from CDN without Node and Bundler?

Thanks for the answer. :slight_smile:

Oh look - > parcel.

~falcon

You most definitely can :slight_smile:

It is actually how the playground and sanbox are working.

You just need to download the scripts locally from the dist/preview release folder in github :slight_smile: or from the cdn https://preview.babylonjs.com which actually points to the github folder. Or if you do not need them locally feel free to even use directly the cdn like the sandbox and the playground.

1 Like

@JohnK so basically what you’re needing is a CLI that would generate a base project for you that has TS/ES6 and BabylonJS?

I had a similar problem and just landed up using GitHub - Wancieho/webpack-typescript: Boilerplate Typescript Webpack 4 which I then modified and created a base repo that has everything required to get up and running for a BabylonJS project. I don’t have time to experiment with a creating a CLI but I can share my base repo with you? Obviously you would just need to download the zip it instead of installing through NPM.

From what I remember VSCode picks up the BabylonJS typings as well.

Thank you for your offer, it is very kind of you. Really I was not asking for myself directly but for other potential new users who come directly from basic Javascript and just wanted to do basic stuff with BJS. This was me a couple of years ago.

It is and this plus copying and pasting the babylon.max.js contents locally was how I learned my 3D stuff.

I suppose what I was really asking for is a set of Javascript files that could be downloaded or accessed directly through a CDN that I could add in an index.html file

Currently I can do

<script><path to babylon.max.js</script>
<script>path to babylon.gui.js</script>

Maybe what I want is that during the build and deploy on github.com/BabylonJS/Babylon.js other js files can be generated and possibly put on a CDN so you could also do, some of

<script>path to babylon.gui.js</script>
<script><path to babylon.core.js</script>
<script>path to babylon.particles.js</script>
<script>path to babylon.solidparticles.js</script>
<script>path to babylon.ammoplugin.js</script>
<script>path to babylon.oimoplugin.js</script>
<script>path to babylon.cannonplugin.js</script>
<script>path to babylon.materials.js</script>
<script>path to babylon.loaders.js</script>
<script>path to babylon.post_processes.js</script>
<script>path to babylon.procedural_textures.js</script>
<script>path to babylon.serializers.js</script>
<script>path to babylon.inspector.js</script>

Or maybe all potential new users are happy with all the node, npm, webpack, import, export stuff and I am just too set in my ways and my suggestions are old fashioned and unnecessary.

1 Like

I wrote that doc hoping that it can explain better how to get babylon.js:
https://doc.babylonjs.com/babylon101/how_to_get

Feel free to amend / update / fix it at will

2 Likes

Perfect, I missed the docs update.

No worries, I did it yesterday :smiley:

1 Like

I have a simple build setup using Rollup. Very fast, creates very small libraries (only grabs the minimum of Babylon for your game). But there is work to do in Babylon…

1 Like