我花了几天时间才弄清楚这一点,但今天终于需要你的帮助了。
我的回购:https://github.com/seoyoochan/bitsnut-web
我想要实现的目标:
- 加载和优化 r.js - 为 RequireJS 和 r.js 编写 bower 任务:
任务是:缩小和丑化和连接RequireJS,并在生产
中使用r.js进行优化 - 使用wiredep
任务时如何排除index.html
中的js脚本标签,并通过RequireJS加载器加载它们?
我使用 Yeoman "Webapp"生成器并生成了脚手架应用程序。
我通过bower install
安装了骨干、木偶、文本、下划线等我通过删除dependencies
修改了bower.json
,只留下"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 种方法在 https://github.com/jrburke/requirejs/wiki/Patterns-for-separating-config-from-the-main-module 使用 r.js
,但我遇到的问题是 RequireJS 的文档确实建议不使用 named module
,而是anonymous module
。我想听听关于我应该如何处理的各种意见。
我非常感谢您的帮助!
你在这里和这里手动加载脚本,使requireJS
的全部意义变得无用。您还首先在此处加载main
配置.js#L49。
相反,索引中应仅包含此行.html
<script data-main="scripts/config" src="scripts/vendor/requirejs/require.js"></script>
并使用 define()
和 require()
将所有依赖项加载到该文件中(就像处理 main
一样(。由于您设置了 exports
,它将值设置为全局变量,因此函数可以为空。下面是一个示例:
define([
"jquery",
"underscore",
"backbone",
"marionette",
"modernizr"
], function () {
require([
"backbone.babysitter",
"backbone.wreqr",
"text",
"semantic"
], function () {
/* plugins ready */
});
define(["main"], function (App) {
App.start();
});
});
此外,baseUrl
与data-main
属性文件夹 (http://requirejs.org/docs/api.html#jsfiles( 的目录相同:
RequireJS 加载与 baseURL 相关的所有代码。baseUrl 是 通常设置为与数据主中使用的脚本相同的目录 要为页面加载的顶级脚本的属性。数据主 属性是一个特殊属性,需要.js将检查才能启动 脚本加载。
所以我认为您在config.js
中的baseUrl
指向不存在scripts/scripts/
文件夹。它可以/应该vendor/
(并从所有声明中删除供应商部分(或留空。
您可以尝试使用与wiredep
类似但专门针对bower/requirejs
应用程序执行类似操作的 https://github.com/yeoman/grunt-bower-requirejs 而不是wiredep
(请参阅:https://github.com/stephenplusplus/grunt-wiredep/issues/7(
您的存储库不包含 jQuery
的 dist 文件夹,但除此之外,这里是config.js
的工作示例: http://jsfiddle.net/petetnt/z6Levh6r/
至于模块定义,应该是
require(["dependency1", "dependency2"])
并且模块应该返回自身。目前,您的main
文件将自身设置为依赖项
require(["main", "backbone", "marionette"], function(App, Backbone, Marionette){
由于您已经使用 exports
将backbone
和marionette
设置为全局变量,因此您可以再次将函数属性设置为空,因此您的主文件应如下所示:
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
它。而只需在define
函数中调用App.start()
。
https://jsfiddle.net/66brptd2/(配置.js(