使用Browserify来实现CommonJS的浏览器加载方法

Nodejs的模块是基于Commonjs规范实现的,可不可以应用在浏览器环境中呢?

rush:js;"> var math = require('math'); math.add(2,3);

第二行math.add(2,3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态

browserify这样的一个工具,可以把nodejs的模块编译成浏览器可用的模块,解决上面提到的问题。本文将详细介绍browserify

实现

browserify是目前最常用的Commonjs格式转换的工具

请看一个例子,b.js模块加载a.js模块

rush: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没有被定义

<div class="jb51code">
<pre class="brush:xhtml;">
//index.html
<!DOCTYPE html>
<html lang="en">

<Meta charset="UTF-8"> Document

原理

browserify到底做了什么?安装一下browser-unpack,就能清楚原理了

rush:js;"> $ npm install browser-unpack -g

然后,使用下列命令,将前面生成的bb.js解包

rush:js;"> $ browser-unpack < bb.js

可以看到,browerify将所有模块放入一个数组,id属性是模块的编号,source属性是模块的源码,deps属性是模块的依赖

因为b.js里面加载了a.js,所以deps属性就指定./a对应1号模块。执行的时候,浏览器遇到require('./a')语句,就自动执行1号模块的source属性,并将执行后的module.exports属性输出

browerify将a.js和b.js打包,并生成bb.js,browser-unpack将bb.js解包,是一个逆向的过程。但实际上,bb.js依然存在

以上这篇使用browserify来实现Commonjs的浏览器加载方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

相关文章

什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据...
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:...
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面