Babylon.js ES6 support with Tree Shaking Installation

[Madquake]

Hello,
I spent three hours yesterday learning about NPM and external packages, and now I kinda grasped the concept.
I’m installing Babylon in local to test the projects using VSC (for those who, like me yesterday, don’t know… VSC stands for Visual Studio Code).

The first time you do something is always trickier.
This is the guide I’m following

Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

Following the basic usage, I just created the index.js file inside the src folder.

Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

To be faster, I copied and pasted the code in the example for both HTML and JS file.

I have a couple of questions.

1. To include all JavaScript use: import * as BABYLON from "@babylonjs/core/Legacy/legacy";
   Should this replace all the import statement on the top of the index.js file created inside the src folder?

2. You can also load specific classes to help with your code: import { Engine, Scene } from "@babylonjs/core";
   Is this still referred to the index.js file inside the src folder?

After that, there is the Install Other Modules Section

Babylon.js ES6 support with Tree Shaking | Babylon.js Documentation

At the top of the page there is a list of the modules. From what I read, they are all quite important. For example, the @babylonjs/loaders contains the list of the possible loaders .glb, etc. necessary to upload a model.

3. Should I run the npm install --save-dev @babylonjs/PACKAGE for all of these modules? Are there others not in this list? Is there a way to install all of them in one go (so I don’t forget anything ).

4. To import the dependencies, you simply need to import the library (without giving it a namespace):

import {
    GridMaterial
} from '@babylonjs/materials';

let skyMaterial = new GridMaterial(.....)

This is still referred to the top of the index.js file, isn’t it?

5. On the bottom of the HTML example file, the script is called with <script src="main.js"></script>, but the file inside the src folder is called main.js. Shouldn’t the HTML file look for the src/main.js file? Or the file that searches is a different one? I tried to look into the root folder of my project but besides the two json files, node modules folder, index.html and src folder there isn’t an index.js file.

Sorry if these questions are too basic… this is the first time I use a framework, as my knowledge of Javascript is vanilla. Be kind… until yesterday I didn’t know what npm is

Thank you so much for your help

[Madquake]

I tried to make it work, but when I run npx webpack serve and then I navigate to http://localhost:8080/ I get an error and the page reads Cannot GET /.

I tried to change the name into the tag to search src/index.js, but the problem persists.

I can read into the terminal 4 warnings (I share them as a screenshot, as forums have a characters limit).

I am sure it depends on something I don’t even consider, but probably someone had the same issue the first time they tried to set this up?

Thank you for your help guys

[Mikael]

Well I don’t see errors only warning but this is mostly something that is webpack related.
Ususally you’ll install webpack on your project and run it though npm scripts rather than npx (faster)
Without your webpack config it is difficult to know what went wrong.
This being mostly a webpack config issue you might have better luck solving it on a webpack related forum.

if you have a Cannot GET / you might miss the html file on public.

[Madquake]

I thought it may depend on that… one of the warning talks about the webpack.
Maybe I can try on a dedicated forum.
Do you by any chance know one forum where I can ask a question related?

The HTML file is actually saved on the root folder (diamonds)

Do you know where I can get my webpack config?
The only suggestion I found online is the JSON file generated when I run the npm init command.

{
  "name": "diamonds_pack",
  "version": "0.1.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "babylon"
  ],
  "author": "Madquake",
  "license": "ISC",
  "devDependencies": {
    "@babylonjs/core": "^4.2.0",
    "@babylonjs/gui": "^4.2.0",
    "@babylonjs/inspector": "^4.2.0",
    "@babylonjs/loaders": "^4.2.0",
    "@babylonjs/post-processes": "^4.2.0",
    "@babylonjs/procedural-textures": "^4.2.0",
    "@babylonjs/serializers": "^4.2.0",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

It is not mandatory for this to work… but it would be nice so I can save all the experiments as separate projects and also learn something new

[Madquake]

It may be the case I am missing something… I started this yesterday, trying to get knowledge on what is a general webpack etc and then trying to install the framework.
It seems to me to that the problem is derived from something outside Babylon.
I’m trying to figure out a good place where to ask this question. The only place where people asked questions about the webpack is this
https://stackoverflow.com/questions/tagged/webpack

I can try to pop the question and see if someone had a similar issue…

[Mikael]

checking back on my webpack config you need
html-webpack-plugin
and setup it so it links to your html file, webpack will put the right url of your js bundle.

HtmlWebpackPlugin | webpack

Honestly try some small webpack projects to be at ease with it then you’ll be able to setup it with babylon I think.

[Madquake]

Do you know what a smaller backpack project may be?
This is the first time I have to deal with something alike… I need to start somewhere but not having studied this in school puts me on a slight disadvantage as I don’t have the whole structure knowledge of someone who followed a path with programming…

Thank you!

[Mikael]

whatever with just a console.log and file imports, maybe watch a a video introduction of webpack on youtube (recent one).

[Madquake]

Thank you…

Maybe Babylon is too hard for my level of knowledge in programming…

I may put it on hold and see if I find something easier for now and then if I manage to get the required knowledge coming back.

Thanks for the advice.

[Mikael]

you’re welcome, meanwhile:
https://sandbox.babylonjs.com/
if you wanna play a bit to learn it in parallel of webpack.

[Madquake]

I like it, but that one is to play with the models without being able to publish them and it is not really what I am looking for.

At the moment what I 'd like to do is being able to show on my website the models I make in blender to allow users to rotate and see them in 3D.

Tbh I got discouraged a little as it is the second time that I try to learn something and I get told to give up
I am sure it doesn’t come from a bad intention but after a while it makes you feel inadapt…

Thank you anyway for the help and the links you sent and the time you spent trying to help

[Mikael]

no no no don’t give up, just learn quickly how to setup webpack.

[Raggar]

I suck at setting up a Webpack project, so I usually do one of the following:
1 - Follow a starter tutorial on Webpack + dev server/live reloading
2 - Find a simple project/template/boilerplate, make sure that it works, and then completely strip it down to the bone

[Madquake]

Hi @Raggar
Thank you.
I spent the whole afternoon yesterday learning what NPM is from scratch…

In a discord chat a friend helped me through all the passages… So now I know that npm manages the installation of external packages and needs to be initialised using npm int and then install all the required packages.

I also heard about boilerplates, but I am not sure about what they are atm.
Usually I learn better using videotutorials as being a 3D generalist I tend to learn stuff in that way…
I tried to look around but there are few tutorials on YouTube that can visually explain these concepts.

I may be slightly demotivated at the moment as it feels that when I grasp a concept 2 questions harder arise.

Mostly the problem I have is where to find the informations that are basics (like the HTML webpack plugin that I didn’t know exists since 10 minutes ago )

I really tried but I am probably too dumb for this

[Madquake]

If I regain some self-confidence, I’ll be watching some tutorials… Have been looking on YouTube but most of them are dated 2018

If you feel other users may have the same issue, I can post what I find here.

[Madquake]

I don’t know if this can be helpful to anyone, but I try to share…
I found this video quite illuminating tbh.

Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

[jelster]

I’ve found WebPack quite painful to use with BJS and ES6 tree shaking as well, but don’t give up! Once you get it set up things are generally pretty smooth.

Here is a example repos that does exactly the same thing you are trying to do. The link is for an earlier branch with just the basics in place, if you want to see more of how BJS is integrated into a full application, check out the other branches in the repos. The deployed demo is at https://dev.space-truckers.com

HTH!

[Raggar]

If you just need something fast, look at this boilerplate:

GitHub - brianzinn/snowpack-babylon: snowpack babylon.js template

As long as your browser supports modules(it most likely does), you are good to go.
And you can easily add functionality, like bundling using Webpack, using various plugins.
I have used that template more than once, and haven’t had any issues as of yet.

[gbz]

@Madquake

npx webpack serve

I’m unsure if this command will work. If you’re okay with installing webpack and serve globally on your machine, you could try:

npm i webpack -g
npm i webpack-cli -g
npm i serve -g

and then try running

webpack && serve <path to your index.html file>

In Terminal or Command Prompt, if you cd inside your directory with your index.html file, you can run

webpack && serve .

[Mikael]

I would advise against webpack in global cause that keeps the project from choosing its webpack version.
So if you have multiple project with different webpack versions it could break some of them forcing it to the version in global.