• ES6模組不是物件，而是通過export命令顯式指定輸出的程式碼，輸入時也採用靜態命令的形式。

• ES6的模組自動採用嚴格模式

• export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。

關於export

//直接匯出
export var year = 1958; //匯出變數
export function multiply(x, y) { //匯出函式
  return x * y;
};

//匯出一組變數(屬性,方法)
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//匯出並且重新命名
 

function v1() { ... }
function v2() { ... }

//即使重新命名了,原來的也可以用,相當於加了別名
export {
  v1 as streamV1, //重新命名了
  v2 as streamV2,
  v2 as streamLatestVersion //重新命名兩次
};

//混合匯出,既定義了預設的,也定義了不預設的
export default class Client{
}
export const foo = 'bar';
    //使用的時候可以分別匯入
import Client,{foo} from 'module';

//暴露一個模組的所有介面
 

export * from 'module';

//連鎖匯出
    //a.js,匯出一個函式
export function foo(){}    
    //b.js,b模組匯出所有內容,而這些內容來自a模組
export * from 'a';
    //app.js,那麼在使用的時候
import { foo } from 'b';

//暴露一個模組的部分介面
export { test } from 'module';

//暴露一個模組的預設介面
export { default } from 'module';

• 一個模組就是一個獨立的檔案。該檔案內部的所有變數，外部無法獲取。如果你希望外部能夠讀取模組內部的某個變數，就必須使用 export 關鍵字輸出該變數。

• export命令可以出現在模組的任何位置，只要處於模組頂層就可以。如果處於塊級作用域內，就會報錯

• 一個模組只能有一個預設輸出，因此export default命令只能使用一次

• export * 命令會忽略模組的default方法

關於import

//直接匯入,並且輸入到不同的變數裡面,這些變數名需要跟匯入源一致
import {firstName, lastName, year} from './profile';
  //匯入之後就可以直接使用了
function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

//直接匯入,不過沒有寫路徑
import {myMethod} from 'util';

//直接匯入並重命名,主要是為了方便
import { lastName as surname } from './profile';

//不引入介面,僅執行模組程式碼
import 'XXXmodule'

//因為default是關鍵字,匯入的時候不能直接使用,需要改一下名字,用as改
import { default as xxx } from 'modules';
    //相當於,xxx是一個新的名字,能夠代替匯入模組
import xxx from 'module'

//以lodash模組舉例,他的default是_,非default有一個each介面,可以同時匯入
import _, { each } from 'lodash';

• import命令具有提升效果，會提升到整個模組的頭部

• import後面的from指定模組檔案的位置，可以是相對路徑，也可以是絕對路徑，.js路徑可以省略。如果只是模組名，不帶有路徑，那麼必須有配置檔案，告訴 JavaScript 引擎該模組的位置。

• import是靜態執行,也是編譯前執行的,所以不能使用表示式和變數，這些只有在執行時才能得到結果的語法結構。

• 多次執行同一個import的話,只會執行一次

• import 不能匯入*,要用as改名

複合寫法

如果在一個模組之中，先輸入後輸出同一個模組，import語句可以與export語句寫在一起。

export { es6 as default } from './someModule';
// 等同於
import { es6 } from './someModule';
export default es6;

模組繼承

// circleplus.js
    //* 匯出circle的所有,但是會忽略default
export * from 'circle';
export var e = 2.71828182846; //自定義了一個e變數匯出
export default function(x) { //自定義了一個default匯出,因為 * 忽略了default,如果需要匯出的話,需要自己補一個
  return Math.exp(x);
}

// main.js
    //匯入了circleplus模組的所有,不過* 一樣會忽略了default
import * as math from 'circleplus'; //將circleplus全部匯入並改名為math
import exp from 'circleplus'; //匯入了circleplus的default
//exp就是匯入的預設default 函式
console.log(exp(math.e)); //math就是circleplus,所以可以呼叫變數e

跨模組常量

const宣告的常量只在當前程式碼塊有效。如果想設定跨模組的常量（即跨多個檔案），或者說一個值要被多個模組共享，可以採用下面的寫法。

// constants.js 模組
export const A = 1;
export const B = 3;
export const C = 4;

// test1.js 模組
import * as constants from './constants'; //通過匯入模組來共享
console.log(constants.A); // 1
console.log(constants.B); // 3

// test2.js 模組
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3

如果要使用的常量非常多，可以建一個專門的constants目錄，將各種常量寫在不同的檔案裡面，儲存在該目錄下。

// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};

// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
然後，將這些檔案輸出的常量，合併在index.js裡面。

// constants/index.js
export {db} from './db'; //使用一箇中轉模組(檔案)來收集這些常量模組
export {users} from './users';
使用的時候，直接載入index.js就可以了。

// script.js
import {db, users} from './constants';

需要注意的是,單純es6語法並不能很簡單的測試,需要使用babel-node這樣的支援完全的es6語法的解析器才能解析,詳情可以參考一下:(http://es6.ruanyifeng.com/#do…

參考引用: