您好,登錄后才能下訂單哦!
Nodejs的模塊是基于CommonJS規(guī)范實(shí)現(xiàn)的,可不可以應(yīng)用在瀏覽器環(huán)境中呢?
var math = require('math'); math.add(2, 3);
第二行math.add(2, 3),在第一行require('math')之后運(yùn)行,因此必須等math.js加載完成。也就是說(shuō),如果加載時(shí)間很長(zhǎng),整個(gè)應(yīng)用就會(huì)停在那里等。這對(duì)服務(wù)器端不是一個(gè)問(wèn)題,因?yàn)樗械哪K都存放在本地硬盤,可以同步加載完成,等待時(shí)間就是硬盤的讀取時(shí)間。但是,對(duì)于瀏覽器,這卻是一個(gè)大問(wèn)題,因?yàn)槟K都放在服務(wù)器端,等待時(shí)間取決于網(wǎng)速的快慢,可能要等很長(zhǎng)時(shí)間,瀏覽器處于"假死"狀態(tài)
而browserify這樣的一個(gè)工具,可以把nodejs的模塊編譯成瀏覽器可用的模塊,解決上面提到的問(wèn)題。本文將詳細(xì)介紹Browserify
實(shí)現(xiàn)
Browserify是目前最常用的CommonJS格式轉(zhuǎn)換的工具
請(qǐng)看一個(gè)例子,b.js模塊加載a.js模塊
// a.js var a = 100; module.exports.a = a; // b.js var result = require('./a'); console.log(result.a);
index.html直接引用b.js會(huì)報(bào)錯(cuò),提示require沒(méi)有被定義
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="b.js"></script> </body> </html>
這時(shí),就要使用Browserify了
【安裝】
使用下列命令安裝browserify
npm install -g browserify
【轉(zhuǎn)換】
使用下面的命令,就能將b.js轉(zhuǎn)為瀏覽器可用的格式bb.js
$ browserify b.js > bb.js
查看bb.js,browserify將a.js和b.js這兩個(gè)文件打包為bb.js,使其在瀏覽器端可以運(yùn)行
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ var a = 100; module.exports.a = a; },{}],2:[function(require,module,exports){ var result = require('./a'); console.log(result.a); },{"./a":1}]},{},[2]);
index.html引用bb.js,控制臺(tái)顯示100
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="bb.js"></script> </body> </html>
原理
Browserify到底做了什么?安裝一下browser-unpack,就能清楚原理了
$ npm install browser-unpack -g
然后,使用下列命令,將前面生成的bb.js解包
$ browser-unpack < bb.js
可以看到,browerify將所有模塊放入一個(gè)數(shù)組,id屬性是模塊的編號(hào),source屬性是模塊的源碼,deps屬性是模塊的依賴
因?yàn)閎.js里面加載了a.js,所以deps屬性就指定./a對(duì)應(yīng)1號(hào)模塊。執(zhí)行的時(shí)候,瀏覽器遇到require('./a')語(yǔ)句,就自動(dòng)執(zhí)行1號(hào)模塊的source屬性,并將執(zhí)行后的module.exports屬性值輸出
browerify將a.js和b.js打包,并生成bb.js,browser-unpack將bb.js解包,是一個(gè)逆向的過(guò)程。但實(shí)際上,bb.js依然存在
以上這篇使用Browserify來(lái)實(shí)現(xiàn)CommonJS的瀏覽器加載方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。