具有骨干兼容性的requirejs答案

【问题标题】：requirejs with backbone compatibility具有骨干兼容性的requirejs
【发布时间】：2013-01-05 01:45:31
【问题描述】：

下面的设置是我可以让骨干与 requirejs 很好相处的唯一方法 - 有没有更清洁的方法？不必每次都指定整个主干路径？

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href='<c:url value="/resources/css/bootstrap.min.css"/>'
    rel="stylesheet" type="text/css" />
    <script data-main="resources/js/main.js" src="resources/js/lib/require.js"></script>

</head>
<body>
    <ul class="nav">
    <li ><a href="#home">Home</a></li>
    <li><a href="#rentals">Rentals</a>
    <li><a href="#films">Films</a></li>
</ul>
</body>
</html>

main.js

require.config({
    baseUrl : '/sakila/resources/js',
    paths : {
        jquery : 'lib/jquery-1.8.3.min',
        underscore : 'lib/underscore-min',
        jqueryui : 'lib/jquery-ui-1.9.2.custom.min'
    },
    shim : {
        '/sakila/resources/js/lib/backbone-min.js' : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    }
});
require([ 'router' ], function(Router) {
    Router.initialize();
});

路由器.js

define(['underscore','jquery','/sakila/resources/js/lib/backbone-min.js'],function(_,$,Backbone){
    var AppRouter = Backbone.Router.extend({
        routes : {
            'home' : 'home',
            'films' : 'films',
            'rentals' : 'rentals',
            '*actions' : 'home', // default action
            '':'home'
        },
        home:function(){
            console.log('Routed to home');
        },
        films:function(){
            console.log('Routed to films');
        },
        rentals:function(){
            console.log('Routed to rentals');
        },

    });
    initialize = function() {
        var app_router = new AppRouter();
        Backbone.history.start();
        console.log('history started');
    };
    return {initialize:initialize};

});

【问题讨论】：

对我来说，paths 别名与 shim 配置相结合可以正常工作。我记得在某些时候它可能会出现一些问题——你使用的是最新版本的 RequireJS 吗？
需要 2.1.2；您的路径中有什么以及随后如何指定主干依赖项？
@choci 我在他的回答中使用了与 Erich Healy 基本相同的配置并且它有效。我的require.js在根目录下，baseUrl:'./，否则是一样的，可以用。

标签： backbone.js requirejs amd

【解决方案1】：

您可以在 requirejs 配置的路径中为 Backbone 创建一个别名，并在您的 shims 中使用该别名。此外，您无需指定主干的完整路径，因为它尊重您配置中的 baseUrl 选项。

require.config({
    baseUrl : '/sakila/resources/js',
    paths : {
        jquery : 'lib/jquery-1.8.3.min',
        underscore : 'lib/underscore-min',
        jqueryui : 'lib/jquery-ui-1.9.2.custom.min',
        backbone : 'lib/backbone-min'
    },
    shim : {
        backbone : {
            deps : [ 'underscore', 'jquery' ],
            exports : 'Backbone'
        }
    }
});

然后在其他地方干净利落地使用它。

define(['underscore','jquery','backbone'],function(_,$,Backbone){

})

【讨论】：

【解决方案2】：

以下文章描述了如何将 Require.js 与 Backbone.js 一起使用。它涵盖了将 Backbone.js 与 Require.js 集成的 2 种不同方式，其中包括 shims 和 AMD 兼容的主干.js。

就个人而言，我更愿意使用 AMD 兼容版本的 Backbone.js 和 undescore.js。它使配置更简洁，并将并行加载模块。以下博客文章描述了此选项。

Re-Learning Backbone.js – Require.js and AMD

【讨论】：