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.

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>

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.$ = $;

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

标签： javascript backbone.js socket.io requirejs

1条回答

戒情不戒烟

2楼-- · 2019-09-11 15:12

Lots of errors.

You should not use the HTML window at all for this. You can put everything in the JS window.
You should not put .js extensions in paths.
There's no need to use fallbacks for the code you have the the values in paths should be strings rather than arrays.
You had typos in your URLs in paths.
This line var io = require('socket.io') cannot work. This is RequireJS, not CommonJS. Such a call could work inside a define call.
Backbone has not needed a shim for quite a while now. Your shim for it is useless.
You don't need to do Backbone.$ = $.
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.

0人赞添加讨论(0) 举报

Set up jsfiddle with requirejs, socketio, backbone

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间