JavaScript Bundling Issues When Using Unfinished Closures
We all know it’s a good idea to bundle JavaScript files into as few script includes as possible to minimize HTTP request. And – we all know you should write your code inside closures, to avoid the biggest problem of JavaScript: its dependence on global variables! But what happens when those two things don’t work together? For me, they didn’t play nice with each other today. Whenever I bundled my JavaScript files i got an Uncaught TypeError: undefined is not a function. Consider this code: /****** a-file.js ******/ !function($) { // Code here }(window.jQuery) /****** another-file.js ******/ (function ($) { $(“#hello”).text(“World!”); })(window.jQuery); The error occurred on the first line, inside the closure in another-file.js. Take a look at this jsFiddle. Since the result of the first closure is true, the above code will evaluate as this: /****** a-file.js ******/ true /****** another-file.js ******/ (function … Continued