Import All Named Exports into One Variable

We can import all of a JavaScript module's contents into a single variable with * as.

import * as stringUtils from "./string-utils.mjs";

Now stringUtils can reference any exports in string-utils.mjs using property access syntax.

import * as stringUtils from "./string-utils.mjs";

stringUtils.chant("we will");
stringUtils.hype("rock you");

Where is this a good practice? #

Importing all named exports into a single variable is great feature for application code.

Consider these UI modules that have a similar export signatur.

email.js

export Item …;
export List …;
export ListItem …;
export Controller …;

contact.js

export Item …;
export List …;
export ListItem …;
export Controller …;

Renaming all of these named exports is super irritating!

import {
  List as EmailList,
  ListItem as EmailListItem,
  Controller as EmailController,
} from "./email.js";
import {
  List as ContactList,
  ListItem as ContactListItem,
  Controller as ContactController,
} from "./contact.js";

By reducing moduling imports to a single reference, we eliminate the need to rename the colliding exports.

import * as Email from "./email.js";
import * as Contact from "./contact.js";

// Email.List, Contact.List, Email.Item, Contact.Item, etc.

And these namespaces guarantee that we never experience a collision between named exports.

My take #

This is my preferred way to import named exports. It has eliminated pointless hours spent justifying local references between modules I don't control.

Go pro #

This is part of a course I'm build on modules at lunch.dev.
When live, members get access to this and other courses on React.