Home > Developer > Web Develop
The Nodejs module is based on the COMMONJS specification, can it be used in a browser environment?
var math = require (' math '); Math.add (2, 3);The second line, Math.add (2, 3), runs after the first line of require (' math '), so it must wait until the math.js load is complete. That is, if the load time is long, the entire application will stop there and so on. This is not a problem on the server side, because all the modules are stored on the local hard disk, can be loaded synchronously, waiting time is the hard disk read time. However, for the browser, this is a big problem, because the module is placed on the server side, the waiting time depends on the speed of the network, it may take a long time, the browser is in "Suspended animation" state
and browserify Such a tool, you can compile the Nodejs module into a browser available modules to solve the above mentioned problems. This article will cover the details of browserify
RealizeBrowserify is currently the most commonly used tool for COMMONJS format conversion.
Take a look at an example where the B.js module loads the A.js module
// A.js var a = += A; // B.js var result = require ('./a '); Console.log (RESULT.A);Index.html Direct Reference B.js will error, prompting require not defined
//index.html<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title></Head><Body><Scriptsrc= "B.js"></Script> </Body></HTML>
At this point, we're going to use browserify.
Installation
Install browserify using the following command
NPM install-g browserify
Convert
Using the following command, you can convert b.js to a browser-usable format bb.js
$ browserify b.js > Bb.js
View Bb.js,browserify Package The two files A.js and b.js as bb.js so that they can be run on the browser side
(functionE (t,n,r) {functionS (o,u) {if(!n[o]) {if(!t[o]) {varA=typeofrequire== "function" &&require;if(!u&&a)returnA (o,!0);if(i)returnI (o,!0);varf=NewError ("Cannot find module '" +o+ "'");ThrowF.code= "Module_not_found", F}varL=n[o]={exports:{}};t[o][0].call (L.exports,function(e) {varN=t[o][1][e];returnS (n?n:e)},l,l.exports,e,t,n,r)}returnN[o].exports}varI=typeofrequire== "function" &&require; for(varo=0;o<r.length;o++) s (R[o]);returns}) ({1:[function(require,module,exports) {varA = 100; MODULE.EXPORTS.A=a;},{}],1:xfunction(require,module,exports) {varresult = require ('./a ')); Console.log (RESULT.A);},{"./a": 1}]},{},[2]);
index.html reference Bb.js, console display 100
// index.html<! DOCTYPE html>PrincipleWhat the hell did browserify do? If you install Browser-unpack, you'll know the principle.
$ NPM Install Browser-unpack-gThen, use the following command to unpack the previously generated bb.js
$ Browser-unpack < Bb.jsAs you can see, browerify all modules into an array, the ID attribute is the module number, the Source property is the module's source code, and the Deps property is the module's dependency
Because the a.js is loaded inside the b.js, the Deps attribute is specified./a corresponds to module 1th. When executed, the browser encounters the require ('./a ') statement, automatically executes the Source property of module 1th and outputs the executed Module.exports property value
Browerify A.js and b.js packaging, and generating bb.js,browser-unpack will bb.js unpack, is a reverse process. But in fact, Bb.js still exists.
Using Browserify to implement COMMONJS browser loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
