如何在 zepto 中使用 requirejs

Posted 2023-02-22

【中文标题】如何在 zepto 中使用 requirejs

【英文标题】：How to use requirejs with zepto

【发布时间】：2012-11-05 17:21:04

【问题描述】：

我似乎无法让 zepto 与 requirejs 一起工作。

这是我的文件

main.js

require.config(
  paths: 
    zepto: 'libs/zepto/zepto.min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    cordova: 'libs/cordova/cordova-2.1.0',
    history: 'libs/history/history',
    historyZ: 'libs/history/history.adapter.zepto'
  ,
  shim: 
        zepto: 
          exports: '$'
        ,
        backbone: 
            deps: ['underscore', 'zepto']
        
);

require([

  // Load our app module and pass it to our definition function
  'app',
], function(App)
  // The "app" dependency is passed in as "App"
  App.initialize();
);

app.js

define([
  'zepto',
  'underscore',
  'backbone',
  'router' // Request router.js
], function($, _, Backbone, Router)
  var initialize = function()
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  

  return 
    initialize: initialize
  ;
);

路由器.js

define([
  'zepto',
  'underscore',
  'backbone',
  'views/dashboard'
], function($, _, Backbone, DashboardView)
  var AppRouter = Backbone.Router.extend(
    routes: 
      // Define some URL routes
        ''      : 'showDashboard',
    
  );

  var initialize = function()
    var app_router = new AppRouter;
    app_router.on('showDashboard', function()
        // We have no matching route, lets just log what the URL was
        //console.log('No route:', actions);
        var dashboardView = new DashboardView();
        dashboardView.render();
      );
    Backbone.history.start();
  ;
  return 
    initialize: initialize
  ;
);

你得到了图片..但是当我运行这一切时，我在 Chromes 控制台中得到了这个：

GET http://localhost/SBApp/www/js/jquery.js 404 (Not Found)         require.js:1824

和一个脚本错误（我在括号中加上了这不会让我发布。）

在带有 firebug 的 Firefox 中，它会吐出一个脚本错误

有没有人成功地用 require 配置了 zepto 并且可以给我一些帮助？

【问题讨论】：

你有没有 grep 你的库和源代码中提到“jquery”？任何库都会独立尝试包含它，这似乎非常奇怪。

我做到了，唯一引用 jQuery 的东西就是 require。我想当我尝试将 AMD 与它一起使用时，它会寻找它，我一直在环顾四周，发现尚不支持 Zepto 和 AMD？

【参考方案1】：

使用 requirejs 的 shim 功能。请参阅此answer。避免每次发生这种情况时都必须编辑库的源代码。此外，您不必记住每次将库更新到较新版本时都进行编辑。

添加此免责声明，因为@James Watkins 认为 SO 上的每个帖子都必须为他工作，否则它应该被否决：这个解决方案可能对你有用，也可能不适合你（特别是考虑到它是 3 年前写的!!!)

【讨论】：

这对我不起作用。尝试将导出设置为 Zepto 和 $，但在导入时均未定义。考虑用一个可行的例子来修改你的答案。

@JamesWatkins 我很欣赏评论和改进答案的建议。但是，您标记响应的形式很糟糕，因为它对您不起作用，或者没有有效的示例。显然，其他人发现它很有用，因为当你遇到它时它没有 0 分。我想知道您对 SO 的所有回复是否都有工作示例。或者如果杯子是半满的，对你来说它实际上是空的。

我试过了，没用。这是一个足够有效的理由来标记响应。我的评论解释了你可以如何改进。我在这里没有看到问题。

@jamesWatkins 酷。我为你修改了答案。

我只是想推广清晰实用的答案。如果您认为您的答案已过时且不再相关，则应考虑将其删除以避免将来造成混淆。这个网站是关于得到答案，而不是得到分数。

【参考方案2】：

Backbone 通常有一个 "define(["underscore","jquery","exports"],.." 在里面，应该只需要替换它。然后，我在末尾附加了以下 sn-p zepto.js。

// If `$` is not yet defined, point it to `Zepto`
window.Zepto = Zepto
'$' in window || (window.$ = Zepto)

if ( typeof define === "function" && define.amd ) 
  define( "zepto", [], function ()  return Zepto;  );

它似乎工作。如果你想让 jquery 作为备份，（这很脏）但我在 zepto.js 文件中将“zepto”定义为“jquery”，然后在 requirejs.config 中我做了这个......

requirejs.config(
  paths: 
      // Jquery should be zepto, probably a better way to do this...
      jquery: RegExp(" AppleWebKit/").test(navigator.userAgent) ? '/js/vendor/zepto' : '/js/vendor/jquery.min',
      underscore: '/js/vendor/underscore.min',
      backbone: '/js/vendor/backbone.min'
  
);

require(['jquery', 'underscore', 'backbone'], function($, _, Backbone) 
  // Stuff here...
);

但是通过这样做，我不必为 jquery 修改主干.js 定义文件，并且我引入了对 IE 的浏览器支持...

【讨论】：

第一部分帮了我很多，因为它让我想做什么，第二部分我没试过

是的，第二部分我不推荐。实际上，我不建议将 Zepto 与 Backbone 一起使用。现在有Backbone.native，我没有尝试过，但看起来更有希望用主干替换 jquery。

修改一个常用库文件的源代码？这是个坏主意。而且我不知道你在那个配置中做了什么，我永远不会推荐这个。

这是一个旧代码示例，当时我就是这样解决它的。我不会使用这些。

【参考方案3】：

您可以添加 'extend/zepto.js' 文件而不是修改 Zepto.js：

/**
 * extend Zepto
 */

define([
  'zepto'
], function() 

  "use strict";

  window.Zepto = Zepto
  // If `$` or `jQuery` is not yet defined, point them to `Zepto`
  '$' in window || (window.$ = Zepto)
  'jQuery' in window || (window.jQuery = Zepto)

  return Zepto;

);

然后将jquery路径设置为extend/zepto：

require.config(
  paths: 
    'jquery': 'extend/zepto'
  
)

【讨论】：

这是唯一对我有用的解决方案，无需修改源代码。谢谢！

【参考方案4】：

https://github.com/l-zhi/html5-backbone-boilerplate 你可以通过这个带有 webpack 的样板来使用它

resolve:  alias: 
     "jquery": 'xxx/zepto.js' // or jquery.js for PC
,