Configuring the BABYLONJS development environment in Visual Studio

Why (with Visual Studio)?

There are many Ides available for babylon.js Development, and Visual Studio is one of them.

With Visual Studio you will be able to compile the library with your code and test both (libraries and your code).

Compilation mode

Before you dive in, you need to understand that there are two compilation modes that you can use to compile babylon.js.

Release mode

You can use the Gulp script to create the main publishing file (Babylon.js, Babylon.max.js, Babylon.d.ts), which will be stored in the previous path.

This pattern is often used to create a new version of a quick release, which takes some time to compile and is not suitable for use in the dev/test process.

Also note that you cannot debug Babylon.js's typescript code, and the debugger will always go into the main JavaScript file (such as Babylon.js).

Development model

This mode is used when you modify a library, and instead of relying on gulp to generate a publishing file, you can simply compile all. ts files into. js (and. Js.map) files.

Advantages

• Compile fast (it compiles only. ts files into. js files, no merge/shrink files)
• You can debug the library in the typescript, set breakpoints in the. ts file, and so on.

Disadvantages

• You must refer to Babylonjs's approximately 150. js files Instead of a master file (such as Babylon.js)
• You need to do a special configuration for the engine to make it work properly.
• The entire library file must be accessible and serviced through a Web server.

The latest. js file list and engine configuration instructions can be found here.

Summary

This is how we will do the macro step:

• Copy the Babylon.js warehouse to the local
• Create a Web application project/solution and move it to the root of the Babylon.js repository, then tune
• Include the Babylon.js source code in the Web project
• Create a small typescript security sandbox

1) Copy Warehouse

Use Cmder or any other shell to jump to where you want to store the warehouse, and then copy out a warehouse.

By the way, about contributing to babylon.js, you can find more information here.

2) Create a Visual Studio project

Neither Visual Studio nor git creates a project/repository in a non-empty directory, which is a problem for us because we want the Visual Studio project to be located in the repository's root directory.

So we first create the Visual Studio project in a subdirectory of the repository and then move it to the top.

Make sure you select Create directory for solution so that the C:\test\babylon.js directory is used to store the. sln file, and in C:\test\babylon.js\babylon.js a new folder is created for the project

We chose ASP. 4, don't try the 5th edition: It still has a lot of problems.

Move the project to the upper-level directory

In Visual Studio, turn off the solution you just created, jump to the project directory you created, and move it to the top (C:\test\babylon.js\babylon.js\ is moved to C:\test\babylon.js)

Cut catalog ...

Paste to the previous layer.

Expected results

Fix Visual Studio solutions and engineering

Return to Visual Studio and open the solution.

Removal of obsolete projects

Add a new

3) Introduction of Babylon.js source code

Now click on the "Show All Files" button in the solution and select the inclusion that we care about.

We only need the "external refeernces" and "src" folders to compile the babylon.js.

When we include the "src" folder, we also include the corresponding. js files in the. ts file, and we need to remove them from the project because we don't use them. The quickest way is to edit the Visual Studio project file.

We also need to fix the problem of NuGet package reference exceptions resulting from moving the Visual Studio project to the upper directory

You need to write the project from the solution and then edit it.

Avoid all the. js file references

Perform a search/replace with "packages". \packages ", replace all.

You'll also add a line below the Typescriptsourcemap element to enable typescriptexperimentaldecorators.

The result looks like this:

    <TypeScriptSourceMap>True</TypeScriptSourceMap>    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

Save and reload the project

Build!

Build the solution, and all the. ts files will be compiled into a. js file, accompanied by the build. Js.map file (debug required).

4) Create a small security sandbox

You can get these files:

• Sandbox.ts
• Index.html
• Web. config

In your project you create a new typescript file, and you need to forget to add the following lines:

"/src/""/src/Shaders/";

This is required when you are not working with the main. js file because the shader is stored as a variable in the main. js file, and the engine must load the. fx file through the Web service you specify when you are not using it. This is why the resource must be stored in a location that the Web server can access.

Typescript file

Create an HTML file to reference all JS files of babylon.js (list can be found here)

HTML page

Setting up the startup page

We can finally edit the Web. config file to declare some file types (in fact only. fx files are enough), those files that allow Web services to access.

Add a new file type in Web. config

Build, run, look, look!

You can now debug the babylon.js using the source code.

Original address: Http://doc.babylonjs.com/generals/setup_visualStudio
GitHub translation: Https://github.com/h53d/babylonjs-doc-cn/blob/master/target/generals/General/setup_visualStudio.md

Configuring the BABYLONJS development environment in Visual Studio