How to use "exports" to export a single variable (a counter) in JavaScript ES5

I want to export a single variable that I will increase. My TypeScript example works very well:

main.ts

import { myFirstFunction, mySecondFunction, counter } from "./functions";

function main()
{
    console.log("main");
    myFirstFunction();
    mySecondFunction();
    console.log(`counter = ${counter}`);
}

main();

functions.ts


export let counter = 0;

export function myFirstFunction(): void
{
    console.log("my first function");
    counter++;
}

export function mySecondFunction(): void
{
    console.log("my second function");
    counter++;
}

Output:

main
my first function
my second function
counter = 2

But how to translate this example to ES5 and Browserify? I do not want to export an object because I do not want to use a prefix like counterInfo.counter. I want to use counter. But when I translate this example I get counter = 0:

main.js


var { myFirstFunction, mySecondFunction, counter } = require("./functions");

function main()
{
    console.log("main");
    myFirstFunction();
    mySecondFunction();
    console.log("counter = " + counter);
}

window.onload = main();

functions.js


exports.counter = 0;

function myFirstFunction()
{
    console.log("my first function");
    exports.counter++;
}

function mySecondFunction()
{
    console.log("my second function");
    exports.counter++;
}

exports.myFirstFunction = myFirstFunction;
exports.mySecondFunction = mySecondFunction;

Output:

main
my first function
my second function
counter = 0

Why do you use this exports.counter?

You should be able to use exact the same syntax like in typescript. You only have to remove the return type definitions from the methods.

This works fine for me:

import { myFirstFunction, mySecondFunction, counter } from "./functions.js";

function main()
{
    console.log("main");
    myFirstFunction();
    mySecondFunction();
    console.log("counter" + counter);
}

main();


export let counter = 0;

export function myFirstFunction()
{
    console.log("my first function");
    counter++;
}

export function mySecondFunction()
{
    console.log("my second function");
    counter++;
}

I use it because it works with Browserify.

This is a solution. I wanted a global variable for whole project without prefix like global, or parentheses. I know that global variables are bad. But I just need to initialize Ammo.js and WebGL in one place and use Ammo and gl variables in the rest project files. counter is just for example.

main.js


var { myFirstFunction, mySecondFunction } = require("./functions");

function main()
{
    console.log("main");
    myFirstFunction();
    mySecondFunction();
    console.log("counter = " + counter);
}

window.onload = main();

functions.js

counter = 0;

function myFirstFunction()
{
    console.log("my first function");
    counter++;
}

function mySecondFunction()
{
    console.log("my second function");
    counter++;
}

exports.myFirstFunction = myFirstFunction;
exports.mySecondFunction = mySecondFunction;

So if you need a global variable couldn’t you at minimum use the standard way of using window?

window.myNameSpace = {};
window.myNameSpace.counter = 0;

But I cannot write just counter in main.js. Can I?

Like this:

function main()
{
    console.log("main");
    myFirstFunction();
    mySecondFunction();
    console.log("counter = " + counter);
}

No but why is that important?

I use WebGL. I want to initialize the gl variable in one place, for example, in the WebGLContext.js file:


gl = null;

class WebGLContext
{
    static Init(canvasName)
    {
        const canvas = document.getElementById(canvasName);
        if (!canvas)
        {
            console.log("Failed to get the HTML5 canvas element");
            return false;
        }

        gl = canvas.getContext("webgl");
        if (!gl)
        {
            console.log("Failed to get WebGL 1.0 rendering context");
            return false;
        }

        return true;
    }
}

module.exports = WebGLContext;

And I want to use the gl variable in the rest project files, for example, in the main.js file:

function init()
{
    if (!WebGLContext.Init("renderCanvas")) return;

    gl.clearColor(0.2, 0.2, 0.2, 1);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    ...
}

You can easily make a variable

export WebGLContext.gl

and use this in your init

class WebGLContext
{
    static Init(canvasName)
    {
        const canvas = document.getElementById(canvasName);
        if (!canvas)
        {
            console.log("Failed to get the HTML5 canvas element");
            return false;
        }

        WebGLContext .gl = canvas.getContext("webgl");
        if (!WebGLContext gl)
        {
            console.log("Failed to get WebGL 1.0 rendering context");
            return false;
        }

        return true;
    }
}

Then you can import WebGLCOntext in your main and access the gl with WebGLContext.gl

There is no need of a global variable

But the export keyboard does not work with Browserify. This is my settings in package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "clear": "del /f /q /s .\\public\\js\\*.*",
    "del-bundle": "del /f /q /s .\\src\\bundle.js",
    "bundle-debug": "browserify --debug src/client/main.js -o public/js/bundle.js",
    "bundle-release": "browserify src/client/main.js -o src/client/bundle.js",
    "uglify": "uglifyjs src/client/bundle.js -o public/js/bundle.min.js",
    "debug": "npm run bundle-debug",
    "release": "npm run clear && npm run bundle-release && npm run uglify && npm run del-bundle"
  },

I use the npm run debug command for debugging and npm run release for release. When I use export I get an error from Browserify.

You do not need to make the WebLContext file a module. You can also just include is with a

<script type="javascript" src="WebGLContetxt.js"></script>

then you do not need the export at all and you also do not need the import and can access WebGLContext.counter everywhere

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.