ES6中export , export default , import模塊系統總結

最近在學習使用Webpack3的時候發現，它已經可以在不使用babel的情況下使用ES6的模塊載入功能了。

說到ES6的模塊載入功能，我們先複習一下CommonJS規範吧：

一  . CommonJS規範規定，在每個模塊內的module變數代表當前模塊。這個變數的module.exports屬性是對外開放的介面。

載入某個模塊，其實是載入此模塊的module.exports屬性。

exampleA.js

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

上面代碼通過module.exports對外暴露出變數x和函數addX。

每個模塊的module對象預設擁有這些屬性：

　　module.id 模塊的識別符，通常是帶有絕對路徑的模塊文件名。

　　module.filename 模塊的文件名，帶有絕對路徑。

　　module.loaded 返回一個布爾值，表示模塊是否已經完成載入。

　　module.parent 返回一個對象，表示調用該模塊的模塊。　　

　　module.children 返回一個數組，表示該模塊要用到的其他模塊。

　　module.exports 表示模塊對外輸出的值。

二 . export變數：為了方便，每個模塊內都有一個指向module.exports的對象 exports。

三 .require方法：用於載入模塊。

讀取並執行一個JavaScript文件，然後返回該模塊的exports對象。

exampleB.js

var exampleA = require('./exampleA.js');//載入上文的模塊

console.log(exampleA.x); // 5
console.log(exampleA.addX(1)); // 6

以上是Commonjs的常用功能。其他功能參考阮大神的:http://javascript.ruanyifeng.com/nodejs/module.html。

ES6中模塊規範：

一 . export方法：

用法1：

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

用法2：

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year};

//export { firstName as obj1, lastName as obj2, year as obj3};//可以使用as關鍵字重命名

與CommonJS不同的是：export語句的輸出介面，與其對應的值是動態綁定關係，即通過該介面，可以取到模塊內部實時的值。

二 . import方法

import {firstName, lastName, year} from './profile.js';
//import { lastName as surname } from './profile.js';
//import * as profile from './profile.js';

import命令具有提升效果，會提升到整個模塊的頭部，首先執行。

三 . export default 方法

// export-default.js
export default function () {
  console.log('foo');
}
//其他模塊載入該模塊時，import命令可以為該匿名函數指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面的import方法，可以用任意名稱指向export-default.js(指向)輸出的方法，這時就不需要知道原模塊輸出的函數名。

這時import命令後面，不使用大括弧。

如果想在一條import語句中，同時引入default介面和其他介面，可以寫成下麵這樣。

import _, { each, each as forEach } from 'lodash';

四 . import() 方法

動態載入模塊，返回一個 Promise 對象。(nodejs中使用require.ensure實現)

import(`./someModules.js`)
  .then(module => {
    console.log(module);
  })
  .catch(err => {
　　console.log(err);
  });

ES6模塊與CommonJS模塊的區別：

一 . CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

CommonJS 模塊是運行時載入js文件，ES6 模塊是編譯時載入模塊，輸出介面。

二 . 第二個差異是因為 CommonJS 載入的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模塊不是對象，

它的對外介面只是一種靜態定義，在代碼靜態解析階段就會生成。(然而nodejs中對ES6模塊的實現任是基於自身的CommonJS 並沒有實現靜態載入)

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。

//CommonJS
// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

上面代碼輸出內部變數counter和改寫這個變數的內部方法incCounter。然後，在main.js裡面載入這個模塊。

//CommonJS
// main.js
var mod = require('./lib');

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

上面代碼說明，lib.js模塊載入以後，它的內部變化就影響不到輸出的mod.counter了。這是因為mod.counter是對模塊內counter對象值的拷貝。

除非寫成一個函數，才能實時獲取mod.counter的變動。

//CommonJS
// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  get counter() {
    return counter
  },
  incCounter: incCounter,
};

ES6模塊：

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

結果說明，ES6 模塊輸入的變數counter是活的(閉包)，完全反應其所在模塊lib.js內部的變化。

註：參考阮一峰大神的《ECMAScript6入門》。