Browserify：瀏覽器加載Node.js模塊

2021-09-15 16:14 更新

隨著JavaScript程序逐漸模塊化，在ECMAScript 6推出官方的模塊處理方案之前，有兩種方案在實(shí)踐中廣泛采用：一種是AMD模塊規(guī)范，針對(duì)模塊的異步加載，主要用于瀏覽器端；另一種是CommonJS規(guī)范，針對(duì)模塊的同步加載，主要用于服務(wù)器端，即node.js環(huán)境。

Browserify是一個(gè)node.js模塊，主要用于改寫現(xiàn)有的CommonJS模塊，使得瀏覽器端也可以使用這些模塊。使用下面的命令，在全局環(huán)境下安裝Browserify。

$ npm install -g browserify

基本用法

先看一個(gè)例子。假定有一個(gè)很簡(jiǎn)單的CommonJS模塊文件foo.js。

// foo.js

module.exports = function(x) {
  console.log(x);
};

然后，還有一個(gè)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。兩者打包在一起，保證瀏覽器加載時(shí)的依賴關(guān)系。

<script src="https://atts.w3cschool.cn/attachments/image/cimg/pre>

使用上面的命令，在瀏覽器中運(yùn)行compiled.js，控制臺(tái)會(huì)顯示Hi。


我們?cè)倏匆粋€(gè)在服務(wù)器端的backbone模塊轉(zhuǎn)為客戶端backbone模塊的例子。先安裝backbone和它所依賴的jQuery模塊。


npm install backbone jquery


然后，新建一個(gè)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="https://atts.w3cschool.cn/attachments/image/cimg/pre>

注意，只要插入app.js一個(gè)文件就可以了，完全不需要再加載backbone.js和jQuery了。


管理前端模塊


Browserify的主要作用是將CommonJS模塊轉(zhuǎn)為瀏覽器可以調(diào)用的格式，但是純粹的前端模塊，也可以用它打包。


首先，新建一個(gè)項(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="https://atts.w3cschool.cn/attachments/image/cimg/bundle.js">
</body>
</html>


上面代碼中的bundle.js，就是Browserify打包后將生成的文件。


然后，安裝jquery和它的插件。


$ npm install --save jquery tipso


接著，新建一個(gè)文件entry.js。


global.jQuery = require('jquery');
require('tipso');

jQuery(function(){
  jQuery('.title-tipso').tipso();
});


上面的文件中，第一行之所以要把jQuery寫成global的屬性，是為了轉(zhuǎn)碼之后，它可以變成一個(gè)全局變量。


最后，Browserify打包。


$ browserify entry.js --debug > bundle.jsOA


上面代碼中，--debug參數(shù)表示在打包后的文件中加入source map以便除錯(cuò)。


這時(shí)，瀏覽器打開index.html，腳本已經(jīng)可以運(yùn)行。如果不希望將jQuery一起打包，而是通過CDN加載，可以使用browserify-shim模塊。


另外一個(gè)問題是，某些jQuery插件還有自帶的CSS文件，這時(shí)可以安裝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" />


生成前端模塊


有時(shí)，我們只是希望將node.js的模塊，移植到瀏覽器，使得瀏覽器端可以調(diào)用。這時(shí)，可以采用browserify的-r參數(shù)（--require的簡(jiǎn)寫）。


browserify -r through -r ./my-file.js:my-module > bundle.js


上面代碼將through和my-file.js（后面的冒號(hào)表示指定模塊名為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ù)的另一個(gè)作用，就是為瀏覽器端提供require方法。


腳本文件的實(shí)時(shí)生成


Browserify還可以實(shí)時(shí)生成腳本文件。


下面是一個(gè)服務(wù)器端腳本，啟動(dòng)Web服務(wù)器之后，外部用戶每次訪問這個(gè)腳本，它的內(nèi)容是實(shí)時(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)用這個(gè)轉(zhuǎn)化后的腳本文件。還有一種思路是，在運(yùn)行時(shí)動(dòng)態(tài)轉(zhuǎn)換模塊，這就需要用到browserify-middleware模塊。


比如，網(wǎng)頁中需要加載app.js，它是從main.js轉(zhuǎn)化過來的。


<!-- index.html -->

<script src="https://atts.w3cschool.cn/attachments/image/cimg/pre>

你可以在服務(wù)器端靜態(tài)生成一個(gè)app.js文件，也可以讓它動(dòng)態(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');
});


參考鏈接
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)