# Babylon.js ES6 support with Tree Shaking Installation
**URL:** https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257
**Category:** Questions
**Tags:** documentation
**Created:** [August 21, 2021, 10:41am UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257 "2021-08-21T10:41:10Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 10:41am UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/1 "2021-08-21T10:41:10Z")
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](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking)**
>
> Learn about tree shaking and package management in Babylon.js.
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](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#basic-usage)**
>
> Learn about tree shaking and package management in Babylon.js.
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](https://doc.babylonjs.com/divingDeeper/developWithBjs/treeShaking#installing-other-babylon-modules)**
>
> Learn about tree shaking and package management in Babylon.js.
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.
1. 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 😅).
2. To import the dependencies, you simply need to import the library (without giving it a namespace):
```auto
import {
GridMaterial
} from '@babylonjs/materials';
let skyMaterial = new GridMaterial(.....)
```
This is still referred to the top of the index.js file, isn’t it?
1. On the bottom of the HTML example file, the script is called with ``, 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 🙂
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 12:11pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/2 "2021-08-21T12:11:03Z")
I tried to make it work, but when I run `npx webpack serve` and then I navigate to **[http://localhost:8080/](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 😄
---
### Author:  [@Mikael](https://forum.babylonjs.com/u/Mikael)
#### Post date: [August 21, 2021, 12:16pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/3 "2021-08-21T12:16:23Z")
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.
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 12:40pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/4 "2021-08-21T12:40:45Z")
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.
```auto
{
"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 🙂
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 12:45pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/5 "2021-08-21T12:45:32Z")
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](https://stackoverflow.com/questions/tagged/webpack)
I can try to pop the question and see if someone had a similar issue…
---
### Author:  [@Mikael](https://forum.babylonjs.com/u/Mikael)
#### Post date: [August 21, 2021, 12:47pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/6 "2021-08-21T12:47:19Z")
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](https://webpack.js.org/plugins/html-webpack-plugin/)**
>
> webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
Honestly try some small webpack projects to be at ease with it then you’ll be able to setup it with babylon I think.
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 12:54pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/7 "2021-08-21T12:54:26Z")
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!
---
### Author:  [@Mikael](https://forum.babylonjs.com/u/Mikael)
#### Post date: [August 21, 2021, 1:01pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/8 "2021-08-21T13:01:11Z")
whatever with just a console.log and file imports, maybe watch a a video introduction of webpack on youtube (recent one).
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 1:04pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/9 "2021-08-21T13:04:16Z")
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.
---
### Author:  [@Mikael](https://forum.babylonjs.com/u/Mikael)
#### Post date: [August 21, 2021, 1:05pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/10 "2021-08-21T13:05:35Z")
you’re welcome, meanwhile:
[https://sandbox.babylonjs.com/](https://sandbox.babylonjs.com/)
if you wanna play a bit to learn it in parallel of webpack.
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 1:13pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/11 "2021-08-21T13:13:48Z")
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 😄
---
### Author:  [@Mikael](https://forum.babylonjs.com/u/Mikael)
#### Post date: [August 21, 2021, 1:18pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/12 "2021-08-21T13:18:21Z")
no no no don’t give up, just learn quickly how to setup webpack.
---
### Author:  [@Raggar](https://forum.babylonjs.com/u/Raggar)
#### Post date: [August 21, 2021, 1:29pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/13 "2021-08-21T13:29:02Z")
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
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 1:49pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/14 "2021-08-21T13:49:14Z")
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 😅
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 2:37pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/15 "2021-08-21T14:37:17Z")
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.
---
### Author:  [@Madquake](https://forum.babylonjs.com/u/Madquake)
#### Post date: [August 21, 2021, 3:35pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/16 "2021-08-21T15:35:33Z")
I don’t know if this can be helpful to anyone, but I try to share…
I found this video quite illuminating tbh.
[ ](https://www.youtube.com/watch?v=5IG4UmULyoA)
---
### Author:  [@jelster](https://forum.babylonjs.com/u/jelster)
#### Post date: [August 21, 2021, 4:12pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/17 "2021-08-21T16:12:36Z")
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](https://github.com/jelster/space-truckers/tree/ch3) 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](https://dev.space-truckers.com)
HTH!
---
### Author:  [@Raggar](https://forum.babylonjs.com/u/Raggar)
#### Post date: [August 21, 2021, 7:20pm UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/18 "2021-08-21T19:20:21Z")
If you just need something fast, look at this boilerplate:
> **[GitHub - brianzinn/snowpack-babylon: snowpack babylon.js template](https://github.com/brianzinn/snowpack-babylon)**
>
> snowpack babylon.js template. Contribute to brianzinn/snowpack-babylon development by creating an account on GitHub.
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.
---
### Author:  [@gbz](https://forum.babylonjs.com/u/gbz)
#### Post date: [August 22, 2021, 3:24am UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/19 "2021-08-22T03:24:36Z")
> [@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:
```auto
npm i webpack -g
npm i webpack-cli -g
npm i serve -g
```
and then try running
```auto
webpack && serve
```
In Terminal or Command Prompt, if you `cd` inside your directory with your `index.html` file, you can run
```auto
webpack && serve .
```
---
### Author:  [@Mikael](https://forum.babylonjs.com/u/Mikael)
#### Post date: [August 22, 2021, 8:07am UTC](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257/20 "2021-08-22T08:07:41Z")
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.
[Next page](https://forum.babylonjs.com/t/babylon-js-es6-support-with-tree-shaking-installation/23257.md?page=2)