前面的话

　　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了

【安装】

　　使用下列命令安装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到底做了什么？安装一下browser-unpack，就能清楚原理了

$ npm install browser-unpack -g

　　然后，使用下列命令，将前面生成的bb.js解包

$ browser-unpack < bb.js

　　可以看到，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的浏览器加载的更多相关文章

  1. 浏览器加载 CommonJS 模块的原理与实现

    就在这个周末,npm 超过了 cpan ,成为地球上最大的软件模块仓库. npm 的模块都是 JavaScript 语言写的,但浏览器用不了,因为不支持 CommonJS 格式.要想让浏览器用上这些模 ...

  2. 浏览器加载 CommonJS 模块的原理与实现 （阮一峰大哥的 http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html）

    就在这个周末,npm 超过了 cpan ,成为地球上最大的软件模块仓库. npm 的模块都是 JavaScript 语言写的,但浏览器用不了,因为不支持 CommonJS 格式.要想让浏览器用上这些模 ...

  3. 浏览器加载和渲染HTML的过程（标准定义的过程以及现代浏览器的优化）

    先看一下标准定义的浏览器渲染过程(网上找的): 浏览器打开网页的过程 用户第一次访问网址,浏览器向服务器发出请求,服务器返回html文件: 浏览器开始载入html代码,发现 head 标签内有一个 l ...

  4. 【前端】CommonJS的模块加载机制

    CommonJS的模块加载机制 CommonJS模块的加载机制是,输入的是被输出的值的拷贝.也就是说,一旦输出一个值,模块内部的变化就影响不到这个值. 例如: // lib.js var counte ...

  5. 浏览器加载和渲染html的顺序

    前阵子,在组内给大家做了一次关于“浏览器加载和渲染HTML的顺序”的分享,这里再总结一下吧. AD:干货来了,不要等!WOT2015 北京站演讲PPT开放下载! 1.浏览器加载和渲染html的顺序 浏 ...

  6. webclient 比浏览器加载页面慢的一个问题

    测试中发现webclient 比浏览器加载页面慢的一个问题:原因WebClient 支持 gzip, deflate,但是未设置 解决方案: class WebClientEx : WebClient ...

  7. 浏览器加载和渲染html的顺序-css渲染效率的探究

    1.浏览器加载和渲染html的顺序1.IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的.2.在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都 ...

  8. 浏览器加载和渲染html的顺序（html/css/js）

    最近在学习前端的技术,把html.js.css的基础知识看了看.感觉越看越觉得前端并不比后端容易,技术含量还是相当大的.今天突然想弄明白浏览器到底是怎么加载和渲染html的?html中的DOM.js文 ...

  9. Windows -- 从注册表删除IE浏览器加载项

    Windows -- 从注册表删除IE浏览器加载项 1.  一部分加载项从注册表以下位置直接删除 2.  一部分扩展项从注册表以下位置直接删除

随机推荐

  1. 第一章：shiro简介

    1.1 简介 Apache Shiro是java的一个安全框架,相当简单,没有Spring Security功能强大,但是实际工作中大多使用shiro就够了.可以帮助我们完成:认证,授权,加密,会话管 ...

  2. git工具使用方法及常用命令

    git下载地址:https://git-for-windows.github.io/git环境变量配置:增加:GIT_HOME = C:\Git (文件夹为git软件的安装文件夹)Path添加: %G ...

  3. C语言::模拟实现strlen函数

    题目要求 编写一个C语言程序模拟实现strlen函数. 算法 strlen函数功能是计算字符串中字符的个数.(除\0外) 而字符串本身就是一个字符数组,只不过末尾以\0结束. 因此,我们只需遍历除\0 ...

  4. OpenCV局部变形算法探究

    OpenCV是跨平台的强大的计算机视觉识别和图像处理的开源库,可以利用他来实现:模式识别.构建神经网络.深度学习,总之用途多多,入门级就先做一下图像处理吧! 基本的图像处理算法(图像灰阶化.二值化.仿 ...

  5. Struts2的类型转换（上）

    传统的类型转换.(略) Struts2中提供了内置的基本的类型转换器,可以实现基本类型的自动转换,包括: Integer, Float, Double, Decimal Date and Dateti ...

  6. POPTEST学员就业面试题目！！！！！

    POPTEST学员就业面试题目!!!!!   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.(欢迎大家咨询软件测试工程师就业培训 ...

  7. ElasticSearch Index API && Mapping

    ElasticSearch  NEST Client 操作Index var indexName="twitter"; var deleteIndexResponse = clie ...

  8. Java中常用来处理时间的三个类:Date、Calendar、SimpleDateFormate，以及Java中的单例设计模式：懒汉式、饿汉式以及静态内部类式

    (一)java.util.Date类 1.该类有一个long类型的属性:用来存放时间,是用毫秒数的形式表示,开始的日期是从1970年1月1号 00:00:00.    2.该类的很多方法都已经过时,不 ...

  9. 将linux的HOME目录下的文件夹名字改回英文

    为了使用起来方便,装了Ubuntu中文版,自然在home文件里用户目录的“桌面”.“图片”.“视频”.“音乐”……都是中文的.很多时候都喜欢在桌面上放一些要操作的文件,linux里命令行操作又多,难免 ...

  10. 安装hadoop2.7.3

    hadoop3与hadoop2.x的变化很大,hadoop3很多东西现在做起来太麻烦了,这里先安装hadoop2.7.3 此贴学习地址http://www.yiibai.com/t/mapreduce ...