How do I assign a namespace using ES6 modules? I'd like to do with for example jQuery does, where the namespace is $ but doing it the intended ES6 way. All my modules are structured in separate files which export the classes/functions/whatever as default (e.g. export default class Pikachu). How do I import it into another (main) file so that a user can access this class using e.g. Namespace.Pikachu?

I have e to understand that it might have to do with named exports but I'm not quite totally sure how. Any help please?

How do I assign a namespace using ES6 modules? I'd like to do with for example jQuery does, where the namespace is $ but doing it the intended ES6 way. All my modules are structured in separate files which export the classes/functions/whatever as default (e.g. export default class Pikachu). How do I import it into another (main) file so that a user can access this class using e.g. Namespace.Pikachu?

I have e to understand that it might have to do with named exports but I'm not quite totally sure how. Any help please?

• javascript
• module
• namespaces
• ecmascript-6

• 2 See second example. – rgajrawala Commented Feb 8, 2016 at 2:12
• You just export an object with a Pikachu property, as always. But why would you do that, instead of letting the user import … from '…/pikachu' whatever and in whichever way he chooses? – Bergi Commented Feb 8, 2016 at 2:12
• @usandfriends thanks! i must have accidentally skipped it over when reading that article! – AKG Commented Feb 8, 2016 at 2:25

2 Answers 2

If you use modules, you don't need namespaces.

The point of namespaces is to prevent conflicts between different files that define the same names.

Modules eliminate this problem entirely by letting the callsite choose a name to give each module it needs.

You just export a simple object with the things you want, and other files can import that to any name they choose.

It's an old question with an accepted answer, but I feel that one should mention that module namespaces are nevertheless supported to some extent. As was already noted by the ment of @rgajrawala , an import of all exported variables from a module via "*" always creates such a namespace. (see here on MDN)

import * as Namespace from "./myModule.js";
console.log(Namespace.default); // in the OP, Pikachu is exported as default
//console.log(Namespace.Pikachu); // if Pikachu wasn't exported as default

Similarly, dynamic imports always return a Promise for a module-namespace:

const Namespace = await import("./myModule.js");
console.log(Namespace.default);
//console.log(Namespace.Pikachu);

For more details on what kind of object such a namespace is, see this SO answer

A third alternative (in general not preferable, see ments to this answer) is to create a namespace already in the module and make it the default export:

// within "./myModule.js"
export default {Pikachu, otherVariable, ...};
// within the other module
import Namespace from "./myModule.js";
console.log(Namespace.Pikachu);