前端模塊化管理

 

轉自網絡

 

• • Task Runner

Gulp、Grunt和Make(常見於c/cpp）、Ant、Maven、Gradle（Java/Android）、Rake、Thor（Ruby）同樣，都是是Task Runner。用來將一些繁瑣的task自動化並處理任務的依賴關係。
其中有些是基於配置描述的，描述邏輯比較費勁，好比Ant基於xml。還有些就是代碼，比較靈活，我的偏好這種。好比Rake、Thor、Gulp、Gradle。對於Gradle來講也有些蛋疼。由於它自己是Groovy的DSL。若是要深刻使用，你還得學一下Groovy語言。其餘就好多了Rake、Thor就是寫Ruby；Gulp就是JavaScript。相對門檻低不少。

 

• 模塊化解決方案

Browserify It provides a way to bundle CommonJS modules together, adheres to the Unix philosophy（小工具協做）, is in fact a good alternative to Webpack.
Webpack takes a more monolithic（總體解決、大而全） approach than Browserify... is relies on configuration.
webpack官網有對兩者的使用方法進行對比，能夠看一下：webpack for browserify users

上面這些工具在功能上有交集：代碼的Minify、Concat；資源預處理等；

其實每一個工具的官網上都有對工具的設計思想、要解決的問題、與其餘工具的對比。本身摘抄下來，作個表格對比一下。高亮出每一個工具獨特的特性。這樣你就知道何時須要用哪一個工具了。
好比，你的工程模塊依賴很簡單，不須要把js或各類資源打包，只須要簡單的合併、壓縮，在頁面中引用就行了。Gulp就夠用了。那就不須要Browserify、Webpack。

反過來，若是你的工程龐大，頁面中使用了不少庫（SPA-單頁面應用, Single Page Application 很容易出現這種狀況），那就能夠選擇某種模塊化方案。至因而用Browserify仍是Webpack就須要根據其餘因素來判斷了。好比團隊已經在使用了某種方案，你們都比較熟悉了。再好比，你喜歡Unix小工具協做的方式，那就Browserify。

充分了解各類工具、方案，選擇合適的和本身須要的。沒有絕對的好。優勢換了場景也會變成缺點。

 

• 關於AMD&CMD

RequireJS 和 SeaJS 都是很不錯的模塊加載器，二者區別以下：

1. 二者定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。SeaJS 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 服務器端

2. 二者遵循的標準有差別。RequireJS 遵循的是 AMD（異步模塊定義）規範，SeaJS 遵循的是 CMD （通用模塊定義）規範。規範的不一樣，致使了二者 API 的不一樣。SeaJS 更簡潔優雅，更貼近 CommonJS Modules/1.1 和 Node Modules 規範。

3. 二者社區理念有差別。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納。SeaJS 不強推，而採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。

4. 二者代碼質量有差別。RequireJS 是沒有明顯的 bug，SeaJS 是明顯沒有 bug。

5. 二者對調試等的支持有差別。SeaJS 經過插件，能夠實現 Fiddler 中自動映射的功能，還能夠實現自動 combo 等功能，很是方便便捷。RequireJS 無這方面的支持。

6. 二者的插件機制有差別。RequireJS 採起的是在源碼中預留接口的形式，源碼中留有爲插件而寫的代碼。SeaJS 採起的插件機制則與 Node 的方式一致：開放自身，讓插件開發者可直接訪問或修改，從而很是靈活，能夠實現各類類型的插件。.

 

• bower 和 npm 的區別

bower 的話，從一開始，就是專門爲前端表現設計的包管理器，一切所有爲前端考慮的。npm 和bower 的最大區別，就是 npm 支持嵌套地依賴管理，而 bower只能支持扁平的依賴（嵌套的依賴，由程序員本身解決）。

　　嵌套依賴，指的就是，你依賴的軟件包，還有它本身的依賴，好像摘葡萄，一摘一大串。在服務器環境的時候，這並沒什麼關係，由於存儲空間夠大，一切代碼都是本地運行，只要解決完依賴就好了，

　　可是到了用戶產品的瀏覽器裏，就很成問題了，你不能讓用戶去下載好幾M的js代碼，那就太糟糕了。在這個狀況下，就須要程序員本身手動解決用到的類庫的嵌套依賴問題。好比確保各類各樣的插件都依賴同一個版本的jQuery。

　　爲何有不少項目 bower 和 npm 都用呢，那是由於要用 bower 管理前端的包，而用 npm 去管理一些後端的包和構建工具，例如，yeoman，grunt，gulp，jshint 等等等等。

 

React技術棧一覽