RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
用Browserify来实现CommonJS的浏览器加载-创新互联

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

成都创新互联专注于霍尔果斯网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供霍尔果斯营销型网站建设,霍尔果斯网站制作、霍尔果斯网页设计、霍尔果斯网站官网定制、小程序开发服务,打造霍尔果斯网络公司原创品牌,更为您提供霍尔果斯网站排名全网营销落地服务。
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模块

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

// a.jsvar a = 100;
module.exports.a = a;// b.jsvar result = require('./a');
console.log(result.a);

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

index.html直接引用b.js会报错,提示require没有被定义

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

//index.html
    
    Document    

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

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

这时,就要使用Browserify了

【安装】

使用下列命令安装browserify

npm install -g browserify

【转换】

使用下面的命令,就能将b.js转为浏览器可用的格式bb.js

$ browserify b.js > bb.js

查看bb.js,browserify将a.js和b.js这两个文件打包为bb.js,使其在浏览器端可以运行

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

(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

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

index.html引用bb.js,控制台显示100

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

//index.html


    
    Document


    

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

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

原理

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

$ npm install browser-unpack -g

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

$ browser-unpack < bb.js

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

可以看到,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依然存在

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章题目:用Browserify来实现CommonJS的浏览器加载-创新互联
网页地址:http://lswzjz.com/article/dchedh.html