ES6 Javascript複数の名前で同じjsファイルをインポート

Question

私はES6で作業しています。同じファイルを2つの異なる名前としてインポートしたいと思います。

import Contact from './Grid' 
import Account from './Grid' 

Webpackが複数回インポートすることなく、連絡先とアカウントの両方でグリッド名を付けられる方法はありますか？

Answer 1

それをインポートし、複数回のWebPACKせずに？

2つの別々のインポートステートメントを使用すると、ファイルは複数回実行されません。ファイルが一度ロードされると、エクスポートされた値はキャッシュされ、後の呼び出しで使用されます。それを1つのステートメントにグループ化する唯一の理由は、潜在的な可読性の向上です。あなたの質問に答えるために、あなたがしたい場合は、

import { 
    default as Contact, 
    default as Account, 
} from './Grid'; 

があります。あなたはまた、潜在的

import Contact from './Grid' 
const Account = Contact; 

はちょうどそれがあなたのモジュール内の循環依存がある場合に かなり同じことをしていないことに注意して行うことができます。

Answer 2

グリッドファイルで、目的のオブジェクト/関数/などをエクスポートしている場合。デフォルトのエクスポート（下記参照）として、インポート時に任意の名前を使用できます。グリッドが関数である場合の例では、次のようになります。

//Grid file 
export default function Grid() { 
    // your Grid info 
} 

と

//import file 
import Contact from './Grid' 
import Account from './Grid'