使用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 相关文章推荐
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
深入解读Node.js中的koa源码
Jun 17 Javascript
微信小程序实现时间进度条功能
Nov 17 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+ajax登录跳转登录实现思路
2016/07/31 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
Javascript 中创建自定义对象的方法汇总
2014/12/04 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
node.js通过url读取文件
2020/10/16 Javascript
Python实现图像几何变换
2015/07/06 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python输入多行字符串的方法总结
2019/07/02 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python+mysql实现个人论文管理系统
2019/10/25 Python
python实现低通滤波器代码
2020/02/26 Python
python 决策树算法的实现
2020/10/09 Python
运行Python编写的程序方法实例
2020/10/21 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
工地门卫岗位职责
2013/12/30 职场文书
老人祝寿主持词
2014/03/28 职场文书
市场策划求职信
2014/08/07 职场文书
树转促学习心得体会
2014/09/10 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
幸福来敲门观后感
2015/06/04 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书