使用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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
JS中的phototype详解
Feb 04 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
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循环输出数据库内容的代码
2008/05/24 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
智乐游戏测试笔试题
2014/05/21 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
护士辞职信范文
2014/01/19 职场文书
教师绩效工资方案
2014/02/01 职场文书
Python简易开发之制作计算器
2022/04/28 Python
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers