脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → browserify commonjs

使用Browserify来实现CommonJS的浏览器加载方法

 更新时间：2017年05月14日 11:25:49   投稿：jingxian  
下面小编就为大家带来一篇使用Browserify来实现CommonJS的浏览器加载方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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的浏览器加载方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS监听事件的叠加和移除功能

    JS监听事件的叠加和移除功能

    这篇文章主要介绍了JS监听事件的叠加和移除功能，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-11-11
  • webpack 开发和生产并行设置的方法

    webpack 开发和生产并行设置的方法

    这篇文章主要介绍了webpack 开发和生产并行设置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 如何在JavaScript实现Blob文件流下载

    如何在JavaScript实现Blob文件流下载

    在JavaScript中可以使用浏览器提供的Blob对象和URL.createObjectURL()方法来实现文件流下载,这篇文章主要给大家介绍了关于如何在JavaScript实现Blob文件流下载的相关资料,需要的朋友可以参考下
    2024-05-05
  • jQuery 实现倒计时天,时,分,秒功能

    jQuery 实现倒计时天,时,分,秒功能

    本文通过html代码和js代码给大家介绍了实现倒计时天,时,分,秒功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-07-07
  • 最短的IE判断代码

    最短的IE判断代码

    以前最短的IE判定借助于IE不支持垂直制表符的特性搞出来的。
    2011-03-03
  • Spring mvc 接收json对象

    Spring mvc 接收json对象

    这篇文章主要介绍了Spring mvc 接收json数据的相关资料,需要的朋友可以参考下
    2015-12-12
  • JavaScript中isPrototypeOf函数作用和使用实例

    JavaScript中isPrototypeOf函数作用和使用实例

    这篇文章主要介绍了JavaScript中isPrototypeOf函数作用和使用实例,本文讲解了它的作用和使用方法以及使用实例,需要的朋友可以参考下
    2015-06-06
  • 详解JavaScript中的执行上下文及调用堆栈

    详解JavaScript中的执行上下文及调用堆栈

    这篇文章主要介绍了JavaScript中的执行上下文及调用堆栈，对此感兴趣的同学，可以参考下
    2021-04-04
  • 一道常被人轻视的web前端常见面试题(JS)

    一道常被人轻视的web前端常见面试题(JS)

    面试题是招聘公司和开发者都非常关心的话题，公司希望通过它了解开发者的真实水平和细节处理能力，而开发者希望能够最大程度地展示自己的水平（甚至超常发挥）。本文提供了众多前端开发面试题，无论是招聘方还是应聘方都值得一看
    2016-02-02
  • JS获取键盘上任意按键的值(实例代码)

    JS获取键盘上任意按键的值(实例代码)

    JS获取键盘上任意按键值的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11

最新评论