如何學習前端模塊化知識？

01-08

目前能用一些框架，寫出成型的網頁。但經常會出現JS過多的現象，一直聽模塊化，但是看了好幾個文檔，都不知道從哪兒入手。彷彿都和node.js有關係。不知道該怎麼進一步學習，求指導。謝謝！

新補充 CSS 篇：都 2015 年了，CSS 怎麼還是這麼糟糕－《CSS Still Sucks 2015》

---------------------

謝 @蘇墨橘邀，這題大概的確適合我答……

放眼望去……又是 AMD/Require.js/Sea.js，又是 CommonJS/Browserify/Webpack，還有 ES6/Babel，題主是不是一下就暈了？

想知道它們都是什麼？

想知道 JavaScript 模塊的實現原理？

想知道 JavaScript 模塊化的歷史、發展歷程與未來？

JavaScript 模塊化七日談 -《JavaScript Modularization Journey》，這是我之前做分享的 Slides，送給你：

第一日上古時期 Module? 從設計模式說起
第二日石器時代 Script Loader 只有封裝性可不夠，我們還需要載入
第三日蒸汽朋克 Module Loader 模塊化架構的工業革命
第四日號角吹響 CommonJS 征服世界的第一步是跳出瀏覽器
第五日雙塔奇兵 AMD/CMD 瀏覽器環境模塊化方案
第六日精靈寶鑽 Browserify/Webpack 大勢所趨，去掉這層包裹！
第七日王者歸來 ES6 Module 最後的戰役

上次這個 Slides 在微博上分享出來，出乎意料引起不少轉發，感謝 @寸志讚美為「前端模塊化白皮書」。

由於最近越來越多的使用 Webpack，所以這次分享出來，我特別新增了大量 Webpack 的內容（包括 Loaders/Hot Reload Plugin/Code Splitting 及一些學習資源），並且加上了 @尤雨溪大大提醒的 Browserify + babelify 與 Webpack + babel-loader

這個 Web Slides 開源在我的 Github 上，歡迎你幫助我完善這個展示文稿，你可以給我提 issue，可以 fork pull request。如果它能幫助到你了，希望你還能不吝嗇 star 一下這個項目

http://huangxuan.me/js-module-7day/#/ (二維碼自動識別)

你也可以通過掃碼在手機上觀看

以上

直接使用 ES6 modules，不用猶豫。

自從 Babel 幾乎可以編譯大部分 ES6 特性之後，就沒有必要看AMD這些，除非你需要維護老代碼。NodeJS現在還是Commonjs標準，我想不久就會支持ES6 modules的語法。

這個年代模塊化從誰都可以定個標準到標準委員會定下草案，整個過程也沒有幾年。從標準看起可以省不少學習的路徑。如果對歷史感興趣不妨都看一下怎麼回事。

隨著es6定稿，其他所有模塊化方案都可以棄掉了，遲早過時啊。

直接使用es6 module吧

MD！，其實我想說直接學 nodejs ,用 commonjs 先熟悉起來什麼是模塊化開發。編譯用 browserify

否則對於初學者來說又 AMD 又 CMD 又 CommonJS 包裝成 AMD CMD 不是要玩死人么？

偏個題，學習模塊化時要注意：

很多人覺得模塊化開發的工程意義是復用，我不太認可這種看法，在我看來，模塊化開發的最大價值應該是分治，是分治，分治！（重說三）。@張雲龍

無非就三種, common js, amd or ES6 ES6 Modules, AMD and CommonJS

別想太多，用commonjs，並且用這個工具Browserify。一個小時就入門啦。基本就是

// index.js var a = require("./a.js"); a.print();


// a.js

module.exports = {

  print: function(){

    console.log("printing");

  }

};
// 安裝browserify

npm install -g browserify

// 編譯成bundle.js，之後就可以在網頁中使用了 browserify index.js -o bundle.js

前段時間自己也在學習模塊化方面的知識；

如果題主想學習AMD的話，

推薦看erik大神寫的：EFE Tech 的關於AMD的幾篇文章，不僅講述了如何使用，還系統詳細的講解了原理；

玩轉AMD - 設計思路

玩轉AMD - 應用實踐

玩轉AMD - Loader

另附上大神實現的loader：ecomfe/esl · GitHub 裡面也有關於AMD方面的詳細鏈接。

commonjs + webpack