Requirejs

bower.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "jquery": "~2.1.3",
     "bootstrap": "~3.3.2",
-    "underscore": "~1.8.2"
+    "underscore": "~1.8.2",
+    "requirejs": "~2.1.16"
   }
 }

index.html

@@ -58,9 +58,7 @@ <h2>generated command</h2>
                 <textarea id="result" class="form-control" rows="3"></textarea>
             </div>
         </div>
-        <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
-        <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
-        <script type="text/javascript" src="./bower_components/underscore/underscore-min.js"></script>
+        <script data-main="main" src="./bower_components/requirejs/require.js"></script>
         <script type="text/template" id="greeting-template">
             <li class="form-inline">
                 <input type="text" class="name form-control" placeholder="Text input" />
@@ -82,7 +80,5 @@ <h2>generated command</h2>
                 <button type="button" class="minous btn btn-default">-</button>
             </li>
         </script>
-
-        <script type="text/javascript" src="./app.js"></script>
     </body>
 </html>

main.js

@@ -0,0 +1,14 @@
+// This set's up the module paths for underscore and backbone
+require.config({ 
+    'paths': { 
+        "underscore": "bower_components/underscore/underscore-min",
+        "jquery": "bower_components/jquery/dist/jquery.min",
+        "bootstrap": "bower_components/bootstrap/dist/js/bootstrap.min"
+    }
+}); 
+
+require([
+    'underscore',
+    'jquery',
+    'app'
+]);