JavaScriptの「デフォルトのエクスポート」とは何ですか？

ファイル：SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

今まで見たことがないexport default。export default理解しやすいものに相当するものはありますか？

これは、ここで説明するES6モジュールシステムの一部です。そのドキュメントには役立つ例もあります。

モジュールがデフォルトのエクスポートを定義する場合：

export default function() { console.log("hello!") }

次に、中括弧を省略して、デフォルトのエクスポートをインポートできます。

import foo from "foo";
foo(); // hello!

更新： 2015年6月現在、モジュールシステムは§15.2で定義されており、export特に構文はECMAScript 2015仕様の§15.2.3で定義されています。

export default スクリプトファイルから単一のクラス、関数、またはプリミティブをエクスポートするために使用されます。

エクスポートは次のように書くこともできます

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

これは、この関数を別のスクリプトファイルにインポートするために使用されます

言うapp.js、あなたがすることができます

import SafeString from './handlebars/safe-string';

輸出について

名前が示すように、スクリプトファイルまたはモジュールから関数、オブジェクト、クラス、または式をエクスポートするために使用されます

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

これはインポートして次のように使用できます

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

または

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

エクスポートのデフォルトが使用されている場合、これははるかに簡単です。スクリプトファイルがエクスポートするのは1つだけです。 cube.js

export default function cube(x) {
  return x * x * x;
};

App.jsとして 使用

import Cube from 'cube';
console.log(Cube(3)); // 27

export default function(){}関数に名前がない場合に使用できます。ファイルには、デフォルトのエクスポートを1つだけ含めることができます。代替は名前付きエクスポートです。

このページではexport default、私が非常に役に立ったと思ったモジュールに関する詳細とその他の詳細について説明します。

私はこの投稿を書いています（私は疲れていると思います）。MDNも他の人の説明もまったく理解できなかったため、何かを理解するための最良の方法は、他の人に教えることです。単純な質問の答えが見当たらないだけです。

JavaScriptの「デフォルトのエクスポート」とは何ですか？

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

この行を簡単な例で説明します。

3つのモジュールとindex.htmlがあるとします。

• modul.js
• modul2.js
• modul3.js
• index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

出力は次のとおりです。

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

より長い説明は：

モジュールの単一のものをエクスポートする場合は、「デフォルトのエクスポート」を使用します。

したがって、重要なのは「'./modul3.js'からblablaをインポートする」です。代わりに次のように言うことができます。

「' ./modul3.jsからpamelandersonをインポートして」、次にpamelanderson（）; これは、「export default」を使用する場合に正常に機能し、基本的にはこれです。これにより、デフォルトのときに好きな名前を付けることができます。

Ps例をテストする場合-最初にファイルを作成してから、CORSを許可しますから、ブラウザーでをます->ブラウザーのURLでfirefoxタイプを使用している場合：about：config-> "privacy.file_unique_origin"を検索します->変更「false」に-> index.htmlを開く-> F12を押してコンソールを開き、出力を確認します->楽しんで、cors設定をデフォルトに戻すことを忘れないでください。

Ps2愚かな変数の命名でごめんなさい

詳細@ link2medium、link2mdn1、link2mdn2

このMDNページで説明したように

エクスポートには、名前付きとデフォルトの2つの異なるタイプがあります。モジュールごとに複数の名前付きエクスポートを作成できますが、いくつかの値をエクスポートするのに役立つのは、デフォルトのエクスポート[...]名前付きエクスポートが1つだけです。インポート中は、対応するオブジェクトと同じ名前を使用する必要がありますが、デフォルトのエクスポートは任意の名前でインポートできます

例えば：

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

私の意見では、デフォルトのエクスポートに関する重要なことは、それが任意の名前でインポートできることです！

デフォルトをエクスポートするファイルfoo.jsがある場合：

export default function foo(){}

以下を使用してbar.jsにインポートできます。

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import

名前付きとデフォルトの 2つの異なるタイプのエクスポートがあります。モジュールごとに複数の名前付きエクスポートを作成できますが、デフォルトのエクスポートは1つだけです。各タイプは上記のいずれかに対応します。 出典：MDN

名前付きエクスポート

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

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

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

//デフォルトのインポートに別の名前を使用できます

import Foo from 'path-to-file' // this will assign any default export to Foo.

export defaultは、単一のクラス、関数、またはプリミティブをエクスポートするために使用されます。

関数に名前がない場合は、export default function（）{}を使用できます。ファイルには、デフォルトのエクスポートを1つだけ含めることができます。

続きを読む