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 {}

預設導出

因為預設導出導出的其實是匿名導出，所以導入的時候可以用任意名字導入，並且無需使用{}包裹

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

全部導入

#將一個模組的所有導出都導入

import * as MyModule from './export'

重定向

將另一個模組的東西當作目前模組直接匯出

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

以上是es6中模組化的內容介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！