Question

我正在开发我的第一个基于javascript的Web应用程序，并希望利用我一直在研究的一些不同的框架，但是我在使用正确加载所有不同库时遇到了很多麻烦。我正在尝试使用Backbone和Underscore以及Twitter Bootstrap中包含的javascript（我正在使用我的CSS / HTML脚手架）。这是我加载所有脚本的屠宰尝试，但我仍然遇到来自require.js的firebug错误

根据建议的答案，我编辑了我的设置。在我的index.html中：

<script data-main="../scripts/main.js" src="../scripts/require.js"></script>

在main.js中：

require.config({ 
    // Require is defined in /scripts, so just the remaining path (and no ext needed)
    'paths': {
        "bootstrap": "scripts/bootstrap",
        "jquery": "scripts/jquery",
        "underscore": "scripts/underscore",
        "backbone": "scripts/backbone"
},
'shim': 
{
    backbone: {
        'deps': ['jquery', 'underscore'],
        'exports': 'Backbone'
    },
    underscore: {
        'exports': '_'
    }
}   
}); 

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

    Person = Backbone.Model.extend({
        initialize: function () {
            alert("Welcome to this world");
        }
    });

    var person = new Person;

});

但我仍然从require.js获得指向此链接的脚本错误 http://requirejs.org/docs/errors.html#scripterror

Answer 1

一眼就看出它是RequireJS的设置，请看一下：https://github.com/jcreamer898/RequireJS-Backbone-Starter

您不需要在正文中定义脚本，这些脚本应该通过Require加载，如下所示：

您的主要index.html：

<script src="path/to/require.js"  data-main="scripts/app">

然后，data-main引用会指向类似/scripts/app.js的内容，其中包含以下内容：

require.config({ 
    // Require is defined in /scripts, so just the remaining path (and no ext needed)
    'paths': {
        "bootstrap": "libraries/bootstrap"
        "jquery": "libraries/jquery",
        "underscore": "libraries/underscore-min", 
        "backbone": "libraries/backbone-min"
    },
    'shim': 
    {
        backbone: {
            'deps': ['jquery', 'underscore'],
            'exports': 'Backbone'
        },
        underscore: {
            'exports': '_'
        }
    }   
    }); 

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

    // Start your application here...

});

Answer 2

使用RequireJS，<script />标记中应包含的唯一库是require.js。此外，您需要指定一个“主”javascript文件，该文件应由RequireJS加载：

<script data-main="scripts/main.js" src="scripts/require.js"></script>

然后主文件应该加载其他库：

requirejs(['jquery','backbone'], function ($,Backbone) {
    //...
});

我建议您仔细阅读RequireJS API documentation并按照示例进行操作。

Answer 3

没有人指出，也许你开始使用这么多组件（每个组件都有其要学习的概念），这是你第一次进行Javascript项目。在真正简单的项目中，我会尝试分别探索每个库，对它们有一些经验，当你清楚地了解它们的作用时（文档并不总是给它），你可以开始将它们全部组合起来。

可能不是你要找的答案，但这是我在这里谈论的经历。祝你好运！

使用主干，下划线，jquery，bootstrap等的Web应用程序

3 个答案: