インポート後にES6モジュール要素を直接インポートしたり、const割り当てを解除したりできますか？

Question

ES6モジュールにやや新しいと私は、次の2つのパターンの間に引き裂か見つける...

パターン＃1からconst

import * as myFuncs from 'my-funcs'; 
const { func1, func2, func3 } = myFuncs; 

に非構造 - import

import { func1, func2, func3 } from 'my-funcs'; 

パターン＃2に非構造

私はその簡潔さのためにパターン＃1を好きですが、パターン＃2がより明白に思われるので、パターン＃2も好きです。

もう一方を使用する理由はありますか？

Answer 1

インポートは、（値ではなく）変数にバインドされています。これは、エクスポートモジュールがエクスポートした変数を変更すると、その更新された値がインポートされたすべてのモジュールに反映されることを意味します。

例えば、プリミティブ値をエクスポートし、それから何らかの不特定期間の後にプリミティブ値を変更するモジュールがあるとします。

import { myVar } from './myVar.js'; 
console.log(myVar); 
setTimeout(() => { console.log(myVar); }, 3000); 

main1.jsは、出力は次のようになります：しかし

1 
2 

、場合

myVar.js

export var myVar = "1"; 
setTimeout(() => {myVar = "2"}, 2000); 

は、あなたがそうのようにそれを輸入したと元のバリューを割り当てたそれをインポートすると直ちに変数に変更すると、値は変更されません。このプログラムの

main2.js

import * as MyVar from './myVar.js'; 
const myVar = MyVar.myVar; 
console.log(myVar); 
setTimeout(() => { console.log(myVar); }, 3000); 

出力は次のようになります。

1 
1 

この違いは、あなたが心に留めておきたいものになることがあります。

Answer 2

最初のものは非構造化ではなく、名前付きのエクスポートをモジュールスコープにインポートしています。 2番目はモジュール名前空間オブジェクトをmyFuncsの名前でインポートしてから、それを破棄します。

主な違いは、2番目のパターンでは、エクスポートされたバインディング（変更される可能性がある）への直接参照ではなく、定数があることです。これは重要です。循環依存については。

追加の識別子はmyFuncsで、これはむしろ無駄です。しかし、モジュールのすべてのエクスポートにアクセスすることができます。モジュールの一部だけを明示的にインポートすると、バンドラはより小さな結果を生成する可能性があります。

もう1つを使用する理由はありますか？

絶対的に - 最初のパターンはより簡単で短く、エッジの場合に正しく動作し、最適化することができます。