3

我努力了几天才弄清楚这一点，但今天我终于需要你的帮助了。
我的回购：https ://github.com/seoyoochan/bitsnut-web

我想要实现的目标：
- 加载和优化 r.js - 为 RequireJS 和 r.js 编写 bower 任务：
   任务是：为 RequireJS 缩小 & uglify & 连接，并在生产中使用 r.js 进行优化
- 如何排除 js 脚本标签在index.html何时使用wiredep任务并通过 RequireJS 加载器加载它们？

我使用 Yeoman 'Webapp' 生成器并生成了脚手架应用程序。

我bower install 通过bower.json删除dependencies并仅保留"requirejs": "~2.1.16"在dependencies. （devDependencies为空）

因为我用[2][grunt-wiredep]，一切都是自动加载bower_components进去index.html的。我修改.bowerrc为将依赖项存储在app/scripts/vendor.

但是，问题是我不知道如何通过 ReuqireJS 成功加载它们，而不是将供应商作为脚本标签加载到index.html. 我必须为RequireJS和r.js编写一些任务，但不知道如何实现这个目标（grunt-contrib-requirejs虽然我安装了）

我想按照第 4 种方法r.js在https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module使用。但我遇到的问题是 RequireJS 的文档确实建议不要使用named module, 但是anonymous module. 我想听听关于我应该如何处理的各种意见。

非常感谢您提前提供的帮助！

4

1 回答 1

8

您在此处和此处手动加载脚本，从而使整个点requireJS毫无用处。main您还首先在此处加载config.js#L49。

相反，您应该只在 index.html 中有这一行

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

并使用和加载该文件中的所有依赖项（就像main使用. 正如您设置的那样，将值设置为全局变量，函数可以为空。这是一个示例：define()require()exports

define([
    "jquery",
    "underscore", 
    "backbone",
    "marionette",         
    "modernizr"
], function () {
        require([
        "backbone.babysitter", 
        "backbone.wreqr", 
        "text", 
        "semantic"
    ], function () {
        /* plugins ready */
    });

    define(["main"], function (App) {
           App.start();
    });
});

这也与您的属性文件夹（http://requirejs.org/docs/api.html#jsfiles）baseUrl的目录相同：data-main

RequireJS 加载所有与 baseUrl 相关的代码。baseUrl 通常设置为与用于为页面加载的顶级脚本的 data-main 属性中的脚本相同的目录。data-main 属性是一个特殊的属性，require.js 将检查它以开始脚本加载。

所以我认为你的baseUrlinconfig.js指向scripts/scripts/不存在的文件夹。相反，它可以/应该是vendor/（并从所有声明中删除供应商部分）或只是留空。

您wiredep可以尝试使用https://github.com/yeoman/grunt-bower-requirejs而不是7 )wiredepbower/requirejs

您的 repo 不包括 dist 文件夹jQuery，但除此之外，这是一个工作示例：http config.js: //jsfiddle.net/petetnt/z6Levh6r/

至于模块定义，它应该是

require(["dependency1", "dependency2"])

并且模块应该返回自己。当前，您的main文件将自身设置为依赖项

require(["main", "backbone", "marionette"], function(App, Backbone, Marionette){

由于您已经将backboneand设置marionette为全局变量exports，因此您可以再次将函数属性设置为空，因此您的主文件应如下所示：

require(["backbone", "marionette"], function(){
  "use strict";
  var App = new Backbone.Marionette.Application();

  App.addInitializer(function(){
    console.log("hello world!");
    Backbone.history.start();
  });

  return App;
});

并且由于您已经使用define加载main，请不要require再这样做了。相反，只需在函数App.start()内部define调用。

https://jsfiddle.net/66brptd2/ (config.js)

于 2015-03-28T13:43:35.390 回答