652

ES6 モジュールを使用すると、名前付きインポートをエイリアスできることがわかります。

import { foo as bar } from 'my-module';

そして、デフォルトのインポートをインポートできることを知っています：

import defaultMember from 'my-module';

デフォルトのインポートにエイリアスを設定したいのですが、次のようにするとうまくいくと思いました。

import defaultMember as alias from 'my-module';

しかし、それは解析 (構文) エラーになります。

デフォルトのインポートにどのように別名を付けることができますか (またはできますか?)

4

2 に答える 2

1239

defaultMemberすでにエイリアスです-エクスポートされた関数/ものの名前である必要はありません。やるだけ

import alias from 'my-module';

あるいは、あなたがすることができます

import {default as alias} from 'my-module';

しかし、それはかなり難解です。

于 2016-09-01T23:30:27.680 に答える
3

起源、解決策と答え:

バックグラウンド：

モジュールは、他のモジュールで使用するために、モジュール自体から機能またはオブジェクトをエクスポートできます

使用されるモジュール:

  • コードの再利用
  • 機能の分離
  • モジュール性

インポート エイリアスとは

インポート エイリアスは、標準のインポートを行う場所ですが、エクスポート モジュールによって定義済みの名前を使用する代わりに、インポート モジュールで定義されている名前を使用します。

何でこれが大切ですか？

エクスポートされた複数のモジュールをインポートしている可能性がありますが、(異なるモジュールからの) エクスポートの名前が同じであるため、JS が混乱します。エイリアスはこれを解決します。

複数のエイリアスでコンパイルに失敗した例:

Failed to compile.
/somepath/index.js
SyntaxError: /somepath/index.js: Identifier 'Card' has already been declared (6:9)

import { Button } from '../components/button'
import { Card } from '../components/card'
import { Card } from 'react-native-elements'

エイリアスをインポートすると、同様の名前のエクスポートをモジュールにインポートできます。

名前付きエクスポートをインポートする場合 (デフォルトではない):

// my-module.js

function functionName(){
  console.log('Do magic!');
}

export { functionName );

モジュールにインポート:

import { functionName as AliasFunction} from "my-module.js"

デフォルトのエクスポートとは何ですか?

デフォルトのエクスポートでは、単一の値をエクスポートしたり、モジュールのフォールバック値を設定したりできます。

デフォルトのエクスポートをインポートする場合 (デフォルトではない):

// my-module.js
function functionName(){
  console.log('Do magic!');
}

export default functionName;

解決

質問に記載defaultMemberされているのは既にエイリアスです。名前は好きな名前に変更できます。

次に、エクスポートされた関数をインポートします ( functionName());

import AliasFunction from "my-module.js"

または、次のように (@Bergi で言及されているように):

import {default as AliasFunction} from 'my-module.js';
于 2022-01-18T16:04:29.810 に答える