chantasticWe 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.
