web-dev-qa-db-ja.com

ワイルドカードまたはアスタリスク（*）と名前付きまたは選択的インポートes6 javascript

インポートを使用する最良の方法はどれか疑問に思ってください：

import * as Foo from './foo';

VS：

import { bar, bar2, bar3 } from './foo';

たとえば、効率の面では、すべてのJavaScriptファイルをバンドルするためにwebpackを使用しています。メインコードでそれらを使用していない場合でも、最初のものは実際にすべてをインポートしますか？

私が見つけることができるいくつかの参照は次のとおりです。

Airbnbスタイルガイド では、ワイルドカードを推奨しないため、常にデフォルトのインポートオブジェクトが存在し、 this となります。

javascriptimportecmascript-6wildcardes6-modules
26
andiwin

新しいuglifyが提供するデッドコードの除去を使用してwebpackを使用する場合、またはツリーシェークを使用するrollupjsを使用する場合、未使用のインポートは削除されます。

ワイルドカードのインポートを使用しないというairbnbスタイルガイドに部分的に同意しますが、javascriptのワイルドカードのインポートは、たとえばpythonsまたはjavasのワイルドカードのインポートと同じ病気に苦しむことはありません、つまり、他のモジュールで定義された変数名でスコープを汚染しませんmoduleB.fooを使用している場合、fooではなくimport * as moduleB from ...によってのみアクセスできます。

テストに関する記事について：私は懸念をある程度理解していますが、そこで解決できないものは見当たりません。カスタムモジュールローダー（カスタムAMDモジュールローダーは文字通り15行のコード）でインポート自体をモックできます。そのため、テストされたモジュールのローカルスコープをいじる必要はありません。

19
Tamas Hegedus

質問のこの部分に関して：

メインコードでそれらを使用していない場合でも、最初のものは実際にすべてをインポートしますか？

Babel 6.26でコンパイルする方法は次のとおりです。

名前付き

import { bar, bar2, bar3 } from './foo';

...になります...

'use strict';

var _foo = require('./foo');

ワイルドカード

import * as Foo from './foo';

...になります...

'use strict';

var _foo = require('./foo');

var Foo = _interopRequireWildcard(_foo);

function _interopRequireWildcard(obj) { 
    if (obj && obj.__esModule) { 
        return obj;
    } else {
        var newObj = {}; 
        if (obj != null) { 
            for (var key in obj) { 
                if (Object.prototype.hasOwnProperty.call(obj, key))
                    newObj[key] = obj[key];
            }
        }
        newObj.default = obj; 
        return newObj;
    }
}

どちらの場合も、requireを介してファイル全体がインポートされます。

ワイルドカードのインポートでは、_interopRequireWildcard関数が定義され、すべてのエクスポートを名前空間変数に割り当てるために使用されます。

コンパイルされたコードには、単一の_interopRequireWildcard定義と、インポートごとにrequireおよび_interopRequireWildcardの1つの呼び出しのみが含まれることに注意してください。

最終的に、ワイルドカードのインポートを使用すると、実行時にもう少し処理が必要になり、コンパイルされたjsのサイズがわずかに増加します。

15
idmadj

@Tamasに同意します。
ターゲットファイル内のすべてのエクスポートへのフルアクセスが必要な場合は、import * as Foo from './foo'; または import foo from './foo':

ただし、特定の関数またはconstを使用する必要がある場合は、「import *」を避け、実行する必要があることを明示してください。

6
Moeen Basra

最新のWebPackセットアップでは、2つは同じコンパイル/トランスポートされたJSを生成するため、名前付きインポートの実際の値は、それがどれだけ表現力豊かであるかです。インポートに名前を付けることで、使用するモジュールから機能するファイルを開くものを指定します。これが役立つ場合の例は、テストを記述するときに、モックが必要な場合、モックへのインポートの明示的なリストがあります。

4
Kelly Anderson