Where to find a 4.0.x version of es6.js?

Hi there,

The es6.js file that ships with the current distribution of Babylonjs is 3.3.0: is it possible to find a 4.0.3 version somewhere? Or to build one?

In addition/Alternatively, is it possible to use the .ts source codes of the full engine in my own project?

My idea would be to have an include/babylonjs/src/ directory in my project containing the .ts / .js source code of the engine.

That way, no publishing needed to get my site works, all the files (.js) are already there, but I can still develop/use typescript (notably, I can debug by stepping into my/bablyon .ts files instead of the .js).

Is it even possible? I’m new to .ts web site developping, and from what I understand you normally use tools like npm / gulp / webpack / … to generate a version of your project suitable to be used in the browser. But I think it’s a too much heavy-weight process (generating this file each time you modify something), I would simply like to modify my .ts files / compile them to .js then refresh the browser view to get updated code in.

Popov

Thanks for your answer, but you will see in your GITHub link that es6.js is at version 3.3.0, hence my question in the first place.

I guess,

  • es6.js = prebuilt of v3.3.0
  • babylon.js = prebuilt of v4.0.3

BTW your requirements

…modify my .ts files / compile them to .js then refresh the browser view…

is similar to mine…
https://twitter.com/ycwhk/status/1172055653038247936

plus

  • debugging in IDE
  • browser view overlay
  • hot reload

:grin:

That’s what I want to do :).

How are you doing that? What is your setup?

Have you a Github repository (or something else public) where I can see and copy your setup?

Here’s my setup

:grin:

Thanks @ycw for your hard work!

The index.ts file has some error, import ... from 'babylonjs’ does not work.

I did a npm install babylonjs --save and the file is now ok, however I can’t browse it in webpack server. http://localhost:8080/index.js or index.ts produces Can't get [FILE] and http://localhost:8080/ just shows me the public/ directory structure.

I can see the .ts file is compiled by webpack because when I modify and save it, a compiling... / Compiled successfully lines appear in the output.

Should the .js file appear in the public/ folder after compilation? Or is this folder only used when deploying my project and not during development?

Silly me, I forgot to create the public/index.html file!

So it does work now!!

A couple of questions:

  • what I did wrong to need to install babylon with npm? Not that it is a problem for me. I think it’s something to do with the typings/ folder, maybe it needs to be referenced somewhere (I tried from the .tsconfig file, but it did not work)
  • when debugging, we step into the babylon .js file: no way to step into the .ts files instead I guess?

Thanks for all your hard work again.

The index.ts file has some error, import ... from 'babylonjs ’ does not work.

Most likely you forget to

  1. put ‘babylon.js’ in “projects/{yours}/public/lib/”
  2. put “babylon.module.d.ts” in “projects/{yours}/typings/”
    (see GitHub - ycw/BabylonJS-ts.workspace.dev)

http://localhost:8080/index.js or index.ts produces Can't get [FILE]

Expected. The bundle file is here “http://localhost:8080/dist/main.js
You can config output bundle destination via devServer field in “webpack.config.js”

Should the .js file appear in the public/ folder after compilation?

No. Webpack will not write bundled .js into filesystem after compilation.
That script is stored in RAM, mainly used by “webpack-dev-server”.

Imagine that the devserver receives a HTTP request “GET /dist/main.js”,
it responds that script from RAM to client. This is much faster than
“compile > write to fs ; (on server) read from fs; push to client”.

BTW, the bundled .js (“http://localhost:8080/dist/main.js”) is not for human :joy:

Thanks for your answers, as you can see with my latest post, I forgot to create the .html file.

Getting the babylon sources/types from npm install works well for me, so I don’t need to use the typings/ folder it seems.

I need now to make the GLTF loader works, but it’s another matter…

  • set breakpoints on ‘webpack://.src/{your source}.ts’
  • to avoid step-in ‘babylon.js’ , “blackbox” it in debugger

:grinning:

In fact, I was asking if it was possible to step into the .ts sources of babylon (requiring them to be copied somewhere in the project I guess), not mine: stepping into my .ts sources does work.

I have also solved my problems with GLTF loading, so everything is ok on my side!

Thanks for your continuing help all along this thread, I think we can close it now.

Yes, it is possible.

First, put ‘babylon.max.js’ & ‘babylon.max.js.map’ into ‘projects/{yours}/public/lib/’

Then, edit ‘index.html’

<!--script src='/lib/babylon.js'></script-->
<script src='/lib/babylon.max.js'></script>

Then, you will find babylon sources(.ts) in debugger tree, you can set breakpoints in those files too.
:clap:

1 Like


:ok_hand:

Wonderful, it works!

Last thing remaining: how do you get the Chrome debugger interface (Elements/Console/Sources/… menus) into Visual Studio Code? Is it a VSC extension? It seems your chrome instance is embedded inside VSC? I’m using Debugger for Chrome but it doesn’t do this.

Is it this GitHub - FabianLauer/chrome-vs-code: A web browser integrated in VS Code editor tabs. experimental?

It is a google chrome browser. Version 78.0.3904.9 (Official Build) dev.
Not embedded. :wink:

Ok, thanks for all your answers, we are now good to close this thread!

1 Like