歷史上，JavaScript一直沒有模組（module）體系，無法將一個大程式拆分成互相依賴的小檔案，再用簡單的方法拼裝起來。其他語言都有這項功能，比如Ruby的require、Python的import，甚至就連CSS都有@import， 但是JavaScript任何這方面的支援都沒有，這對開發大型的、複雜的專案形成了巨大障礙。

es6中新增了兩個命令export和import，export命令用於規定es6模組的對外介面，import 命令用於輸入其他es6模組化提供的功能。
一個es6模組就是一個獨立的檔案。該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個 變數， 就必須使用export關鍵字輸出該變數。下面是一個JS檔案，裡面使用export命令輸出變數。

編寫單獨的模組（a.js檔案）

// ES6採用嚴格模式，注意單引號、空格、分號、最後的空行的使用
// 定義三個變數
let a = 20
let b = 30
let c = 'hello'
// 將變數匯出，外部使用此檔案中的變數時，需要使用import { a, b, c } from 'a.js'方式進行匯入
export { a, b, c }

外部（main.js）使用此模組，需要先執行匯入 import{變數名1[，變數名2，變數名3,…]} from ‘檔案’

// 此處匯入變數時，需要明確知道變數名稱{ a, b, c }
import { a, b, c } from './files/a.js'
 

console.log(a, b, c)

export 不只是能匯出普通變數，還可以匯出其他的資料型別（a.js）

// 可以匯出很多東西，比如函式、物件等
export const add = function (a, b) {
    return a + b
}
export const subtract = function (a, b) {
    return a - b
}
// 匯出物件
export const stu = {
    name: 'aaa',
    age: 40
}

外部使用此模組中匯出的函式、物件（main.js）

// 此處匯入變數時，需要明確知道變數名稱{ a
 
, b, c }
import { a, b, c, add, subtract, stu } from './files/a.js'
// 呼叫匯入的方法
let x = add(a, b)
console.log(x)
x = subtract(a, b)

// 使用匯入的物件
console.log(stu)

也可以一次匯入所有變數 import * as 識別符號 from ‘檔案’（main.js）

// 也可以匯入所有變數、方法、物件,並作為物件obj的屬性進行使用
import * as obj from './files/a.js'

console.log(obj.a, obj.b, obj.c)
// 呼叫匯入的方法
let x = obj.add(obj.a, obj.b)
console.log(x)
x = obj.subtract(obj.a, obj.b)

// 使用匯入的物件
console.log(obj.stu)

預設匯出 export default （exportDefault .js）

export default指定預設匯出，這在模組只有一個變數輸出時非常常用；引用該模組時，使用者不需要知道要引入的變數名稱是什麼，而是在引用位置給變數（函式、物件、類）指定名稱

// 一個模組只允許出現一個export default
// （此語句實質返回了一個名稱為 'default' 的變數）
export default {
    data: {
        name: 'aaaa',
        age: '30',
        say: function () {
            console.log(this.name, this.age)
        }
    }
}

外部引用模組時可以為模組變數命名（main.js）

// 為預設匯出的變數命名為student
import student from './files/exportDefault.js'

// 使用匯入的變數
student.data.say()

export default命令讓載入模組變得更容易理解，如下程式碼：

// 有了export default命令，載入模組時就非常直觀了，以一些常用的模組為例
import $ from 'jQuery' // 載入jQuery 庫
import _ from 'lodash' // 載入 lodash
import Vue from 'vue'   // 載入 Vue