require.js/seajs/ES6/browserify/webpack的區別

Javascript不具備原生的模塊化技能,因此需要採用第三方開發的模塊依賴處理庫來實現模塊化:AMD、CommonJS、ES6

這三種方案的實現對比:

  • AMD: define + require

  • CMD: exports + require

  • ES6: export + import

由於ES6本身是原生語言支持實現的模塊化,但是現代瀏覽器大多都還未支持,因此必須使用相應的transpiler工具轉換成ES5的AMD,CMD模塊,再藉助於systemjs/requirejs等模塊加載工具才能使用。其中ES6的transpiler(代碼轉換器)一般是用babel,他的作用是將ES6轉化爲瀏覽器支持的ES5寫法。


js語言本身並不支持模塊化,同時瀏覽器中js和服務端nodejs中的js運行環境是不同的,如何實現瀏覽器中js模塊化主流有兩種方案:

  • requirejs/seajs: 是一種在線“編譯”模塊的方案,相當於在頁面上加載一個CommonJS/AMD模塊格式解釋器。這樣瀏覽器就認識了define, exports,module這些東西,也就實現了模塊化。

  • browserify/webpack:是一個預編譯模塊打包的方案,相比於第一種方案,這個方案更加智能。由於是預編譯的,不需要在瀏覽器中加載解釋器。你在本地直接寫JS,不管是AMD/CMD/ES6風格的模塊化,它都能認識,並且編譯成瀏覽器認識的JS。

browerify打包器本身只支持Commonjs模塊,如果要打包AMD模塊,則需要另外的plugin來實現AMD到CMD的轉換。


下面是sea.js作者玉伯解釋的sea.js和require.js的區別:

  • AMD 是 RequireJS 在推廣過程中對模塊定義的規範化產出。

  • CMD 是 SeaJS 在推廣過程中對模塊定義的規範化產出。

類似的還有 CommonJS Modules/2.0 規範,是 BravoJS 在推廣過程中對模塊定義的規範化產出。

這些規範的目的都是爲了 JavaScript 的模塊化開發,特別是在瀏覽器端的。
目前這些規範的實現都能達成瀏覽器端模塊化開發的目的

區別:

  1. 對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.

  2. CMD 推崇依賴就近,AMD 推崇依賴前置。看代碼:

// CMD
define(function(require, exports, module) {

   var a = require('./a')

   a.doSomething()

   // 此處略去 100 行

   var b = require('./b') // 依賴可以就近書寫

   b.doSomething()

   // ... 

})
// AMD 默認推薦的是

define(['./a', './b'], function(a, b) {  // 依賴必須一開始就寫好

    a.doSomething()

    // 此處略去 100 行

    b.doSomething()

    ...

}) 

雖然 AMD 也支持 CMD 的寫法,同時還支持將 require 作爲依賴項傳遞,但 RequireJS 的作者默認是最喜歡上面的寫法,也是官方文檔裏默認的模塊定義寫法。

  1. AMD 的 API 默認是一個當多個用,CMD 的 API 嚴格區分,推崇職責單一。比如 AMD 裏,require 分全局 require 和局部 require,都叫 require。CMD 裏,沒有全局 require,而是根據模塊系統的完備性,提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏,每個 API 都簡單純粹

  • ES6的模塊化是自帶的,同時也和AMD和CMD一樣,支持模塊內容選擇性引入
//module_a.js

export function add(...args) {
  return arg.reduce ((a, b) => a + b)
}

export function subtract(a, b) {
  return a - b
}

//main.js

import {add} as math from 'module_a'
~~~
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章