ES6的模塊化規范和CommonJS的模塊化規范的差異

ES6 在語言標准的層面上，實現了模塊功能，而且實現得相當簡單，旨在成為瀏覽器和服務器通用的模塊解決方案。其模塊功能主要由兩個命令構成：export 和 import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。

/** 定義模塊 math.js **/

var n = 1;

function add(){
    
return 2+3

}

export {
    n,
    add
}


/** 引用模塊  main.js**/

import { n , add } from './math.js'

如上例所示，使用import命令的時候，用戶需要知道所要加載的變量名或函數名。其實ES6還提供了export default命令，為模塊指定默認輸出，對應的import語句不需要使用大括號。這也更趨近於ADM的引用寫法。

/** export default 定義輸出  math.js**/
    //輸出
    export default { basicNum, add };
    
/** 引用模塊   main.js**/
   
     //引入
    import math from ‘./math‘;
    
    alert(math.n);

    math.add();
}

CommonJS

Node.js是commonJS規范的主要實踐者，它有四個重要的環境變量為模塊化的實現提供支持：module、exports、require、global。實際使用時，用module.exports定義當前模塊對外輸出的接口（不推薦直接用exports），用require加載模塊。

    //定義模塊 math.js       
    var n = 0;
    function add(a, b) {
        return a + b;
    }
    module.exports = { //在這里寫上需要向外暴露的函數、變量
        add: add,
        n: n
    }

    /** 引入模塊 require **/

    //引用自定義的模塊時，參數包含路徑，可省略.js
    var math = require(‘./math‘);
    math.add(2, 5);


    //引用核心模塊時，不需要帶路徑
    var http = require(‘http‘);
    http.createService(...).listen(3000);

import 時候的路徑問題(新手容易碰到)

• 開始玩的時候，總是出現 cannot find module 問題，原來 在 import 的時候 如果不使用相對路徑或者絕對路徑，node默認會去node_modules/文件夾下去找，例如：

import * as obj from 'nav'

// node 會試着去尋找 node_modules/nav.js 文件，如果沒有找到會接着找 nav 文件夾，如果文件夾存在，會找文件夾內的index.js文件，找不到就會報錯

// 正確寫法
import * as obj from './exports'