Home > Developer > JavaScript
Use Browserify to load CommonJS browsers.
The node. js module is implemented based on CommonJS specifications. Can it be applied in the browser environment?
var math = require('math');math.add(2, 3);
The second line of math. add (2, 3) runs after the first line of require ('Math'). Therefore, the math. js load must be completed. That is to say, if the loading time is long, the whole application will stop there. This is not a problem on the server, because all modules are stored on the local hard disk and can be loaded synchronously. The wait time is the read time of the hard disk. However, for browsers, this is a big problem, because the modules are 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 the "false" status
A tool such as browserify can compile nodejs modules into available modules of the browser to solve the problems mentioned above. This topic describes Browserify in detail.
Implementation
Browserify is the most commonly used tool for format conversion of CommonJS.
Take an example. The B. js module loads the. js module.
// a.jsvar a = 100;module.exports.a = a;// b.jsvar result = require('./a');console.log(result.a);
If index.html directly references B. js, an error is reported, prompting that require is not defined.
//index.html<!DOCTYPE html>In this case, Browserify is required.
[Installation]
Run the following command to install browserify:
npm install -g browserify[Conversion]
Use the following command to convert B. js to the available browser format bb. js
$ browserify b.js > bb.jsView bb. js and browserify package the files a. js and B. js into bb. js so that they can run on the browser.
(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 references bb. js, And the console displays 100
//index.html<!DOCTYPE html>Principle
What did Browserify do? Install browser-unpack to understand the principle.
$ npm install browser-unpack -gThen, use the following command to unpackage the bb. js generated earlier
$ browser-unpack < bb.jsBrowerify puts all modules into an array. The id attribute is the module number, the source attribute is the module source code, and the deps attribute is the module dependency.
Because a. js is loaded in B. js, The deps attribute specifies that./a corresponds to Module 1. When you run the require ('./A') Statement, the browser automatically executes the source attribute of module 1 and outputs the value of the module. exports attribute after execution.
Browerify Packages a. js and B. js and generates bb. js. browser-unpack unpacks bb. js, which is a reverse process. But actually, bb. js still exists.
In the previous article, we used Browserify to load CommonJS browsers. This is all the content that I shared with you. I hope you can give us a reference and support for more.
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
