本文實例講述了ES6知識點整理之模塊化的應用。分享給大家供大家參考，具體如下：

目前瀏覽器還不能完全支持模塊化，需要引入很多編譯環境，下面在nodejs中來模擬ES6中的模塊化

nodejs中針對模塊化演示的配置

{ "presets": [    "node6" ]}

添加了這個文件，無需在運行時添加–presets參數

導出變量的三種模式

test1模塊：

// 寫法1export var a = "I am a";// 寫法2var b = "I am b";export {b};// 寫法3var c = "I am c";export {c as d} // 將c重名為d, 外部也同樣需要 import d

index 模塊：

import {a, b, d} from './test1';console.log(a); // I am aconsole.log(b); // I am bconsole.log(d); // I am c

異步導出模塊的測試

test2模塊 ：

// 異步寫法var m = "I am m";export {m};setTimeout(()=>{ m = "I am mm";},1000);

index模塊

import {m} from './test2';console.log(m); // I am msetTimeout(()=>{ console.log(m); // I am mm},1500);

多模塊分別導出

test3 模塊

var A = 1111, B = 2222, C = 3333;var M = 'M';export default M;export {A as A1, B as B1, C as C1};

index 模塊 ：

import M, {A1, B1, C1} from './multi';console.log(A1); // 1111console.log(B1); // 2222console.log(C1); // 3333console.log(M); // M

對象的導出

User 模塊 ：

export class User{ constructor(name){  this.name = name; } get uname() {  return this.name; } set uname(name) {  this.name = name; }}

index 模塊 ：

import {User} from './User';var user = new User('Joh');console.log(user.uname); // Johuser.uname = 'Lily';console.log(user.uname); // Lily

導出函數模塊

func 模塊

export function Log(str) { console.log(str);}

index 模塊

Log("I am log"); // I am log

重命名默認模塊

rename 模塊：

export default "rename";

index 模塊：

import {default as nr} from './rename';console.log(nr); // rename

默認模塊和其他模塊一起導出的方式

combine 模塊：

export var a = 1;export default 111;

方式1：

index 模塊：

import {default as com, a as comA} from './com';console.log(com); // 111console.log(comA); // 1