Search code examples
javascriptbackbone.jssocket.iorequirejs

Set up jsfiddle with requirejs, socketio, backbone

I've spent more than half a day trying to set up a requirejs, socket.io, backbonejs fiddle so as to solve another SO question.

Here is what I tried. You may checkout my fiddle I tried a couple ways without any luck.

  1. I've loaded the scripts in the head like this.

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.js"></script>
    <script>
    requirejs.config({
   paths: {
     'socket.io': ['https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.js'],
     'jquery': ['https//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'],
     'underscore': ['https//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'],
     'backbone': ['https//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js']
   },
   shim: {
     'backbone': ['underscore']
   },
   waitSeconds: 3
 });
    </script>
  </head>

  <body>
    <div id='page'>
      <div id='incomingChatMessages'>

      </div>
    </div>
  </body>
</html>

  1. Here is how I tried to load the scripts in the js component otherwise

    requirejs.config({
 paths: {
 'socket.io': ['https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.js'],
 'jquery': ['https//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'],
 'underscore': ['https//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'],
 'backbone': ['https//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js']
 },
 shim: {
   'backbone': ['underscore']
 },
 waitSeconds: 3
 }); 

 var io = require('socket.io')
 var $, Backbone;
 require(['jquery', 'underscore', 'backbone'], function(jq, us, bb) {
   $ = jq;
   Backbone = bb;
 });
 Backbone.$ = $;

  2. here is a link by someone who is loading jquery using requirejs in a jsfiddle but that only addresses my problem partially

Solution

  • Lots of errors.

    1. You should not use the HTML window at all for this. You can put everything in the JS window.

    2. You should not put .js extensions in paths.

    3. There's no need to use fallbacks for the code you have the the values in paths should be strings rather than arrays.

    4. You had typos in your URLs in paths.

    5. This line var io = require('socket.io') cannot work. This is RequireJS, not CommonJS. Such a call could work inside a define call.

    6. Backbone has not needed a shim for quite a while now. Your shim for it is useless.

    7. You don't need to do Backbone.$ = $.

    8. For historical reasons both jQuery and Backbone leak themselves into the global space. So you don't have to do this manually.

    Here's the cleaned up JS:

    requirejs.config({
   paths: {
     'socket.io': 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io',
     'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min',
     'underscore': 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min',
     'backbone': 'https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min'
   },
   waitSeconds: 3
});


require(['jquery', 'underscore', 'backbone', 'socket.io'], function(jq, us, bb, io) {
  console.log($, Backbone.$, Backbone);
});

    Note how the console.log relies on $ and Backbone being in the global space.

    And a fork of your fiddle.