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

最近在學習使用Webpack3的時候發現，它已經可以在不使用babel的情況下使用ES6的模塊加載功能了。（不包括webpack.config.dev.js文件。

因為它是是webpack的配置文件，是nodejs直接運行處理的。所以仍需使用CommonJS規范，其他被webpack編譯的js模塊可以使用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入門》。