webpack深刻淺出系列-1-前端的發展

webpack深刻淺出系列 -1- 前端的發展

1.1.1模塊化

模塊化是指將 一個複雜的系統分解爲多個模塊以方便編碼 。

好久之前，開發網頁要經過命名空間的方式來組織代碼，這樣作 有不少問題，其中包括：

• 命名空間衝突，兩個庫可能會使用同一個名稱，例如 Zepto ( http://zeptojs.com ）也 被放在 w工 ndow.$ 下：
• 沒法合理地管理項目的依賴和版本 ：
• 沒法方便地控制依賴的加載順序。

當項目變大時 ，這種方式將變得難以維護，須要用模塊化的思想來組織代碼。

1. CommonJS

CommonJS ( http://www.commonjs.org ）是一種被普遍使用的 JavaScript 模塊化規範，其核心思想是經過 require 方法來同步加載依賴的其餘模塊，經過 module.exports 導 出需 要暴露的接口。 CommonJS 規範的流行得益於 Node.js 採用了這種方式，後來這種方式被 引入到了網頁開發中。

採用 CommonJS 導入及導出的代碼以下：

／／ 導入 
const moduleA = require ( ’. / moduleA ’); 
／／ 導出 
module .exports = moduleA.someFunc;

CommonJS 的優勢在於：

• 代碼可複用於 Node.js 環境下井運行，例如作同構應用：
• 經過 Npm 發佈的不少第三方模塊都採用了 CommonJS 規範。

CommonJS 的缺點在於，這樣的代碼沒法直接運行在瀏覽器環境下，必須經過工具轉換 成標準 的 ES5 。

CommonJS 還能夠細分爲 CommonJSl 和 CommonJS2 ，區別在於 CommonJSl 只能經過 exports . XX = XX 的方式導出，而 CommonJS2 在 CommonJSl 的 基礎上加入了 module. export s = XX 的導出方式。 CommonJS 一般指 CommonJS2 。

2.AMO