es6 のモジュール化の概要 (コード例)

この記事では、es6 のモジュール化の概要 (コード例) を紹介します。必要な方は参考にしていただければ幸いです。

概要

モジュール化は、大規模プロジェクトでは避けられない傾向です。

名前付きエクスポート

export キーワードを使用して、エクスポートしたいものをエクスポートできます。定数、変数、関数などをエクスポートできます。クラス、

// export.js

export var var0 = 'var0' // 直接导出 var 声明
export let let0 = 'let0' // 直接导出 let 声明
export const const0 = 'const' // 直接导出 const 导出
export function func1() {} // 直接导出函数
export function* funcx() {} // 直接导出生成器函数
export class class0{} // 直接导出类

let variable = 'variable' 
export {variable} // 先声明后导出， 需要使用{} 包裹

function func2(){}
export {func2} // 先声明后导出，需要使用 {} 包裹

function* funcx(){}
export {funcx} // 先声明后导出，需要使用 {} 包裹

class class1{}
export {class1} // 先声明后导出，需要使用 {} 包裹
export {class1 as Person} // 别名导出

名前付きインポート

名前付きインポートは {} でパッケージ化する必要があります。複数の名前付きエクスポートを同時にインポートできます

import {var0} from './export' // 导入 var0
import {let0} from './export' // 导入 let0
import {const0} from './export' // 导入 const0
import {func1} from './export' // 导入 func1
import {funcx} from './export' // 导入 funcx
import {class0} from './export' // 导入 class0

import {var0, let0} from "./export"; // 同时导入多个命令导出
import {Person as class1} from "./export"; // 导入后取别名

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

デフォルトのエクスポートでは default キーワードを使用でき、匿名でエクスポートできます。

export default 1 // 默认导出常量
export default function () {} // 默认导出
export default () => {}
export default function* () {}
export default class {}

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

デフォルトのエクスポートは実際には匿名でエクスポートされるためです。 {}Package

import num from './export'
import func from './export'
import arrowFunc from './export'
import generatorFunc from './export'
import class0 from './export'

Import all

モジュールのすべてのエクスポートをエイリアス

import * as MyModule from './export'

## にインポートせずに、インポートするときに任意の名前を使用できます。 #リダイレクト

別のモジュールのコンテンツを現在のモジュールとして直接エクスポートします

export {var0} from './export'
export * from './export'

以上がes6 のモジュール化の概要 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。