web-dev-qa-db-fra.com

Différence entre import X et import * en tant que X dans node.js (ES6/Babel)?

J'ai une bibliothèque node.js lib écrite en ES6 (compilée avec Babel ) dans laquelle j'exporte les sous-modules suivants:

"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;

Si de mon projet principal j'inclus la bibliothèque comme ceci

import * as lib from 'lib';
console.log(lib);

Je peux voir la sortie appropriée et cela fonctionne comme prévu { config: ... }. Cependant, si j'essaie d'inclure la bibliothèque comme ceci:

import lib from 'lib';
console.log(lib);

ce sera undefined.

Quelqu'un peut-il expliquer ce qui se passe ici? Les deux méthodes d'importation ne sont-elles pas supposées être équivalentes? Si non, quelle différence me manque-t-il?

26
left4bread
import * as lib from 'lib';

demande un objet avec toutes les exportations nommées de 'lib'.

export var config = _config;
export var db = _db;
export var storage = _storage;

sont nommés exports, ce qui explique pourquoi vous vous retrouvez avec un objet comme vous l'avez fait.

import lib from 'lib';

demande l'exportation default de lib. par exemple.

export default 4;

ferait lib === 4. Il ne récupère pas les exportations nommées. Pour obtenir un objet de l'exportation par défaut, vous devez explicitement faire

export default {
  config: _config,
  db: _db,
  storage: _storage
};
44
loganfsmyth

Il suffit d’ajouter à Logan - solution car comprendre l’importation avec des crochets * et sans résoudre un problème pour moi.

import * as lib from 'lib';

est l'équivalent de: 

import {config, db, storage} as lib from 'lib';

Où * est similaire à un caractère générique qui importe tout le export var depuis lib.

export var config;
export var db;
export var storage;

Alternativement, en utilisant:

import lib from 'lib';

Vous permet uniquement d'accéder à l'exportation par défaut:

// lib.js
export default storage;

L'utilisation de {} importe également uniquement des composants spécifiques du module, , ce qui réduit l'encombrement avec des bundles tels que Webpack.

Tandis que:

import storage, { config, db } from './lib'

importerait tous les modules, y compris export default storage;

Voir la réponse de Dan Abramov: Quand devrais-je utiliser des accolades pour l'importation ES6?

5
tgrrr

import X from Y; est un sucre de syntaxe.

import lib from 'lib';

est égal à

import {default as lib } from 'lib';

0
foxiris