web-dev-qa-db-ja.com

node.js（ES6 / Babel）でのXのインポートとXとしてのインポートの違いは？

ES6で記述されたnode.jsライブラリlib（ Babel でコンパイルされています）を使用して、次のサブモジュールをエクスポートします。

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

私のメインプロジェクトからこのようなライブラリを含める場合

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

適切な出力が表示され、期待どおりに動作します{ config: ... }。ただし、次のようなライブラリを含めようとすると：

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

undefinedになります。

誰かがここで何が起こっているのか説明できますか？ 2つのインポート方法は同等であると思われませんか？そうでない場合、どのような違いがありませんか？

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

'lib'のすべての名前付きエクスポートを持つオブジェクトを要求しています。

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

という名前のエクスポートです。これが、あなたがやったようなオブジェクトになってしまう理由です。

import lib from 'lib';

defaultのlibエクスポートを要求しています。例えば.

export default 4;

なるだろう lib === 4。名前付きエクスポートはフェッチしません。デフォルトのエクスポートからオブジェクトを取得するには、明示的に行う必要があります

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

Logan's ソリューションに追加するだけです。なぜなら、角括弧でインポートを理解し、*で問題なく解決できるからです。

import * as lib from 'lib';

以下と同等です：

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

*は、すべてのexport varをlibからインポートするワイルドカードに似ています。

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

または、次を使用します。

import lib from 'lib';

デフォルトのエクスポートのみにアクセスできます。

// lib.js
export default storage;

{}を使用すると、特定のコンポーネントのみがモジュールからインポートされます 。これにより、Webpackなどのバンドラーのフットプリントが削減されます。

一方：

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

export default storage;を含むすべてのモジュールをインポートします

Dan Abramovの答えを参照してください： ES6インポートに中括弧を使用する必要があるのはいつですか？

7
tgrrr

import X from Y;は構文シュガーです。

import lib from 'lib';

等しい

import {default as lib } from 'lib';

0
foxiris