使用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 相关文章推荐
onpropertypchange
Jul 01 Javascript
js实现iframe动态调整高度的代码
Jan 06 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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版本实现代码
2012/09/15 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
浅谈PHP封装CURL
2019/03/06 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
JS实现随机化快速排序的实例代码
2013/08/01 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
angular2+node.js express打包部署的实战
2017/07/27 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
使用Python的内建模块collections的教程
2015/04/28 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
SQL中where和having的区别
2012/06/17 面试题
家长对孩子的评语
2014/04/18 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server