Troubles getting a typescript seed project running

[LV3]

Problem project: https://github.com/LloydVincent/babylonjs-ts-seed-test

I'm trying to set up a seed project to play around with babylonjs using typescript and did my best to follow the NPM install instructions on github. Added a typescript compiler and simple server.

My biggest problem is the all-important import code...

import * as BABYLON from 'babylonjs'

...does not appear to work and causes a console error:

Uncaught Error: Script error for "babylonjs", needed by: main
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:5)
    at HTMLScriptElement.onScriptError (require.js:5)

The import line, when compiled, causes the browser to try to load a non-existant 'babylonjs.js' file.
Ideally I'd like babylon to compile as a part of my compiled.js file, but that's not what's happening.

If anyone can figure this out or at least point me in the right direction I'd greatly appreciate it. Thanks in advance!

 

[Sebavan]

@LV3 welcome and sorry i had to move your topic in the proper category where i bet @RaananW will be more than happy to help.

[RaananW]

Hi @LV3,

May I ask what version of TypeScript you are using?

I just cloned the repository and compiled it successfully. Is there any way to reproduce the error?

[LV3]

typescript 2.5.3 (from package.json)

It compiles, but doesn't load babylon when opened in the browser (check browser console error)

Thanks for your help!

[RaananW]

I see now!

The typescript compiler alone is not enough to construct a single file containing everything you need. In order to get babylon (or other dexternal dependencies) automatically included in your project, you will need to use webpack or browserify. They pack your js files and dependencies and server it as a single file.

Another way of easily solving this is actually copying the babylon.js file to your www directory (renaming it correctly as well to babylonjs.js). This can be done in your build script automatically so you will always have the newest and the best.

I don't know lite-server good enough to tell you if there is any configuration flag that you could use in order to get it to automatically work. So if anyone knows - we will be happy to learn. But from a quick search - lite-server is not quite capable of that. Combining lite-server and a packer (or a gulp script that will build and copy everything) is probably the right way to go.

[LV3]

Thanks for your help @RaananW! I hope maybe you can offer me one more piece of advice.

I updated the repository to use a dirty workaround to at least get babylon working. https://github.com/LloydVincent/babylonjs-ts-seed-test/commit/36ad0b05981509466747b8b1a40dfa001d019583

Actually, it's basically good enough, except that using...

declare let BABYLON: any;

to access Babylon from within typescript kills any type checking/code completion. (I'm using Atom, btw)

Still frustrated as to why I can't import Babylon.

[RaananW]

Oh, you don't need to do that

You can leave the entire architecture as it was, and let requirejs do its magic. You simply need to have the file in the www directory, and require will async-load it when needed. It was simply missing, you don't need to include it in the HTML or remove the import statement (which would be a shame )

 

[LV3]

Got it working! https://github.com/LloydVincent/babylonjs-ts-seed-test/commit/15e7937f61fd9b92c9d532cf5201da3bea7761c5

It seems I needed to...

import 'babylon'

not...

import * as BABYLON from '...'

Didn't need to add any d.to locally, everything to detected straight out of node_modules (perfect!).

Fixed the repository for anyone who finds this thread later on.

[RaananW]

Both actually work the same in this case, as the namespace is being declared by he typings and you are serving the js file yourself.

If you want to use webpack OR want to change BABYLON's namespace to something else (dunno, maybe BJS or babylon, or BAB, or BetterThanThreeJS), you need to use the namespace import.

 

[HoloLite]

Glad to find this posting. I struggled for a couple of days until I saw the solution here. Would be nice if someone update the doc to reflect the correct sample codes (for typescript).

[RaananW]

For TypeScript alone - you are right. But I would always recommend using something like webpack, due to the many features it brings. I will add a note to self so I will remember to update the doc to reflect that.

[HoloLite]

How about using es6 module loading? 

I  can load my own ts module using es6 but not babylonjs. 

I posted separate question on this.