利用浏览器功能实现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结果=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 dyscript src=' http : b . js '/script/body/html

此时，有必要使用浏览器功能

[安装]

使用以下命令安装浏览器

Npm安装-g浏览器[转换]

使用以下命令，您可以将b.js转换为浏览器可用的格式bb.js。

$ browserify b.js bb.js View bb.js，browserify将a.js和b.js两个文件打包为bb.js，使它们在浏览器端运行。

(函数e(t，n，r){函数s(o，u){if(！n[o]){if(！t[o]){ var a=type of require==' function ' require；if(！ua)返回a(o，0);如果我返回，我会！0);var f=新错误('找不到模块' ' o ' ')；throw f.code='MODULE_NOT_FOUND '，f } var l=n[o]={ export s : } }；t[o][0]。call(l.exports，function(e){ var n=t[o][1][e]；返回s(n？n:e)}，l，l.exports，e，t，n，r)}return n[o]。exports } var I=type of require==' function ' require；for(var o=0；或.长度；(o)s(r[o])；return s })({ 1:[函数(require，module，exports){ var a=100；module . exports . a=a；}，{}]，2:[函数(要求，模块，导出){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 dyscript src=' http : bb . js '/script/body/html

原则

Browserify到底做了什么？安装浏览器-打开包装了解原理

$ npm安装浏览器-解包-g然后，使用以下命令解包之前生成的bb.js

$ browser-unpack bb . js

可以看到，browerify将所有模块放入一个数组中，id属性是模块号，source属性是模块的源代码，deps属性是模块依赖项

因为b.js是用a.js加载的，所以deps属性指定。/a对应于模块1。执行时，当浏览器遇到require('。/a’)语句，它自动执行模块1的源属性，并输出执行的模块。导出属性值

Browerify将a.js和b.js打包，生成bb.js，browser-unpack将bb.js解包，这是一个反向的过程。但事实上，bb.js仍然存在

以上使用Browserify实现CommonJS的浏览器加载方法，都是边肖分享给大家的内容，希望能给大家一个参考和支持。