ホームページ  >  記事  >  ウェブフロントエンド  >  es6 でモジュールをエクスポートするために使用される方法

es6 でモジュールをエクスポートするために使用される方法

WBOY
WBOYオリジナル
2022-05-06 15:54:342817ブラウズ

es6 でモジュールをエクスポートするために使用される方法: 1. デフォルト モジュールをエクスポートします。モジュール ファイルには、デフォルト モジュールを 1 つだけ含めることができます。構文は、「エクスポートする必要があるデフォルト メンバーをエクスポートする」です。2. 通常のモジュールをエクスポートします。モジュール、1 つのモジュール ファイル。通常のモジュールは複数存在でき、構文は「オンデマンドでエクスポートされるメンバーのエクスポート」です。

es6 でモジュールをエクスポートするために使用される方法

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 でモジュールをエクスポートするために使用される方法

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

モジュール ファイルにはデフォルト モジュールを 1 つだけ含めることができ、複数の通常のモジュールを指定できます

ステートメント: エクスポートする必要があるデフォルトのメンバーをエクスポートします

const n1 = 10
const n2 = 20
 
const show = () => {
  console.log('hello')
}
 
export default {
  n1,
  show
}

Default import

ステートメント: 変数名をインポートしますfrom 'モジュール識別記号 '

import m1 from './1.默认导出.js'
console.log(m1)

注:

各モジュールでは、エクスポートのデフォルトは 1 つだけ許可されます。それ以外の場合は、エラーが報告されます。

インポート中のデフォルトの受信名は、正式なメンバー名である限り、任意の名前を使用できます。

オンデマンドでエクスポート

次のように入力できます。すべてのデータ型はモジュールとしてエクスポートされます

構文: オンデマンドでエクスポートするための構文: オンデマンドでエクスポートされたメンバーのエクスポート

export const n1 = 10
 
export const n2 = 20

オンデマンドでインポートされた

インポートされたオンデマンドデマンド構文: import { m1 } from 'モジュール識別子'

import { n1 } from './3.按需导出.js'
 
console.log(n1)

オンデマンド インポートとオンデマンド エクスポートに関する注意事項:

  • それぞれで複数回使用できます。モジュール オンデマンドのエクスポート

  • オンデマンドでインポートされるメンバー名は、オンデマンドでエクスポートされる名前と一致している必要があります

  • オンデマンドでインポートする場合、次のことができます。名前変更キーワードとして使用する

  • オンデマンド インポートは、デフォルトのインポートと併用できます

[関連する推奨事項: JavaScript ビデオ チュートリアルウェブフロントエンド]

以上がes6 でモジュールをエクスポートするために使用される方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。