使用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实现动态添加新元素、删除元素方法 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 详解JavaScript的内存空间、赋值和深浅拷贝

    详解JavaScript的内存空间、赋值和深浅拷贝

    这篇文章主要介绍了JavaScript的内存空间、赋值和深浅拷贝,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • JavaScript Window浏览器对象模型方法与属性汇总

    JavaScript Window浏览器对象模型方法与属性汇总

    本文给大家汇总分享的是JavaScript Window浏览器对象模型方法与属性,十分的细致全面,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • javascript 获取url参数和script标签中获取url参数函数代码

    javascript 获取url参数和script标签中获取url参数函数代码

    不要在方法中调用方法,否则可能始终获取的是最后一个js的文件的参数,要在方法中使用,请先用变量保存,在方法中直接获取
    2010-01-01
  • JS字符串false转boolean的方法(推荐)

    JS字符串false转boolean的方法(推荐)

    下面小编就为大家带来一篇JS字符串false转boolean的方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JavaScript如何获取到导航条中HTTP信息

    JavaScript如何获取到导航条中HTTP信息

    这篇文章主要为大家详细介绍了JavaScript如何获取到导航条中HTTP信息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • BootStrap3学习笔记(一)之网格系统

    BootStrap3学习笔记(一)之网格系统

    本文给大家介绍BootStrap3网格系统的相关知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • js的新生代垃圾回收知识点总结

    js的新生代垃圾回收知识点总结

    在本篇文章里小编给大家整理的是关于js的新生代垃圾回收的相关知识点内容,有需要的朋友们可以参考学习下。
    2019-08-08
  • 微信小程序npm引入vant-weapp的踩坑记录

    微信小程序npm引入vant-weapp的踩坑记录

    这篇文章主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 详解javaScript中Number数字类型的使用

    详解javaScript中Number数字类型的使用

    Number和Math都属于JavaScript中的内置对象,Number数字类型作为基础数据类型,我们在开发过程中会经常用到,包括数字精度的格式化,还有字符串转换成数字等操作。本文将详细讲解其用法,感兴趣的可以了解一下
    2022-04-04

最新评论