开发者社区> 科技探索者> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

用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.jsvar a = 100;
module.exports.a = a;// b.jsvar 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依然存在

本文转自帅气的头头博客51CTO博客,原文链接http://blog.51cto.com/12902932/1925704如需转载请自行联系原作者


sshpp

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
浏览器中的 ESM
早期的web应用非常简单,可以直接加载js的形式去实现。随着需求的越来越多,应用越做越大,需要模块化去管理项目中的js、css、图片等资源。
0 0
js:在浏览器中使用原生的 ESM
js:在浏览器中使用原生的 ESM
0 0
Nightwatch.js – 轻松实现浏览器的自动测试
Nightwatch.js 是一个易于使用的,基于 Node.js 平台的浏览器自动化测试解决方案。它使用强大的 Selenium WebDriver API 来在 DOM 元素上执行命令和断言。 语法简单但很强大,使您可以快速编写测试。 只需使用 Javascript 和 CSS 选择器,不需要初始化其他对象和类,您只需要编写测试规范。内置命令行测试运行器,使您能够运行整体测试,分组测试或者单个测试。
0 0
C# 用XiliumCefGlue做浏览器,JS和C#相互调用
原文:C# 用XiliumCefGlue做浏览器,JS和C#相互调用 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.
1689 0
chrome插件远程加载js
chrome插件将js直接注入页面有两种方式,一种是通过Manifest文件中指定js文件,一种是通过chrome.tab.executeScript方式注入。具体可以参考这个官方文档。 由于各种需求,需要将部分js从后端服务器中进行加载。所以只能通过tab.executeScript的方式。具体
4276 0
chrome系列-扩展程序开发学习-js内嵌
需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
利用编译将 Vue 组件转成 React 组件
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载