How JavaScript bundlers work

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
// `$` global variable available here
</script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="/js/foo.js"></script>
<script src="/js/bar.js"></script>
<script src="/js/foobar.js"></script>
<script>
// Here goes some code
</script>
<script>
var $ = require('jquery')
var foo = require('./js/foo')
var bar = require('./js/bar')
var foobar = require('./js/foobar')
</script>
// common code for implementing require()/exports
var dependencies = {} // loaded modules
var modules = {} // code of your dependencies
// require function
var require = function (module) {
if (!dependencies[module]) {
// module not loaded, let’s load it
var exports = {}
modules[module](exports)
// now in `exports` we have the things made “public”
dependencies[module] = exports
}
return dependencies[module]
}
// dependendencies
modules['jquery'] = function (exports) {
// code of jquery
}
modules['foo'] = function (exports) {
// code of bar.js
exports.helloWorld = function () {
console.log('hello world')
}
}
modules['bar'] = function (exports) {
// code of bar.js
}
// etc…// here goes the code of your "entry file".
// Which is the entry point of your code
// For example:
var $ = require('jquery')
var foo = require('foo')
var bar = require('bar')
foo.helloWorld()
require("!style!css!less!bootstrap/less/bootstrap.less");

--

--

Senior Full Stack Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store