I made the solution that is optimal for me. I will describe it here. Maybe it will useful for somebody and I will not forget it. It is very important to know how to create a project with a few TS files. I do not like use: Webpack, Gulp, Grunt and so on. Because they require a lot of disk space on my laptop for my little examples. I create a lot of examples when I study something. For example, Gulp requires 80 MB. If I have 100 examples in TS then I will lost 800 MB. I use Browserify for creating a bundle that I can use in the browser. And I use UglifyJS to minify this bundle. You can install them only once using this commands:
npm install browserify -g
npm install uglify-js -g
Generate the “package.json” file using this command:
npm init -y
For example, you have two files with names “Program.ts” and “Game.ts”. Open the “package.json” file and add these lines in the “scripts” section:
"scripts": {
"browserify": "browserify dist/Program.js -o dist/bundle.js",
"uglifyjs": "uglifyjs dist/bundle.js -o dist/bundle.min.js",
"build": "tsc && npm run browserify && npm run uglifyjs"
},
You can generate the “bundle.min.js” using this command:
npm run build
You can read here https://doc.babylonjs.com/ this information:
The example project below uses the most recent release of BabylonJS via the BabylonJS CDN, so you don’t need to download BabylonJS locally in order to use it.
However, you will need to download the BabylonJS TypeScript definition file from https://preview.babylonjs.com/babylon.d.ts in order to compile your project. Save this babylon.d.ts
file into your project folder and create an empty index.html
like so:
I want to keep all “.d.ts” files in the separate folder with the name “typings”. I can add this line of code to the “tsconfig.json” folder for this:
"types": [
"./typings/babylon"
]
You need to add two “script” tags to the “index.html”:
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="dist/bundle.min.js"></script>
I will show the “Program.ts” file. Another part of the example you will find here: https://doc.babylonjs.com/
Source Code: official-example-bjs-ts.zip (393.4 KB)
Program.ts
import { Game } from "./Game";
class Program
{
public static Main()
{
// Create the game using the 'renderCanvas'.
let game = new Game('renderCanvas');
// Create the scene.
game.createScene();
// Start render loop.
game.doRender();
}
}
window.onload = () =>
{
Program.Main();
}