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.

Join lunch.dev for videos