BabylonJS. Usage TS in Browser

If you what to use a few TypeScript files the Browser you need to bundle them in on file. What is simple and cheap way to make it? Use Browserify + UglifyJS tools.

BabylonJS is a game engine for creating 3D browser games. BJS was written in TypeScript. I this instruction I will show you how to create an example with a few TypeScript files. I do not like use: Webpack, Gulp, Grunt and so on at the beginning for simple examples. 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” in the "src" folder. 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” in the "dist" folder later using this command:

npm run build

You can read here in the documentation: https://doc.babylonjs.com/ this information:

Quote

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”. Create a "tsconfig.json" file in your root folder and add this line of code to the “tsconfig.json” folder:

"types": [ "./typings/babylon" ]

You need to add two “script” tags to the “index.html”:

I will show the “Program.ts” file. Another part of the example you will find here: https://doc.babylonjs.com/ Scroll down and click on the "TypeScript" button.

Source code: official-example-bjs-ts.zip

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(); }