使用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本身的局限性 别让javascript做太多事
Mar 23 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
Angular实现的简单定时器功能示例
Dec 28 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
JS实现可控制的进度条
Mar 25 Javascript
vue+elementUI实现简单日历功能
Sep 24 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 分页类 扩展代码
2009/06/11 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
Git命令之分支详解
2021/03/02 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python实现2048小游戏
2015/03/30 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
json跨域调用python的方法详解
2017/01/11 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
判断单链表中是否存在环
2012/07/16 面试题
抄作业检讨书
2014/02/17 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
企业宣传语大全
2015/07/13 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript