使用 requirejs、socketio、backbone 设置 jsfiddle

Question

我花了半天多的时间试图设置一个requirejs，socket.io，backbonejs fiddle来解决另一个SO问题.

这是我试过的。你可以查看我的 fiddle 我尝试了几种方法但没有任何运气。

我已经像这样在头中加载了脚本。

  <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>

以下是我尝试在 js 组件中加载脚本的方式

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

这是一个 link 正在加载 jquery 在 jsfiddle 中使用 requirejs 的人，但这只能部分解决我的问题

Answer 1

很多错误。

您根本不应该为此使用 HTML window。你可以把所有东西都放在 JS window.
您不应在路径中放置 .js 扩展名。
没有必要为您拥有的代码使用后备 paths 中的值应该是字符串而不是数组。
您在 paths 中的网址中有拼写错误。
这条线var io = require('socket.io')不能工作。这是 RequireJS，不是 CommonJS。这样的调用可以在 define 调用中工作。
Backbone 已经有一段时间不需要 shim 了。你的shim没用
你不需要做Backbone.$ = $。
由于历史原因，jQuery 和 Backbone 都将自己泄漏到全局 space 中。所以您不必手动执行此操作。

这是清理后的 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);
});

请注意 console.log 如何依赖 $ 和 Backbone 在全局 space.

中

还有一个 fork 你的 fiddle。

使用 requirejs、socketio、backbone 设置 jsfiddle

Set up jsfiddle with requirejs, socketio, backbone

javascript

requirejs

backbone.js

socket.io