web-dev-qa-db-ja.com

ES6の `export const`と` export default`

export defaultでインポートすることができる以外に、これら2つの間に大きな違いがあるかどうかを判断しようとしています。

import myItem from 'myItem';

そしてexport constを使って私はできる：

import { myItem } from 'myItem';

これ以外の違いやユースケースがあるかどうか私は思っています。

javascriptecmascript-6es6-modules
158
ajmajmajma

これは名前付きエクスポートとデフォルトのエクスポートです。 export constは、const宣言または複数の宣言をエクスポートする名前付きエクスポートです。

強調するために：ここで重要なことは export キーワードです--- const はconst宣言を宣言するのに使われます。 exportは、クラス宣言や関数宣言などの他の宣言にも適用できます。

デフォルトのエクスポート（export default）

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

import MyDefaultExport from "./MyFileWithADefaultExport";

あなたはこれに好きな名前を付けることができます。

名前付きエクスポート（export）

名前付きエクスポートでは、ファイルごとに複数の名前付きエクスポートを作成できます。次に、必要な特定のエクスポートを中括弧で囲んでインポートします。

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

あるいは、同じステートメント内で名前付きインポートとともにデフォルトを使用することも可能です。

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

ネームスペースのインポート

オブジェクト上のファイルからすべてをインポートすることも可能です。

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

注意事項

  • ユースケースがより一般的であるため、構文ではデフォルトのエクスポートがやや簡潔になります（ こちらの説明を参照 ）。

  • デフォルトのエクスポートは実際にはdefaultという名前の名前付きエクスポートなので、名前付きインポートでインポートできます。

    import { default as MyDefaultExport } from "./MyFileWithADefaultExport";
259
David Sherret

export default は、 インポート構文 モジュールのインポート時に使用されるべき方法に影響します。

私が好む（そして使う）便利なユースケースは、 明示的に 名前を付けなくても anonymous 関数をエクスポートすることを可能にすることです。名：

例：

module_1

export function divide( x ){
    return x / 2;
}

// only one 'default' function may be exported and the rest (above) must be named
export default function( x ){  // <---- declared as a default function
    return x * x;
}

module_2

// The default function should be the first to import (and named whatever)
import square, {divide} from './module_1.js'; // I named the default "square" 

console.log( square(2), divide(2) ); // 4, 1

{}構文を使って関数（または変数）をインポートする場合、インポートされるものはすべてエクスポート時に すでに という名前であるため、 正確に 同じ名前でインポートする必要があります。インポートは機能しませんでした。

誤った例：

  1. デフォルトの関数は最初にインポートする必要があります

    import {divide}, square from './module_1.js

  2. divide_1はmodule_1.jsにエクスポートされなかったため、何もインポートされません

    import {divide_1} from './module_1.js

  3. squareはmodule_1.jsにエクスポートされませんでした。これは、{}が named エクスポートのみを明示的に検索するようにエンジンに指示するためです。

    import {square} from './module_1.js
12
vsync

注意事項：デフォルトのエクスポートからインポートする場合、命名は完全に独立していることに注意してください。これは実際にはリファクタリングに影響を与えます。

対応するインポートを持つ、このようなクラスFooがあるとしましょう。

export default class Foo { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export
import Foo from './Foo'

FooクラスをBarにリファクタリングし、ファイルの名前を変更しても、ほとんどのIDEはインポートに影響しません。だからあなたはこれで終わるでしょう：

export default class Bar { }

//the name 'Foo' could be anything, since it's just an
//identifier for the default export.
import Foo from './Bar'

特にTypeScriptでは、名前付きエクスポートとより信頼性の高いリファクタリングを本当に感謝しています。違いは、defaultキーワードと中括弧がないことです。あなたが今タイプチェックをしているので、これもまたあなたがあなたのインポートでタイプミスをするのを防ぎます。

export class Foo { }

//'Foo' needs to be the class name. The import will be refactored
//in case of a rename!
import { Foo } from './Foo'
7
Philipp Sumi

から ドキュメント ：

名前付きエクスポートは、複数の値をエクスポートするのに役立ちます。インポート中に、対応する値を参照するために同じ名前を使用することができます。

デフォルトのエクスポートに関しては、モジュールごとにデフォルトのエクスポートは1つだけです。デフォルトのエクスポートは、関数、クラス、オブジェクト、またはその他のものです。この値は、インポートするのが最も簡単なので、「メイン」エクスポート値と見なされます。

5
James Sumners

ブラウザがes6を使用していないという問題がありました。

私はそれを修正しました：

 <script type="module" src="index.js"></script>

TypeモジュールはブラウザにES6を使うように伝えます。

export const bla = [1,2,3];

import {bla} from './example.js';

それでうまくいきます。

0
Marcel Zebrowski

あなたがデフォルトを置くとき、それはデフォルトのエクスポートと呼ばれます。ファイルごとにデフォルトのエクスポートを1つだけ持つことができ、任意の名前の別のファイルにインポートすることができます。 defaultという名前のexportを付けない場合は、中かっこを付けて同じ名前で別のファイルにインポートする必要があります。

0
Abdullah Danyal