web-dev-qa-db-ja.com

「import * asFoo」と「importFoo」をいつ使用するのですか？

BackboneJS（v1.2.2）プロジェクトをBabelJS付きのES6に変換しています。

私は次の間に違いがあることに気づきました：

import Backbone from 'backbone'

そして

import * as Backbone from 'backbone'

here を読んだ後、前者はBackboneのデフォルトのエクスポートをインポートしているのに対し、後者は「モジュール全体をインポートし、プロパティ表記を介してその名前付きエクスポートを参照する」ことができることを理解しています。

私はこれらの違いを理解するのに苦労しています。オブジェクトは両方のインスタンスで返されますが、前者は追加のプロパティ/メソッドで装飾されているようです。少なくとも、「モジュール全体」をインポートすると、より多くのプロパティ/メソッドが含まれると思います...しかし、反対のことがわかります。

javascriptimportecmascript-6
19
Sean Anderson

モジュールは、単一の「デフォルトのエクスポート」および/または1つ以上の名前付きエクスポートをエクスポートできます。

質問の最初の構文でインポートすると、デフォルトのエクスポートのみがインポートされ、名前付き識別子（サンプルのバックボーン）がそのオブジェクトに設定されます。

2番目の構文は名前空間インポートと呼ばれ、モジュール全体を単一の「名前空間」オブジェクトの下にインポートします。

例えば：

export.js

let b = {b: 2};
export default {a: 1}; // <- this is the ONLY default export
export {b};
export let c = {c: 3};

import.js

import SomeName from 'export'; // 'SomeName' is now the {a: 1} instance.
import {b} from 'export'; // 'b' is now the {b: 2} instance.
import * as ns from 'export'; /* 'ns' now has properties 'default', 'b' & 'c',
  representing {a: 1}, {b: 2} & {c: 3} respectively */
25
Amit

モジュールのインターフェースとそれをどのように利用したいかによります。 Backboneのnpmパッケージの場合、実際にはデフォルトのエクスポートがないため、Babelによってトランスパイルされた場合、両方のバージョンはほぼ同等である必要があります。

少なくとも、「モジュール全体」をインポートすると、より多くのプロパティ/メソッドが含まれると思います。

これは、デフォルトのエクスポートとは何か、および名前付きエクスポートが何であるかによって異なります。これが当てはまらない場合の例を次に示します。

exporter.js

export default {
  one: "One",
  two: "Two",
  three: "Three",
};

export var a;

importer.js

// Has 3 props ['one', 'two', 'three']
import defaultExport from 'exporter';

// Has 2 props ['default', 'a'].
import * as allExports from 'exporter';
1
JMM