使用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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
jquery 图片上传按比例预览插件集合
May 28 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
vue component 中引入less文件报错 Module build failed
Apr 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中的时间显示
2007/01/18 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
农历与西历对照
2006/09/06 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
保护环境倡议书300字
2014/05/19 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
园林系毕业生求职信
2014/06/23 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
2014年共青团工作总结
2014/12/10 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
运动会致辞稿
2015/07/29 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle