前端構建工具的演變

時間 2020-04-02

標籤前端構建工具演變简体版

原文原文鏈接

這篇文章是我在試圖搞清楚前端爲什麼發展出這樣一套巨麻煩的工具鏈的過程當中作的筆記，在國內的社區裏關於這方面的文章彷佛少有講得通透的（我沒找到），最後在外網上面找到了兩篇很棒的文章，推薦你們閱讀：javascript

Modern JavaScript Explained For Dinosaurs 以咱們熟悉的形式開始：html 文件引用一個 js 文件，一步步講解爲何須要使用[npm，模塊打包，babel,...]等等工具，

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack 對比各個工具，比較他們的做用，不足。（是 Stack Overflow 上的一個提問，下面的高票回答都挺好的）

首先下個定義：css

構建工具:用來讓咱們再也不作機械重複的事情，解放咱們的雙手的。html

有哪些機械重複的事情？

在較早的前端開發中（js+css+html），有不少讓咱們以爲很不爽的地方，好比：前端

js 的弱類型
css 的編程性
手動維護依賴很麻煩
資源請求須要更快
沒有熱更新
瀏覽器的兼容性
......

這些需求催生出了一批前端工具，好比
ts/scss/JSMin/......java

來進行如下這些工做：node

代碼檢查
運行單元測試等
語言編譯
依賴分析、打包、替換等
代碼壓縮、spirit 圖片壓縮等
版本生成
...

再進一步，一個個命令行去輸入執行也是比較煩的
基於讓機器代替咱們手動去執行這些工做的想法，整合這些工做的構建工具出現了linux

首先是包管理器webpack

包管理器

是隨着 node 出現的
在沒有包管理器以前，維護所使用的第三方庫每每須要到官網下載包以及依賴，手動進行管理。
而包管理器包簡化項目依賴項的安裝和更新，不用再手動下載維護第三方包以及其依賴。web

這一類工具備 npm/bower/yarnnpm

JavaScript module bundler

//index.js
var moment = require（'moment'）;
moment.func()

這樣的代碼在 node 是沒有問題的，由於 node 能夠訪問計算機的文件系統。node 還知道每一個 npm 模塊路徑的位置，所以無需這樣寫require('./node_modules/moment/min/moment.min.js)，只需 require('moment')

而問題在於 require 瀏覽器是沒法識別的，這就須要模塊打包器

模塊捆綁器從入口文件開始，查找任何 require 語句，而後將它們替換爲適當的代碼最後建立單個輸出文件。最後在 html 中引用這個輸出文件。並且把依賴打包到一個文件而且壓縮能夠在必定程度上解決 http 鏈接過多的問題

這類的工具備Browserify webpack

task runner

咱們想自動執行全部可自動化執行的任務而不是手動執行多個命令行代碼，好比編譯 scss，壓縮代碼，lint...

有些像 linux 中使用&& 去執行一系列任務。

這類的工具備 grunt/gulp/npm

grunt/gulp的最大不一樣在於：grunt 每次任務都須要讀寫文件。而 Gulp 基於 node stream，同時配合了一系列插件去處理流，流能夠在插件之間傳遞。

而 npm 內置了腳本功能，經過調用其餘命令行工具來執行任務。npm 再配合 webpack webpack-dev-server eslint-loader等等使得前端開發高效便捷且規範。

腳手架

用來建立初始項目,而且作好上面所提到的一系列配置。

如各個框架提供的 Cli 工具、Yeoman

總結

gulp、grunt、browserify、webpack、rollup 等等構建工具都經過插件的形式集成了 sass 編譯成 css、圖片壓縮...等等功能。其中 webpack 更側重模塊（圖片、js 文件、css 文件等）打包，對資源進行處理，打包成符合生產環境部署的前端資源。gulp、grunt 則旨在規範前端開發流程。若是應用場景中是打包 js 庫，但願作 ES 轉換，模塊解析，可使用 Rollup 相比 webpack 會更簡練。