サーチ…


構文

  • 'module'からdefaultMemberをインポートします。
  • モジュール{moduleA}から{memberA、memberB、...}をインポートします。
  • モジュールを 'module'からimport *します。
  • import {memberA as a、memberB、...}を 'module'からインポートします。
  • モジュールからdefaultMember、*を 'module'からインポートします。
  • import defaultMember、{moduleA、...}を 'module'からインポートします。
  • インポート 'モジュール';

備考

MDN (重点追加)から:

この機能は現時点ではネイティブにはどのブラウザにも実装されていませんTraceur CompilerBabelRollupなどの多くのトランスパイライザで実装されています。

多くのトランスパイライザはES6モジュールの構文をCommonJSに変換してNodeエコシステムで使用するか、またはRequireJSまたはSystem.jsをブラウザで使用することができます。

また、 Browserifyのようなモジュールバンドラを使用して、相互依存のCommonJSモジュールのセットをブラウザにロードできる単一のファイルに結合することもできます。

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

名前付きインポートに加えて、デフォルトのエクスポートを提供できます。

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

単純な構文を使用して、デフォルトのエクスポートをインポートすることができます。

import circleArea from './circle';
console.log(circleArea(4));

デフォルトのエクスポートは、名前と名前の輸出に暗黙的に同等であることに注意してくださいdefault 、およびインポートした結合( circleArea上記)は、単に別名です。前のモジュールは次のように書くことができます。

import { default as circleArea } from './circle';
console.log(circleArea(4));

モジュールごとに1つのデフォルトエクスポートしか持てません。デフォルトのエクスポートの名前は省略できます。

// named export: must have a name
export const PI = 3.14;

// default export: name is not required
export default function (radius) {  
    return PI * radius * radius;
}

副作用によるインポート

場合によっては、モジュールをインポートしてトップレベルのコードが実行されるようにしたい場合があります。これは、モジュールのインポート時に一度しか実行されないポリフィルやその他のグローバル、またはコンフィグレーションに便利です。

test.jsという名前のファイルがあるとします。

console.log('Initializing...')

次のように使用できます:

import './test'

この例では、 Initializing...がコンソールに出力されます。

モジュールの定義

ECMAScript 6では、モジュール構文( import / export )を使用すると、各ファイルは専用の名前空間を持つ独自のモジュールになります。トップレベルの関数と変数は、グローバル名前空間を汚染しません。関数、クラス、および他のモジュールの変数をインポートするために、 exportキーワードを使用できます。

// not exported
function somethingPrivate() {
    console.log('TOP SECRET')
}


export const PI = 3.14;

export function doSomething() {
    console.log('Hello from a module!')
}

function doSomethingElse(){ 
    console.log("Something else")
}

export {doSomethingElse}

export class MyClass {
    test() {}
}

注意: <script>タグを使用してロードされたES5 JavaScriptファイルは、 import / exportを使用しない場合でも同じままです。

明示的にエクスポートされた値だけがモジュールの外部で使用可能になります。他のすべては私的であるか、またはアクセス不能であると考えることができる。

このモジュールをインポートすると、前のコードブロックがmy-module.jsと仮定します。

import * as myModule from './my-module.js';

myModule.PI;                 // 3.14
myModule.doSomething();      // 'Hello from a module!'
myModule.doSomethingElse();  // 'Something else'
new myModule.MyClass();      // an instance of MyClass
myModule.somethingPrivate(); // This would fail since somethingPrivate was not exported

別のモジュールから名前付きメンバーをインポートする

「モジュールの定義」セクションのモジュールがtest.jsファイルに存在する場合、そのモジュールからインポートしてエクスポートされたメンバーを使用できます。

import {doSomething, MyClass, PI} from './test'

doSomething()

const mine = new MyClass()
mine.test()

console.log(PI)

somethingPrivate()メソッドがtestモジュールからエクスポートされなかったので、インポートしようとすると失敗します:

import {somethingPrivate} from './test'

somethingPrivate()

モジュール全体のインポート

モジュールまたはモジュールのデフォルトのエクスポートから名前付きメンバをインポートすることに加えて、すべてのメンバを名前空間バインディングにインポートすることもできます。

import * as test from './test'

test.doSomething()

エクスポートされたすべてのメンバーは、 test変数で使用できるようになりました。エクスポートされていないメンバーは、指定されたメンバーのインポートでは利用できないのと同じように利用できません。

注意:モジュール'./test'へのパスはローダーによって解決され、ECMAScript仕様ではカバーされません。これは、任意のリソースへの文字列(パス相対またはファイルシステム上の絶対パス、URLへのURLネットワークリソース、またはその他の文字列識別子)。

エイリアスを持つ名前付きメンバーのインポート

場合によっては、 thisIsWayTooLongOfAName()ように実際にメンバー名が長いメンバーに出会うことがあります。この場合、メンバーをインポートして、現在のモジュールで使用する短縮名を付けることができます。

import {thisIsWayTooLongOfAName as shortName} from 'module'

shortName()

次のように複数の長いメンバー名をインポートすることができます:

import {thisIsWayTooLongOfAName as shortName, thisIsAnotherLongNameThatShouldNotBeUsed as otherName} from 'module'

shortName()
console.log(otherName)

最後に、インポートエイリアスと通常のメンバーインポートを混在させることができます:

import {thisIsWayTooLongOfAName as shortName, PI} from 'module'

shortName()
console.log(PI)

複数の名前付きメンバーのエクスポート

const namedMember1 = ...
const namedMember2 = ...
const namedMember3 = ...

export { namedMember1, namedMember2, namedMember3 }


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow