web-dev-qa-db-ja.com

なぜ、いつes6モジュールで名前付きエクスポートよりもデフォルトのエクスポートを使用するのですか？

私はすべての質問をstackoverflowで参照しました。しかし、デフォルトのエクスポートを使用する理由と時期は提案されていません。

デフォルトが「ファイルにエクスポートが1つしかない場合」に言及できることを見た

Es6モジュールでデフォルトのエクスポートを使用する他の理由は何ですか？

javascriptes6-modules
16
vbharath

どちらかを選択する可能性のあるいくつかの違い：

名前付きエクスポート

  • 複数の値をエクスポートできます
  • インポート時にはエクスポートされた名前を使用する必要があります

デフォルトのエクスポート

  • 単一の値をエクスポートする
  • インポート時に任意の名前を使用できます

この記事 は、どちらを使用するのが良いかを説明する素晴らしい仕事をします。

9
Ben

名前付きエクスポートでは、ファイルごとに複数の名前付きエクスポートを持つことができます。次に、ブレースで囲まれた特定のエクスポートをインポートします。インポートされたモジュールの名前は、エクスポートされたモジュールの名前と同じである必要があります。

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";

// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";

// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";

// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

名前付きインポートのエイリアスを作成したり、インポート時に名前付きエクスポートに新しい名前を割り当てたりして、名前の競合を解決したり、エクスポートにわかりやすい名前を付けたりすることもできます。

import MyComponent as MainComponent from "./MyComponent";

名前付きエクスポートをすべてオブジェクトにインポートすることもできます。

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2 here

ファイルごとにデフォルトのエクスポートを1つだけ持つことができます。インポートするときは、次のように名前を指定してインポートする必要があります。

// import

import MyDefaultComponent from "./MyDefaultExport";

// export

const MyComponent = () => {}

export default MyComponent;

インポートの命名は、デフォルトのエクスポートでは完全に独立しており、任意の名前を使用できます。

From [〜＃〜] mdn [〜＃〜] ：名前付きエクスポートは、いくつかの値をエクスポートするのに役立ちます。インポート中、同じ名前を使用して対応する値を参照できます。デフォルトのエクスポートに関しては、モジュールごとに1つのデフォルトのエクスポートのみがあります。デフォルトのエクスポートには、関数、クラス、オブジェクトなどがあります。この値はインポートが最も簡単なので、「メイン」のエクスポート値と見なされます。

6
Afaq Ahmed Khan

最初の方法：-

export foo; //so that this can be used in other file

import {foo} from 'abc'; //importing data/fun from module

2番目の方法：-

export default foo;  //used in one file

import foo from 'blah'; //importing data/fun from module

3番目の方法：-

export = foo;

import * as foo from 'blah';

上記のメソッドは、大まかに以下の構文にコンパイルされます。

//すべてのエクスポートメソッド

exports.foo = foo; //1st method
exports['default'] = foo; //2nd method
module.exports = foo; //3rd method

//すべてのインポートメソッド

var foo = require('abc').foo; //1st method
var foo = require('abc')['default']; //2nd method
var foo = require('abc'); //3rd method

詳細については、 デフォルトのキーワードの説明にアクセスしてください

注：-oneファイルにはdefault export oneのみを含めることができます。

したがって、1つの関数のみをエクスポートする場合は常に、エクスポート中にdefaultキーワードを使用することをお勧めします

1
VIKAS KOHLI

これは意見の問題ですが、いくつかの客観的な側面があります。

  • モジュールにはデフォルトのエクスポートを1つだけ含めることができますが、名前付きエクスポートはいくつでも持つことができます。

  • デフォルトのエクスポートを提供する場合、それを使用するプログラマーは、その名前を考え出す必要があります。これにより、Maryが行うコードベースの不整合が発生する可能性があります。

    import foo from "./foo";

    ...しかし、ジョーは

    import getFoo from "./foo";

    対照的に、名前付きエクスポートでは、モジュール内の別の識別子との競合がない限り、プログラマはそれを何と呼ぶか​​を考える必要はありません。それはただ

    import { foo } from "./foo";

    ...（as getFoo競合を避けるために必要な場合）。

  • 名前付きエクスポートでは、それをインポートする人はインポートするものの名​​前を指定する必要があります。つまり、存在しないものをインポートしようとすると、Nice Earlyエラーが発生します。

  • consistently名前付きエクスポートのみを使用する場合、プロジェクトのモジュールからインポートするプログラマは、必要なものがデフォルトであるか名前付きエクスポートであるかを考える必要はありません。

0
T.J. Crowder

明確なルールはありませんが、コードの構造化または共有を容易にするために人々が使用するいくつかの規則があります。

ファイル全体にエクスポートが1つしかない場合、名前を付ける理由はありません。また、モジュールに1つの主な目的がある場合、それをデフォルトのエクスポートにすることは理にかなっています。これらの場合、名前付きエクスポートを追加できます

例えば、reactの場合、Reactがデフォルトのエクスポートです。これは、多くの場合、必要な唯一の部分であるためです。常にComponentとは限らないため、必要なときにインポートできる名前付きエクスポートです。

import React, {Component} from 'react';

1つのモジュールに複数の等しい（またはほぼ等しい）エクスポートがある他のケースでは、名前付きエクスポートを使用することをお勧めします

import { blue, red, green } from 'colors';
0
Vinno97