Packing multiple JavaScript libraries with distinct namespaces and classes in separate files

Question

Packing multiple JavaScript libraries with distinct namespaces and classes in separate files

I am dealing with various files containing namespaces and classes structured as follows:

1) namespace.js:

var mynamespace = window.mynamespace || {};

2) class1.js:

mynamespace.class1= (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

3) class2.js:

mynamespace.class2= (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

My goal is to bundle them together and make them accessible through a library. The structure I have in mind is something like the following:

expose default {
  mynamespace
};

This way, I can use it in a different project by importing it as shown below:

import * as mynamespace from 'mynamespace';

var a = function() {
    mynamespace.class1.someBoolean = true;
    ansomenamespace.class2.init();
};

Can you guide me on how to achieve this? Also, I would like to expose its type definitions for TypeScript usage. Thank you!

javascript typescript bundle javascript-namespaces

Answer 1

Answer №1

You seem to be mixing the import/export style modules with those attached to window. It's advisable to choose one approach and stick with it.

For instance, if you want to attach everything to window:

namespace.js

var somenamespace = window.somenamespace || {}; // not required

class1.js

var somenamespace = window.somenamespace || {};

somenamespace.class1= (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

class2.js

var somenamespace = window.somenamespace || {};

somenamespace.class2= (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

using the module

// simply access from window without importing

var a = function() {
    window.somenamespace.class1.someBoolean = true;
    window.ansomenamespace.class2.init();
};

Alternatively, I suggest using import/export, but remember to transpile your code with Babel or Webpack since not all browsers support ES modules:

namespace.js

export {class1} from './class1'
export {class2} from './class2'

class1.js

export const class1 = (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

class2.js

export const class2 = (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

using the module

import * as somenamespace from './namespace'

var a = function() {
    somenamespace.class1.someBoolean = true;
    ansomenamespace.class2.init();
};

Answer 2

You seem to be mixing the import/export style modules with those attached to window. It's advisable to choose one approach and stick with it.

For instance, if you want to attach everything to window:

namespace.js

var somenamespace = window.somenamespace || {}; // not required

class1.js

var somenamespace = window.somenamespace || {};

somenamespace.class1= (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

class2.js

var somenamespace = window.somenamespace || {};

somenamespace.class2= (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

using the module

// simply access from window without importing

var a = function() {
    window.somenamespace.class1.someBoolean = true;
    window.ansomenamespace.class2.init();
};

Alternatively, I suggest using import/export, but remember to transpile your code with Babel or Webpack since not all browsers support ES modules:

namespace.js

export {class1} from './class1'
export {class2} from './class2'

class1.js

export const class1 = (function() {
  var _public = {};
  _public.someBoolean= false;
  return _public;
})();

class2.js

export const class2 = (function() {
  var _public = {};
  _public.init= function() {
  };
  return _public;
})();

using the module

import * as somenamespace from './namespace'

var a = function() {
    somenamespace.class1.someBoolean = true;
    ansomenamespace.class2.init();
};

Packing multiple JavaScript libraries with distinct namespaces and classes in separate files

Answer №1

Similar questions

Step-by-step guide on defining a property within the ng-repeat's scope

Tips for effectively handling notifications using a single state management system

Inactive drop-down menu

The nodes.attr() function is invalid within the D3 Force Layout Tick Fn

Express.js is unable to redirect to a customized URL scheme

Need a module from the main directory

Potential issue of excessive memory usage in node.js when running an Express server with PM2

How to Fetch a Singular Value from a Service in Angular 4 Using a Defined Pattern

Arrangement of bootstrap and CSS library in header has an impact on the styling of h3 Tag

How to use multiple template urls in Angular 6

What is preventing me from accessing the sub-elements of an AngularJS controller?

Using the preselection feature in the MUI DataGrid can cause the grid to become disabled

The decision between using multiple then statements or consolidating your code into a single then statement depends on the specific requirements

I'm looking for a way to transform multiple arrays into HTML tables in JavaScript and display them as I loop through a JSON object. Can anyone

Unleashing the power of Javascript to generate all possible combinations of multiple arrays of objects

Tips for Providing a Generic Type to a Component Imported Using Next.js Dynamic

Learn the process of accessing web config values within Vue.js code

Is it possible to prevent Firebase Auth Network Error by using event.preventDefault() and event.stopPropagation()?

Discovering, storing, and displaying JSON data in JavaScript

The SonarQube code coverage differs from that of Jest coverage