web-dev-qa-db-ja.com

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に、理解しやすいものがありますか？

javascriptnode.jsecmascript-6
433
damphat

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

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

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

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

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

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

351
p.s.w.g

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
111
sudo bangbang

関数に名前がない場合は、export default function(){}を使用できます。ファイルにはデフォルトのエクスポートは1つしか存在できません。代替手段は名前付きエクスポートです。

この ページ はexport defaultと私がとても役に立ったモジュールについての他の詳細を詳細に記述しています。

64
Greg Gum

これで説明したように 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
6
manfall19