?
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
基本用法
管理前端模塊
生成前端模塊
腳本文件的實(shí)時生成
browserify-middleware模塊
參考鏈接
隨著JavaScript程序逐漸模塊化，在ECMAScript 6推出官方的模塊處理方案之前，有兩種方案在實(shí)踐中廣泛采用：一種是AMD模塊規(guī)范，針對模塊的異步加載，主要用于瀏覽器端；另一種是CommonJS規(guī)范，針對模塊的同步加載，主要用于服務(wù)器端，即node.js環(huán)境。
Browserify是一個node.js模塊，主要用于改寫現(xiàn)有的CommonJS模塊，使得瀏覽器端也可以使用這些模塊。使用下面的命令，在全局環(huán)境下安裝Browserify。
$ npm install -g browserify
基本用法
先看一個例子。假定有一個很簡單的CommonJS模塊文件foo.js。
// foo.js
module.exports = function(x) {
console.log(x);
};
然后，還有一個main.js文件，用來加載foo模塊。
// main.js
var foo = require("./foo");
foo("Hi");
使用Browserify，將main.js轉(zhuǎn)化為瀏覽器可以加載的腳本compiled.js。
browserify main.js > compiled.js # 或者 browserify main > compiled.js # 或者 browserify main.js -o compiled.js
之所以轉(zhuǎn)化后的文件叫做compiled.js，是因?yàn)樵撐募粌H包括了main.js，還包括了它所依賴的foo.js。兩者打包在一起，保證瀏覽器加載時的依賴關(guān)系。
<script src="compiled.js"></script>
使用上面的命令，在瀏覽器中運(yùn)行compiled.js，控制臺會顯示Hi。
我們再看一個在服務(wù)器端的backbone模塊轉(zhuǎn)為客戶端backbone模塊的例子。先安裝backbone和它所依賴的jQuery模塊。
npm install backbone jquery
然后，新建一個main.js文件。
// main.js
var Backbone = require('backbone');
var $ = Backbone.$ = require('jquery/dist/jquery')(window);
var AppView = Backbone.View.extend({
render: function(){
$('main').append('<h1>Browserify is a great tool.</h1>');
}
});
var appView = new AppView();
appView.render();
接著，使用browserify將main.js轉(zhuǎn)為app.js。
browserify main.js -o app.js
app.js就可以直接插入HTML網(wǎng)頁了。
<script src="app.js"></script>
注意，只要插入app.js一個文件就可以了，完全不需要再加載backbone.js和jQuery了。
管理前端模塊
Browserify的主要作用是將CommonJS模塊轉(zhuǎn)為瀏覽器可以調(diào)用的格式，但是純粹的前端模塊，也可以用它打包。
首先，新建一個項(xiàng)目目錄，添加package.json文件。
{
"name": "demo",
"version": "1.0.0"
}
接著，新建index.html。
<!doctype html> <html> <head> <title>npm and jQuery demo</title> </head> <body> <span class="title-tipso tipso_style" title="This is a loaded TIPSO!"> Roll over to see the tip </span> <script src="./bundle.js"> </body> </html>
上面代碼中的bundle.js，就是Browserify打包后將生成的文件。
然后，安裝jquery和它的插件。
$ npm install --save jquery tipso
接著，新建一個文件entry.js。
global.jQuery = require('jquery');
require('tipso');
jQuery(function(){
jQuery('.title-tipso').tipso();
});
上面的文件中，第一行之所以要把jQuery寫成global的屬性，是為了轉(zhuǎn)碼之后，它可以變成一個全局變量。
最后，Browserify打包。
$ browserify entry.js --debug > bundle.jsOA
上面代碼中，--debug參數(shù)表示在打包后的文件中加入source map以便除錯。
這時，瀏覽器打開index.html，腳本已經(jīng)可以運(yùn)行。如果不希望將jQuery一起打包，而是通過CDN加載，可以使用browserify-shim模塊。
另外一個問題是，某些jQuery插件還有自帶的CSS文件，這時可以安裝parcelify模塊。
$ npm install -g parcelify
然后，在package.json中寫入規(guī)則，聲明CSS文件的位置。
"style": [ "./node_modules/tipso/src/tipso.css" ]
接著，運(yùn)行parcelify進(jìn)行CSS打包。
$ parcelify entry.js -c bundle.css
最后，將打包后的CSS文件插入index.html。
<link rel="stylesheet" href="bundle.css" />
生成前端模塊
有時，我們只是希望將node.js的模塊，移植到瀏覽器，使得瀏覽器端可以調(diào)用。這時，可以采用browserify的-r參數(shù)（--require的簡寫）。
browserify -r through -r ./my-file.js:my-module > bundle.js
上面代碼將through和my-file.js（后面的冒號表示指定模塊名為my-module）都做成了模塊，可以在其他script標(biāo)簽中調(diào)用。
<script src="bundle.js"></script>
<script>
var through = require('through');
var myModule = require('my-module');
/* ... */
</script>
可以看到，-r參數(shù)的另一個作用，就是為瀏覽器端提供require方法。
腳本文件的實(shí)時生成
Browserify還可以實(shí)時生成腳本文件。
下面是一個服務(wù)器端腳本，啟動Web服務(wù)器之后，外部用戶每次訪問這個腳本，它的內(nèi)容是實(shí)時生成的。
var browserify = require('browserify');
var http = require('http');
http.createServer(function (req, res) {
if (req.url === '/bundle.js') {
res.setHeader('content-type', 'application/javascript');
var b = browserify(__dirname + '/main.js').bundle();
b.on('error', console.error);
b.pipe(res);
}
else res.writeHead(404, 'not found')
});
browserify-middleware模塊
上面是將服務(wù)器端模塊直接轉(zhuǎn)為客戶端腳本，然后在網(wǎng)頁中調(diào)用這個轉(zhuǎn)化后的腳本文件。還有一種思路是，在運(yùn)行時動態(tài)轉(zhuǎn)換模塊，這就需要用到browserify-middleware模塊。
比如，網(wǎng)頁中需要加載app.js，它是從main.js轉(zhuǎn)化過來的。
<!-- index.html --> <script src="app.js"></script>
你可以在服務(wù)器端靜態(tài)生成一個app.js文件，也可以讓它動態(tài)生成。這就需要用browserify-middleware模塊，服務(wù)器端腳本要像下面這樣寫。
var browserify = require('browserify-middleware');var express = require('express');var app = express();
app.get('/app.js', browserify('./client/main.js'));
app.get('/', function(req, res){
res.render('index.html');
});
參考鏈接
Jack Franklin, Dependency Management with Browserify
Seth Vincent, Using Browserify with Express
Patrick Mulder, Browserify - Unix in the browser
Patrick Catanzariti, Getting Started with Browserify
Lin Clark, Using jQuery plugins with npm