大公司或專業團隊用什麼前端工具?以及各個前端自動化工具教程

白吃白菜發表於2016-06-07
下面這些東西在大公司可能不流行(你懂的,大公司喜歡自己造輪子),但絕對是專業前端需要了解的:

  • Node.js:現代工業化前端的基礎;
  • RequireJS:AMD規範,即將過時的 JavaScript 模組化方案;
  • Bower:前端模組源;
  • npm;前端工具源,另一個潛在的前端模組源;
  • Browserify:即將過時的基於 CommonJS 的前端模組化方案;
  • Less:等 CSS 增強工具;
  • Gulp:前端構建工具,如果你在前端開發中不需要使用類似工具的話,我只能呵呵;

未來的 JavaScript:ES6、ES7,相容未來 JavaScript 模組化方案類庫、程式碼轉化類庫等等。


作者:寸志

來源:知乎

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

簡評一下業界常用的並且我瞭解的一些前端工具



css工具:

苦於合作的同事一直選的是 bootstrap,我沒有認真比較過 sass 與 less 而直接一路用著 less,不過兩者其實差不了多少。
現在貌似流行後處理器了(前面說的兩個叫前處理器,我也不知道他們差別在哪),autoprefixer 等,推薦看Pleeease 這是一個這類工具的集合

我的另一篇文章 講解 @media 媒體查詢大法:@media是什麼?css3 @media媒體查詢器用法

模組化工具:

首推:browserify 程式碼架構清晰,你可以自己拔插其中的某些部分,比如替換個 prelude(在瀏覽器裡怎麼載入模組的程式碼,預設是每個編譯合併後的 js 都帶一小段),或者用諸如 factor-bundle 這樣的外掛拎出共用組建來。因為架構清晰程式碼量小,你可以通讀原始碼瞭解其原理。

其次:webpack,不得不說 webpack 很強大,如果要用 react 的話 react-hot-loader 這樣的外掛目前只此一家。對我來說它的問題在於太龐大了,我無法理清其全貌怕用在專案裡踩坑自己無法解決。

不推薦:require.js sea.js,兩個都是要過時的東西,在我還沒成為 sea.js 黑前,就是堅定的 require.js 黑了。兩者的共同問題是要為每個檔案寫首尾的 wrapper 在瀏覽器端去解決,而不是像前兩者在開發部署階段去處理,require.js 問題最大,好歹 sea.js 還和 node.js 有所相容。

流程工具/部署前處理:

部署前處理主要包括用前面的模組化工具打包、生成版本號、壓縮檔案等。我主要用 gulp 來做這些事,從來都不會用也不喜歡 grunt,百度的 FIS 聽說過但不瞭解,讀過@張雲龍 的文章推測應該還不錯。我的建議是@張雲龍 的文章必讀而 FIS 可參考,最後用 gulp 來組織自己的工作流。

如果你用熟了 gulp,你可能會厭倦開工一個專案就想切個頁面也要擺好排場寫個幾十上百行的 gulpfile.js,這時你應該做減法,可以向 substack 學學用 npm run (package.json 裡面的 scripts 屬性)或者像./task.js 這樣的幾行程式碼即可。

包管理:

bower:用 github 來做源,國內使用很不堪,如 @yhben 的回覆“100k的js,克隆了一個50M的專案”。它可能簡化了一點點你去 github 上搜尋程式碼下載儲存的工作,但被要下載全庫這個缺點抵消了,對於依賴管理,我覺得他真沒做多少事。

npm:我是無論前端後端甚至 css 都用 npm 的,公司裡也用 @蘇千 和 @死馬 的 cnpm.org 搭了一個私有庫在用,個人覺得這個工具一定得掌握好,不然你就自絕於當今前端開發的主流了。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31088174/viewspace-2117094/,如需轉載,請註明出處,否則將追究法律責任。

相關文章