How to import babylonjs modules into a project using typescript

Hello everyone, I’m still with a flappyBird approximately 2 months ago, I completed the project in a single file and in this way imported modules.


The theme is to separate the project into several files, so that each file is 1 class, among them I have a main class called Main and from the HTML I search for the Main.js


When I had everything in 1 file this way it worked, but since I am separating the project into several files, “it doesn’t work anymore,” … Does anyone know how to solve this problem? Do you know any tutorial?
As much as possible I don’t want to use npm since it considerably increases the size of the project since it links several files that if I later delete them to reduce the final size of the project they won’t work.

Hi @Ariel_Gimenez, I think it’s looking for the folder /babylon but inside the same directory as the index.html file.

Maybe try moving /babylon from /Cases ts to one directory up or duplicating your /babylon folder to one directory up.

Think you are probably doing it the hard way. Just add the Babylon.d.ts file to the source. References are mostly so transpiler knows what order to put multiple . TS files in.

@JCPalmer Hello I made this little project reproducing the problem.
import modules using inheritance with typescript babylonJS.zip (1.7 MB)

As you will see in this project I have all the imported libraries as follows.

Create a main class that calls other classes using inheritance and trying to import modules in the same way into different files.

I also have some problems in tsconfig.json

I leave an example video as well.

I really can’t find a solution to this, I mean if all the classes are in the same file it works, but when separating them they don’t work anymore … thank you very much for your time.

@gbz thanks, I reproduced the problem in this project, tell me if you can solve it. Thank you very much.
import modules using inheritance with typescript babylonJS.zip (1.7 MB)

@gbz @JCPalmer Here is the project in a single file and it does not work either. Thanks for your answers.Classes in typescript with babylonJs 1 file.zip (1.7 MB)

@Ariel_Gimenez

ariel.zip (2.5 MB)

This seems to work

npm run build builds the project
npm run launch runs the project on http://localhost/

2 Likes

@gbz Hi thank you very much, I see that you used npm, is there a way to do it without npm?
you could record video showing how you make babylon modules work using typescript in different files, you don’t need to speak, I just want to see the process since I can’t do it.
What technologies did you use to make it work with NPM, would you recommend a tutorial?

@Ariel_Gimenez, Node and npm was only used to serve the index.html file and its assets. Please feel free to not use Node and npm and serve the files as you did before.

In package.json, you can see that

  • npm run build is rm -rf ./js && rm -rf ./dist && tsc && webpack
    (This deletes the js/ and dist/ folders and compiles using TypeScript and webpack (for client-side browser compatibility)
  • npm run launch is node server.js
    (server.js is a Node script that only uses the Express framework to serve an index.html page and its assets. Please feel free to serve your page without Node and using whichever method you prefer.)

You can take a look at this very complete “starter kit” project:

4 Likes

@gbz Ok, thank you very much, I will take a few weeks to study webpack and node … I see that they are fundamental tools to continue with these technologies … Thank you for your time

2 Likes

Ok,thanks

1 Like

After several days of researching I was able to compile webpack with typescript and babylon.js here is the github source code …
Soon I will do a tutorial in Spanish.

5 Likes