ファイル: 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 モジュール システムの一部であり、ここで説明されています。そのドキュメントにも役立つ例があります。
モジュールがデフォルトのエクスポートを定義する場合:
// foo.js export default function() { console.log("hello!") }次に、中括弧を省略して、そのデフォルトのエクスポートをインポートできます。
import foo from "foo"; foo(); // hello!
更新: 2015 年 6 月現在、モジュール システムは§15.2で定義されておりexport、特に構文はECMAScript 2015 仕様の§15.2.3で定義されています。
export default function(){}関数に名前がない場合に使用できます。ファイルには 1 つのデフォルト エクスポートしか存在できません。別の方法は、名前付きエクスポートです。
このページexport defaultでは、私が非常に役立つモジュールについて詳しく説明しています。
JavaScript の「エクスポートのデフォルト」とは何ですか?
デフォルトのエクスポートでは、インポートの命名は完全に独立しており、好きな名前を使用できます。
この行を簡単な例で説明します。
3 つのモジュールとindex.htmlファイルがあるとします。
export function hello() {
console.log("Modul: Saying hello!");
}
export let variable = 123;
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!");
}
<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.jspamelanderson();から pamelanderson をインポート」してから. これは、'export default' を使用すると問題なく動作し、基本的にはこれで終わりです。これにより、default のときに好きな名前を付けることができます。
PS: 例をテストする場合 - 最初にファイルを作成し、次にブラウザでCORSを許可します -> Firefox を使用している場合は、ブラウザの URL に「about:config」と入力します -> 「privacy.file_unique_origin」を検索します - > 「false」に変更します -> index.html を開きます -> F12 を押してコンソールを開き、出力を確認します -> 楽しんで、CORS 設定をデフォルトに戻すことを忘れないでください。
PS2: ばかげた変数名でごめんなさい
詳細はlink2mediumおよびlink2mdnにあります。
As explained on this MDN page
There are two different types of export, named and default. You can have multiple named exports per module but only one default export[...]Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.But a default export can be imported with any name
For example:
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 importExport Default は、クラス、関数、またはオブジェクトであるファイルから 1 つの値のみをエクスポートするために使用されます。デフォルトのエクスポートは、任意の名前でインポートできます。
//file functions.js
export default function subtract(x, y) {
return x - y;
}
//importing subtract in another file in the same directory
import myDefault from "./functions.js";
減算関数は、インポートされたファイルで myDefault として参照できます。
Export Default はフォールバック値も作成します。これは、名前付きエクスポートに存在しない関数、クラス、またはオブジェクトをインポートしようとした場合を意味します。デフォルトのエクスポートで指定されたフォールバック値が提供されます。
詳細な説明は、https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/exportにあります。