wake-up-neo.com

Unterschied zwischen Import X und Import * als X in node.js (ES6/Babel)?

Ich habe eine node.js-Bibliothek lib in ES6 (kompiliert mit Babel ), in der ich die folgenden Submodule exportiere:

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

Wenn aus meinem Hauptprojekt ich die Bibliothek so einschließen

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

Ich kann die korrekte Ausgabe sehen und es funktioniert wie erwartet { config: ... }. Wenn ich jedoch versuche, die Bibliothek so einzubinden:

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

es wird undefined sein.

Kann jemand erklären, was hier passiert? Sind die beiden Importmethoden nicht gleichwertig? Wenn nicht, welchen Unterschied vermisse ich?

javascriptnode.jsecmascript-6babeljs
26
left4bread
import * as lib from 'lib';

fragt nach einem Objekt mit allen benannten Exporten von 'lib'.

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

werden Exporte genannt, weshalb Sie mit einem Objekt enden, wie Sie es getan haben.

import lib from 'lib';

fragt nach dem default-Export von lib. z.B.

export default 4;

würde lib === 4 machen. Die genannten Exporte werden nicht abgerufen. Um ein Objekt aus dem Standardexport zu erhalten, müssen Sie dies explizit tun

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

Hinzufügen zu Logan's -Lösung, weil das Importieren mit Klammern, * und ohne ein Problem für mich gelöst wurde.

import * as lib from 'lib';

ist das Äquivalent von: 

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

Wobei das * einem Platzhalter ähnelt, der den gesamten export var aus lib importiert.

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

Alternativ verwenden Sie:

import lib from 'lib';

Ermöglicht Ihnen, nur auf den Standardexport zuzugreifen:

// lib.js
export default storage;

Bei Verwendung von {} werden auch nur bestimmte Komponenten aus dem Modul importiert, wodurch bei Bundlern wie Webpack der Footprint reduziert wird.

Während:

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

würde alle Module einschließlich export default storage; importieren

Siehe Dan Abramovs Antwort: Wann sollte ich geschweifte Klammern für den ES6-Import verwenden?

5
tgrrr

import X from Y; ist ein Syntaxzucker.

import lib from 'lib';

entspricht

import {default as lib } from 'lib';

0
foxiris