Explanation of how the gulp build/start compile the namespace of all the classes

Pryme8 · December 18, 2019, 4:54pm

I am still kinda cloudy as to how the different modules end up in the correct name spaces. For example how does BABYLON.Mesh end up scoped under BABYLON without there being any namespaces declared?

I made a similar project (non bjs) layout that was way smaller and simpler so I could understand what was really going on and when I do a build all my classes end up under the global scope and non accessible through the browser when the script is included. So I am kinda confused on what magic we use.

I was digging around through all the github stuff, and have a good idea about a lot of it. But am still kinda looking at how we end up with our namespace scope as witchcraft.

sebavan · December 18, 2019, 5:10pm

The witchcraft ends up being a lot of custom code and regex creating the file manually from the amd module generated .d.ts file… only options we found unfortunately as all the plugins for webpack were not emitting the correct DTS:

github.com

sebavan/Babylon.js/blob/master/Tools/Gulp/helpers/gulp-processAmdDeclarationToModule.js

// Gulp Tools
var fs = require("fs");

var processData = function(data, options) {
    var moduleName = options.moduleName;
    var entryPoint = options.entryPoint;

    var str = "" + data;

    // Start process by extracting all lines.
    let lines = str.split('\n');

    // Let's go line by line and check if we have special folder replacements
    // Replaces declare module '...'; by declare module 'babylonjs/...'; for instance
    for (let index = 0; index < lines.length; index++) {
        let line = lines[index];

        // Replace Type Imports
        var regexTypeImport = /(.*)type ([A-Za-z0-9]*) = import\("(.*)"\)\.(.*);/g;
        var match = regexTypeImport.exec(line);

This file has been truncated. show original

github.com

sebavan/Babylon.js/blob/master/Tools/Gulp/helpers/gulp-processModuleDeclarationToNamespace.js

// Gulp Tools
var fs = require("fs");

var processData = function(data, packageName, options) {
    var str = "" + data;

    // Start process by extracting all lines.
    let lines = str.split('\n');

    // Let's go line by line and check if we have special folder replacements
    // Replaces declare module 'babylonjs'; by declare module BABYLON for instance
    for (var index = 0; index < lines.length; index++) {
        var namespace = options.moduleName;
        var regex = /declare module ["'](.*)["'] {/g;

        if (options.moduleSpecifics) {
            var match = regex.exec(lines[index]);

            if (!match) {
                continue;

This file has been truncated. show original

Pryme8 · December 18, 2019, 5:13pm

Ok cool, I will review all of these! Thank you for pointing me in the correct way.

Pryme8 · December 18, 2019, 7:54pm

Who set this up was it you @sebavan?

It’s pretty tricky tricky… I like it.

sebavan · December 18, 2019, 7:56pm

It comes with lots and lots and lots of history…

Pryme8 · December 18, 2019, 7:57pm

I can kinda see that, I was trying to just follow along and its pretty well thought out.

hahaha from your response I take it was not that fun to setup.

Topic		Replies	Views
What Happened To Tools/Gulp Questions	13	3131	November 4, 2022
Developing with typescript Questions coding	3	918	February 16, 2021
BABYLON namespace seems to be global in typescript Questions typescript	9	831	July 11, 2023
Running editor on remote server? Questions	12	1543	October 11, 2019
Use ES6 modules without BABYLON namespace in Babylon Native Questions babylon-native	2	379	August 28, 2023

Explanation of how the gulp build/start compile the namespace of all the classes

Related topics