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


Posted in Javascript onMay 14, 2017

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模块

// 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来实现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,使其在浏览器端可以运行

(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>

使用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依然存在

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

Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
vue v-for直接循环数字实例
Nov 07 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 Javascript
js实现股票实时刷新数据案例
May 14 #Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 #Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 #Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 #Javascript
web.js.字符串与正则表达式操作
May 13 #Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 #Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
You might like
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP反向代理类代码
2014/08/15 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
JS 统计时间
2021/03/09 Javascript
js表单验证实例讲解
2016/03/31 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Python的print用法示例
2014/02/11 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
详解Django的CSRF认证实现
2018/10/09 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python流程控制语句的深入讲解
2020/06/15 Python
详解anaconda安装步骤
2020/11/23 Python
python 实现aes256加密
2020/11/27 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
求职信怎么写范文
2014/05/26 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
百年校庆感言
2015/08/01 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
导游词之太湖
2019/10/08 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android