摘要：做菜的工具有歷史演變的過程，我們軟件開發(fā)的工具也是如此。今天就從前端工具演變來聊聊前端的歷史發(fā)展。上面的做法很顯然是存在效率和不方便的問題，在這種情況下前端的工具應(yīng)運(yùn)而生。是只被用于管理前端的組件，例如，，的工具，只用在前端。

假如你烘焙過蛋糕（哪怕沒有親自做過，但是也應(yīng)該聽說過），除了基本的面粉，雞蛋等原材料外，或許你還需要一個(gè)電動(dòng)蛋白打發(fā)器，一個(gè)烤箱。這是現(xiàn)代的做法，那么在打發(fā)器和烤箱發(fā)明之前，人們?cè)趺纯镜案饽兀?br>沒有打發(fā)器，只能手動(dòng)打發(fā)，這樣的弊端是不僅花費(fèi)時(shí)間長(zhǎng)，而且你的手可能也要廢掉。沒有烤箱，用炭烤，這樣就會(huì)出現(xiàn)溫度不好掌握，或許還得有人一直盯著的問題。

我一直愛把軟件開發(fā)想成做菜，原材料就是編程語(yǔ)言，菜單是算法邏輯，而做菜的這些工具也是我們?cè)谲浖_發(fā)中使用的各種工具。做菜的工具有歷史演變的過程，我們軟件開發(fā)的工具也是如此。

只是有些工具，現(xiàn)在被大家廣泛使用，而有些卻只能在一些老文章里面見證他們?cè)?jīng)的輝煌。今天就從前端工具演變來聊聊前端的歷史發(fā)展。

摸魚警告：本篇沒有干貨，純粹閑聊。

1：沒有任何工具的純手工時(shí)代
最開始的前端開發(fā)，只需要掌握HTML + CSS + JavaScript就好，我們要在一個(gè)頁(yè)面上使用js，除了通過標(biāo)簽外，還可以把js代碼放到一個(gè)js文件，通過在HTML文件引用這個(gè)js文件的方式：

但是，當(dāng)我們的業(yè)務(wù)需求變復(fù)雜，項(xiàng)目變大，我們通常會(huì)把邏輯相關(guān)的代碼都放同一個(gè)js文件里面，這樣慢慢就形成了模塊的概念，例如你在做一個(gè)超市收銀系統(tǒng)，項(xiàng)目里有一個(gè)（或者幾個(gè)）js文件是跟價(jià)格計(jì)算相關(guān)，有些js文件是跟時(shí)間格式化相關(guān)。現(xiàn)在你正在開發(fā)收銀小票功能模塊，毋庸置疑，這個(gè)模塊肯定需要用到前面的價(jià)格計(jì)算和時(shí)間格式化模塊。這里，就產(chǎn)生了模塊訪問模塊的需求。

很多語(yǔ)言都天然地支持在A文件里面引用B文件的功能，但是javaScript一開始卻不是這樣。因?yàn)閖avaScript一開始是被設(shè)計(jì)來只在瀏覽器（準(zhǔn)確地說是用戶的瀏覽器）上運(yùn)行的語(yǔ)言。處于安全性的考慮，它不被賦予訪問文件的權(quán)利和功能。

在這個(gè)階段我們要做到在A文件使用B文件提供的功能，只能在HTML文件里面引用相關(guān)的js文件，通過在全局暴露相關(guān)變量，然后這樣就能使用到了。

2：包管理（package management）工具
在上面第一點(diǎn)我們提到了模塊。在一個(gè)稍大的項(xiàng)目中，一般會(huì)用到很多前端社區(qū)已經(jīng)成熟的模塊和框架。比如，專門用來處理時(shí)間格式問題的moment.js，以前可能會(huì)用到j(luò)Query等。我們要在項(xiàng)目里面使用他們，得先找到他們?cè)诰W(wǎng)絡(luò)上的地址，把相應(yīng)的文件下載下來，放到我們自己的項(xiàng)目某個(gè)目錄，然后再在HTML文件里面引用相應(yīng)的文件路徑。

上面的做法很顯然是存在效率和不方便的問題，在這種情況下前端的package management工具應(yīng)運(yùn)而生。
我們先來了解一下包管理工具為我們做了什么事：
1：幫我們從網(wǎng)絡(luò)上下載依賴
2：管理依賴的版本
3：有的還具備task runner功能（npm）
這里就要提到幾個(gè)包管理工具：

bower

npm

yarn

bower和npm都是包管理工具，但是又有不同。現(xiàn)在大家聽得最多，用的的可能是npm，yarn，bower已經(jīng)差不多死掉了。

npm vs bower

npm(node package manager)本是nodejs用來管理node依賴的，但是后來也被用于前端的依賴管理。
bower是只被用于管理前端的組件，例如html，css，js的工具，只用在前端。

在依賴結(jié)構(gòu)上二者也不相同。bower是扁平的依賴樹，需要用戶管理依賴的依賴。而npm采用的是嵌套的依賴樹，不需要用戶關(guān)心依賴的依賴。

bower

bower init //創(chuàng)建bower.json
bower install jquery --save //安裝jquery依賴

安裝成功之后會(huì)，bower會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè)名叫bower_components/的文件夾。所以通過bower安裝的依賴都會(huì)放到這個(gè)目錄下。例如上面的jquery安裝成功之后，我們能在bower_components/目錄下得到j(luò)query相關(guān)文件，然后我們就可以在HTML文件里面引用了:

npm也是類似的：

npm init //創(chuàng)建package.json文件
npm install jquery --save //安裝jquery依賴

安裝成功之后會(huì)，npm會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè)名叫node_modules/的文件夾。所以通過npm安裝的依賴都會(huì)放到這個(gè)目錄下。例如上面的jquery安裝成功之后，我們能在node_modules/目錄下得到j(luò)query相關(guān)文件，然后我們就可以在HTML文件里面引用了:

3：Module bundler工具
在上面的第二點(diǎn)里面，我們使用了包管理工具，已經(jīng)不再需要我們自己手動(dòng)去網(wǎng)上找依賴，下載到項(xiàng)目庫(kù)里，但是想要使用，依然需要在HTML文件里面一一引用。我們要怎樣才能像別的語(yǔ)言一樣在一個(gè)js文件里面引用另外一個(gè)js文件（模塊）呢？

當(dāng)然自從ES6(ES2015)開始，JavaScript已經(jīng)有這個(gè)功能了，我們可以通過import來引入，export來導(dǎo)出。但是在這之前，我們只能依賴Module bundler工具來做到這一點(diǎn)。

當(dāng)時(shí)比較出名和流行的一下2大解決方案：

CommonJs - node.js, Browserify.js

AMD(Asynchronous Module Definition)- Require.js

至今仍然有很多人沒有弄明白CommonJS和AMD都是一個(gè)協(xié)議標(biāo)準(zhǔn)，而不是一個(gè)具體的庫(kù)。CommonJs的核心就是module(模塊)，定義了JavaScript代碼怎樣引用和導(dǎo)出代碼。實(shí)現(xiàn)了CommonJs的最出名的就是node.js和Browserify.js，而對(duì)應(yīng)的實(shí)現(xiàn)了AMD的比較是Require.js

大家都知道node.js是運(yùn)行在服務(wù)端的JavaScript，不屬于我們本篇的范疇，這里不講。接下來我們來看看

Browserify.js

如果你打開Browserify的官網(wǎng)，可以看到這樣一句話：

Browserify lets you require("modules") in the browser by bundling up
all of your dependencies.

Browserify提供require()方法在一個(gè)js文件里面引入另外一個(gè)js文件或者一個(gè)js文件export的變量。最終Browserify會(huì)根據(jù)依賴關(guān)系，把所有的js代碼都整合到一個(gè)js文件里，也就是我們常說的bundle文件。之后就只需要在HTML文件里面引用這一個(gè)js bundle文件就行了。

接下來看看具體怎么使用：

step1: 全局安裝browserify

npm install browserify -g //全局安卓browserify

step2: 在module/目錄下創(chuàng)建一個(gè)module.js，有如下示例代碼：

function getSum(a, b) {
    return a + b;
}

module.exports = getSum;

step3: 創(chuàng)建main.js文件，在這里面使用module/module.js

var getSum = require("./module/module");
var sum = getSum(10, 10);
console.log("10 + 10 = ", sum);

step4: 利用browserify創(chuàng)建bundle文件：

browserify main.js -o build/bundle.js -d

上面的命令就是：browserify以main.js為源文件，生成bundle文件bundle.js，創(chuàng)建文件夾build/，并把bundle.js放到build/路徑下。-o(-output)表示后面跟上輸出文件路徑， -d表示生成source map.

step5: 在HTMl文件里面引入上一步的bundle.js

step6: 驗(yàn)證結(jié)果

10 + 10 =  20 //控制臺(tái)得到我們正確地結(jié)果

4：task runner工具
前端的task可能會(huì)有：檢查代碼格式，預(yù)編譯，跑測(cè)試，壓縮代碼，起server等。Task Runner就是按照用戶自定義的任務(wù)流自動(dòng)地完成一系列的task。

一般task runner工具本身并不具體具體執(zhí)行某項(xiàng)任務(wù)的功能，而是每一個(gè)任務(wù)都有相應(yīng)的插件來完成。例如曾經(jīng)流行過的grunt和gulp。

但是現(xiàn)在的前端項(xiàng)目也不會(huì)再用到grunt和gulp了。現(xiàn)如今，因?yàn)轫?xiàng)目上一般會(huì)用到npm來做依賴管理，而npm自己的script就可以用來run task, 這樣也不用額外再多下一個(gè)額外的工具了。