使用Browserify來實現(xiàn)CommonJS的瀏覽器加載方法

更新時間：2017年05月14日 11:25:49 投稿：jingxian

下面小編就為大家?guī)硪黄褂肂rowserify來實現(xiàn)CommonJS的瀏覽器加載方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

Nodejs的模塊是基于CommonJS規(guī)范實現(xiàn)的，可不可以應用在瀏覽器環(huán)境中呢？

var math = require('math');
math.add(2, 3);

第二行math.add(2, 3)，在第一行require('math')之后運行，因此必須等math.js加載完成。也就是說，如果加載時間很長，整個應用就會停在那里等。這對服務器端不是一個問題，因為所有的模塊都存放在本地硬盤，可以同步加載完成，等待時間就是硬盤的讀取時間。但是，對于瀏覽器，這卻是一個大問題，因為模塊都放在服務器端，等待時間取決于網(wǎng)速的快慢，可能要等很長時間，瀏覽器處于"假死"狀態(tài)

而browserify這樣的一個工具，可以把nodejs的模塊編譯成瀏覽器可用的模塊，解決上面提到的問題。本文將詳細介紹Browserify

實現(xiàn)

Browserify是目前最常用的CommonJS格式轉換的工具

請看一個例子，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會報錯，提示require沒有被定義

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<script src="b.js"></script>  
</body>
</html>

這時，就要使用Browserify了

【安裝】

使用下列命令安裝browserify

npm install -g browserify

【轉換】

使用下面的命令，就能將b.js轉為瀏覽器可用的格式bb.js

$ browserify b.js > bb.js

查看bb.js，browserify將a.js和b.js這兩個文件打包為bb.js，使其在瀏覽器端可以運行

(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，控制臺顯示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>