How does the bundle order work in the browser?

Question

I cannot understand the logic of how the browser links the necessary files. If i do it

require('./one/one.js');
require('./two/two.js');
require('./three/three.js');

This is displayed

(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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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 app = "app";

console.log(one);
},{}],2:[function(require,module,exports){
require('./one/one.js');
require('./two/two.js');
require('./three/three.js');
//require('./three/three_a/three_a.js');
require('./app.js');
},{"./app.js":1,"./one/one.js":3,"./three/three.js":4,"./two/two.js":5}],3:[function(require,module,exports){
var one = "one";
},{}],4:[function(require,module,exports){
var three = "three";
},{}],5:[function(require,module,exports){
var two = "two";
},{}]},{},[2])

As you can see, the “three” is the bundle before the “two,” but that is not the order in which I demanded them?

Answer 1

Looks like his alphabet. Maybe Browserify sorts them anyway, as it comes from the OS. It really doesn't make any difference - these are just module definitions. Your code inside these (require, module, exports)functions will always work regardless of the order in which the modules were defined.

Here is a simplified version of what Browserify does, which might be clearer:

var modules = {
  './app.js': function (require, module, exports) {
    require('./one/one.js');
    require('./two/two.js');
    require('./three/three.js');
  },
  './two/two.js': function (require, module, exports) {
    console.log('two');
  },
  './one/one.js': function (require, module, exports) {
    console.log('one');
  },
  './three/three.js': function (require, module, exports) {
    console.log('three');
  }
};

function require (path) {
  var module = {exports: {}};
  modules[path](require, module, module.exports);
  return module.exports;
}

require('./app.js');

, , :

one
two
three