Nodejs的模块是基于CommonJS规范实现的,可不可以应用在浏览器环境中呢?
var=需要数学(数学);
数学。添加(2、3);
第二行数学。添加(2、3),在第一行要求(“数学”)之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于“假”死状态
而browserify这样的一个工具,可以把nodejs的模块编译成浏览器可用的模块,解决上面提到的问题。本文将详细介绍browserify
Browserify是目前最常用的CommonJS格式转换的工具
请看一个例子,研究模块加载a.js模块
//a.js
var=100;
module.exports。一个=;//研究
var=结果要求(“。/?;
console.log(首先);
index . html直接引用研究会报错,提示需要没有被定义
//index . html
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt;脚本src=" https://www.yisu.com/zixun/b.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
这时,就要使用Browserify了
使用下列命令安装browserify
npm安装- g browserify
使用下面的命令,就能将研究转为浏览器可用的格式bb.js
美元browserify b。js祝辞bb.js
查看bb.js, browserify将a.js和研究这两个文件打包为bb.js,使其在浏览器端可以运行
(函数e (t) n, r){函数s (o, u){如果(! n [o]) {(! t [o]) {var=typeof要求==肮δ堋?和需要;如果(! u&和一个)返回(o ! 0);如果(i)返回我(o, ! 0); var f=新的错误(“找不到模块+ o +“”);把f。代码=癕ODULE_NOT_FOUND”(f} var l=n [o]={出口:{}};t [o][0]打电话给(l.exports、功能(e) {var n=t [o] [1] [e];返回年代(n # 63; n: e)}, l, l.exports, e, t, n, r)}返回n [o]。出口}var=typeof要求==肮δ堋?和需要;为(var o=0; o
index . html引用bb.js,控制台显示100
//index . html
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;/head>
& lt; body>
& lt;脚本src=" https://www.yisu.com/zixun/bb.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
Browserify到底做了什么?安装一下browser-unpack,就能清楚原理了
美元npm安装browser-unpack - g
然后,使用下列命令,将前面生成的bb.js解包
$ browser-unpack & lt;bb.js
可以看的到,browerify将所有模块放入一个数组,id属性是模块的编号,源属性是模块的源码,deps属性是模块的依赖
因为研究里面加载了a.js,所以deps属性就指定。/对应1号模块。执行的时候,浏览器遇到要求(“。/?语句,就自动执行1号模块的来源属性,并将执行后的module.exports属性值输出
browerify将a.js和研究打包,并生成bb.js, browser-unpack将bb.js解包,是一个逆向的过程。但实际上,bb.js依然存在
以上这篇使用Browserify来实现CommonJS的浏览器加载方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
