快速提示：使用 Browserify 編寫模塊化 JavaScript
browserify 工具已經出現了幾年，但直到我開始使用 node.js 進行開發時，我才真正注意到這一點。這是我欣賞編寫模塊化 JavaScript 所帶來的敏捷性和強大功能的時候。
Browserify 可以在任何網絡應用程序中使用，無論服務器端語言如何，在這個快速提示中，我將向您展示如何使用它來模塊化您的代碼，同時展示它帶來的一些好處。
首先，什麼是模塊？
模塊背後的基本思想是，它是一段孤立的、任意複雜的代碼。它可能包含也可能不包含其他模塊，並且將對像或函數顯式導出到包含它的代碼中。這比簡單地將源代碼拆分為單獨的 js 文件，並將它們包含在腳本標籤中要好，因為模塊可以讓您以其他方式無法重用代碼，不會污染全局範圍，並且更容易測試。在這裡查看更多好處。
JavaScript（還）沒有定義模塊的本地方式，因此社區介入並發明了幾種方法來做到這一點。最流行的兩個是 CommonJS 規範，它被 node.js 和 browserify 使用，以及 AMD 被 require.js 等異步庫使用。
在本文中，我們將討論 CommonJS 和 browserify。
什麼是browserify？
Web 瀏覽器無法直接加載 CommonJS 模塊，因為它需要在下載模塊時凍結整個頁面，這對用戶來說是一種可怕的體驗。 Browserify 是一個實用程序，可讓您編寫 JavaScript，就好像瀏覽器支持模塊一樣，當需要部署時，它會將您的代碼與您使用的模塊一起編譯成一個 js 文件，您可以將其作為腳本包含在內在您的頁面中。
使用 browserify，您可以輕鬆地模塊化您的應用程序，甚至更好 - 它可以讓您以幾乎相同的方式使用所有為 node.js 編寫的精彩庫。
安裝它
要使用 browserify，你需要安裝 node.js 和 npm。我在這裡寫了一些說明。然後你需要安裝browserify，並且可選地縮小，這樣你就可以減少你的js文件的大小。在你的終端/命令提示符中寫下這些命令：
npm install -g browserify minify
這將獲取包，並為您設置 browserify 和 minify 命令。
一個簡單的例子
讓我們編寫一個小型模塊化應用程序，它通過 AJAX 加載包含電影的 JSON 文件，並允許用戶通過在瀏覽器的開發工具中編寫命令來購買電影票。為了演示 Browserify 如何使用庫，我將包含 superagent AJAX 庫。
要安裝 superagent，請在終端中輸入以下命令：
npm install superagent
這將下載庫文件和所有其他依賴包。 npm 上有很多客戶端庫，包括 jQuery。所以除了 browserify 給你帶來的其他好處之外，從網上獲取和下載庫也會變得更加容易。
我們現在準備寫一些實際的代碼！我們將編寫的第一個文件是一個模塊，它定義了我們的影院應用程序的用戶將使用的常用方法。
assets/js/api.js
module.exports = function(global, movies){
var tickets = [];
global.showMovies = function(){
movies.forEach(function(m){
console.log(m.id + ') ' + m.name + ' | $' + m.price.toFixed(2));
});
};
global.buyTicket = function(id){
id = id || 0;
id -= 1;
if(movies[id] !== undefined){
tickets.push(id);
console.log('You bought a ticket for "' + movies[id].name + '"!')
}
else{
console.error('No such movie!');
}
};
global.showTickets = function(){
tickets.forEach(function(id){
console.log('Ticket for "' + movies[id].name + '" | $' + movies[id].price.toFixed(2));
});
};
global.totalCost = function(){
var total = 0;
tickets.forEach(function(id){
total += movies[id].price;
});
console.log('You have to pay $' + total.toFixed(2));
};
}
此模塊導出一個函數，該函數將一個對象和一個電影數組作為參數。正如您將在我們的主程序中看到的，我們將通過 ajax 獲取數組，並將全局對象設置為 window .我選擇不參考 window 直接在這個模塊中，因為接收它作為參數將更容易在其他情況下重用代碼（或者在服務器端，如果我們使用的是 node.js）。
這是主文件：
assets/js/main.js
// Require the superagent library
var request = require('superagent');
// Require our own module
var api = require('./api.js');
// Send a GET AJAX request
request('assets/movies.json', function(res){
if(res.ok){
// Initialize the API
api(window, res.body.movies);
}
else{
throw new Error('An AJAX error occured: ' + res.text);
}
}); 因為瀏覽器本身不支持模塊，所以我們需要 browserify 來為我們把這段代碼轉換成一個文件。這可以通過以下命令完成：
browserify assets/js/main.js > assets/js/include.js minify assets/js/include.js assets/js/include.min.js
第一個命令將編譯您的 main.js 文件到 include.js .後一個文件將包含您的代碼以及您使用的所有模塊。第二個命令將其縮小（刪除空格、註釋和重命名變量）以減小腳本的文件大小並加快下載速度。
我提供了一個 shell 腳本 - build.sh ，你可以在 Unix/Linux/OSX 下使用這個命令執行：
bash build.sh
如果您運行的是 Windows，您可能會創建一個具有相同內容的批處理文件並從命令提示符處執行它。
剩下的就是添加 include.min.js 文件到您的頁面：
來自 index.html
<script src="assets/js/include.min.js"></script>
你可以看到 movies.json 文件和可下載 zip 文件中的其他資源，從上面的按鈕鏈接。
我們完成了！
今天的快速提示到此結束。我希望您發現我們的小實驗很有用，並且您將開始在模塊化 JavaScript 領域的冒險！
