ES6-モジュール

前書き

JavaScriptコードの一部を再利用する必要があるシナリオを考えてみましょう。 ES6 の概念であなたの救助に来る Modules。

モジュールは、関連するJavaScriptコードのセットを編成します。モジュールには変数と関数を含めることができます。モジュールは、ファイルに記述されたJavaScriptコードのチャンクにすぎません。デフォルトでは、モジュールの変数と関数は使用できません。モジュール内の変数と関数は、他のファイル内からアクセスできるようにエクスポートする必要があります。ES6のモジュールはでのみ機能しますstrict mode。これは、モジュールで宣言された変数または関数がグローバルにアクセスできないことを意味します。

モジュールのエクスポート

exportキーワードは、モジュール内のコンポーネントをエクスポートするために使用できます。モジュール内のエクスポートは次のように分類できます-

名前付きエクスポート
デフォルトのエクスポート

名前付きエクスポート

名前付きエクスポートは、名前で区別されます。モジュールには、いくつかの名前付きエクスポートが存在する可能性があります。モジュールは、以下に示す構文を使用して、選択したコンポーネントをエクスポートできます。

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

または、モジュール内のコンポーネントは、以下に示すように、{}バインディング構文を持つ単一のexportキーワードを使用してエクスポートすることもできます。

//using single export keyword

export {component1,component2,....,componentN}

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

単一の値のみをエクスポートする必要があるモジュールは、デフォルトのエクスポートを使用できます。モジュールごとにデフォルトのエクスポートは1つだけです。

Syntax

export default component_name

ただし、モジュールには、デフォルトのエクスポートと複数の名前付きエクスポートを同時に含めることができます。

モジュールのインポート

モジュールを使用できるようにするには、 import keyword。モジュールは複数持つことができますimport statements。

名前付きエクスポートのインポート

名前付きエクスポートをインポートするときは、対応するコンポーネントの名前が一致している必要があります。

Syntax

import {component1,component2..componentN} from module_name

ただし、名前付きエクスポートをインポートする場合は、asキーワードを使用して名前を変更できます。以下の構文を使用してください-

import {original_component_name as new_component_name }

名前付きエクスポートはすべて、アスタリスク*を使用してオブジェクトにインポートできます。 operator。

import * as variable_name from module_name

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

名前付きエクスポートとは異なり、デフォルトのエクスポートは任意の名前でインポートできます。

Syntax

import any_variable_name from module_name

例：名前付きエクスポート

Step 1 −ファイルcompany1.jsを作成し、次のコードを追加します−

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2−ファイルcompany2.jsを作成します。このファイルは、company1.jsファイルで定義されたコンポーネントを消費します。次のいずれかの方法を使用して、モジュールをインポートします。

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 −HTMLファイルを使用してモジュールを実行します

両方のモジュールを実行するには、以下に示すようにhtmlファイルを作成し、これをライブサーバーで実行する必要があります。を使用する必要があることに注意してくださいattribute type="module" スクリプトタグ内。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

上記のコードの出力は以下のようになります-

TutorialsPoint
TUTORIALSPOINT

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

Step 1 −ファイルを作成する company1.js 次のコードを追加します-

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 −ファイルを作成する company2.js。このファイルは、company1.jsファイルで定義されているコンポーネントを使用します。

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 −実行する modules を使用して HTML file

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

上記のコードの出力は以下のようになります-

TutorialsPoint
Google Inc

例：デフォルトエクスポートと名前付きエクスポートの組み合わせ

Step 1 −ファイルを作成する company1.js 次のコードを追加します-

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 −ファイルを作成する company2.js。このファイルは、で定義されたコンポーネントを消費しますcompany1.jsファイル。最初にデフォルトのエクスポートをインポートし、次に名前付きのエクスポートをインポートします。

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 −HTMLファイルを使用してモジュールを実行します

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

上記のコードの出力は次のようになります-

TutorialsPoint
TutorialsPoint
Mohtashim