Difference between import X and import * as X in node.js (ES6 / Babel)?
Solution 1
import * as lib from 'lib';
is asking for an object with all of the named exports of 'lib'.
export var config = _config;
export var db = _db;
export var storage = _storage;
are named exports, which is why you end up with an object like you did.
import lib from 'lib';
is asking for the default
export of lib
.
e.g.
export default 4;
would make lib === 4
. It does not fetch the named exports. To get an object from the default export, you'd have to explicitly do
export default {
config: _config,
db: _db,
storage: _storage
};
Solution 2
Just adding to Logan's solution because understanding import with brackets, * and without solved a problem for me.
import * as lib from 'lib';
is the equivalent of:
import {config, db, storage} as lib from 'lib';
Where the * is similar to a wildcard that imports all of the export var
from lib.
export var config;
export var db;
export var storage;
Alternatively, using:
import lib from 'lib';
Allows you to only access the default export:
// lib.js
export default storage;
Using {} also only imports specific components from the module, which reduces the footprint with bundlers like Webpack.
While:
import storage, { config, db } from './lib'
would import all modules including export default storage;
See Dan Abramov's answer: When should I use curly braces for ES6 import?
Solution 3
import X from Y;
is a syntax sugar.
import lib from 'lib';
is equal to
import { default as lib } from 'lib';
left4bread
Updated on July 09, 2022Comments
-
left4bread almost 2 years
I have a node.js library
lib
written in ES6 (compiled with Babel) in which I export the following submodules:"use strict"; import * as _config from './config'; import * as _db from './db'; import * as _storage from './storage'; export var config = _config; export var db = _db; export var storage = _storage;
If from my main project I include the library like this
import * as lib from 'lib'; console.log(lib);
I can see the proper output and it work as expected
{ config: ... }
. However, if I try to include the library like this:import lib from 'lib'; console.log(lib);
it will be
undefined
.Can someone explain what is happening here? Aren't the two import methods supposed to be equivalent? If not, what difference am I missing?
-
Bergi over 6 yearsOnly that there is no
import {…} as … from …
syntax -
tgrrr over 6 yearsEdited. You're right, there is no spread operator for {...}, I should have used etc instead.
-
Bergi over 6 years(Of course there's no spread/rest syntax, as this is not object literal/destructuring). Still there is no
{…} as …
syntax in imports, so "is the same as" is meaningless. (I don't think you meant "produces the same syntax error as") -
tgrrr over 6 yearsThat's correct. Updated the answer for clarity. I used 'is the same as' because smaller words are more accessible. I've changed it to 'equivalent of' to be more specific.
-
Bergi over 6 yearsBut can you explain what
import {config, db, storage} as lib from 'lib';
does? It's not described anywhere