RequireJS没有'我使用CDN托管库(jQuery)进行多页项目
RequireJS doesn't work on a multipage project with CDN hosted libraries (jQuery)
我在一个多页项目中使用RequireJS,其Javascript文件夹结构看起来有点像这样(如何在Markdown中再次制作那些花哨的目录树?):
common.js
lib/
-- jquery-1.9.1.min.js
-- modernizr-2.6.2.min.js
-- underscore-amd.min.js
page/
-- index.js
-- start.js
-- checkout.js
无论如何,common.js
是我的主脚本文件,它是我设置配置参数的地方。这就是它的样子:
common.js文件
// Configure RequireJS
requirejs.config({
baseUrl: "assets/js/lib",
paths: {
page: '../page',
jquery: [
'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
//If the CDN location fails, load from this location
'jquery-1.9.1.min'
],
modernizr: [
'//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min',
//If the CDN location fails, load from this location
'modernizr-2.6.2.min'
],
underscore: [
'underscore-amd.min'
]
}
});
所有页面调用都按预期工作(加载CDN位置),但我无法理解缩小部分。r.js
优化器只是拒绝合作,即使Undercore没有指定CDN,也会抛出Error: paths fallback not supported in optimizer. Please provide a build config path override for underscore
。
build.js文件
{
appDir: '../www',
baseUrl: 'js/lib',
dir: '../www-built',
mainConfigFile: '../www/assets/js/common.js',
modules: [
//First set up the common build layer.
{
//module names are relative to baseUrl
name: '../common',
include: ['jquery',
'modernizr',
'underscore'
]
},
// Now the page scripts
{
//module names are relative to baseUrl/paths config
name: '../page-index',
include: ['page/index'],
exclude: ['../common']
},
],
paths: {
jquery: "empty",
modernizr: "empty"
},
optimize: "uglify2",
removeCombined: true
}
请帮我弄清楚如何构建这个项目来创建common.js
脚本以及各个页面脚本。
(注意:我的build.js
文件的结构基于这个示例
更新
我已经更新了这个问题,以包含empty:
的正确语法(感谢Travis!),现在构建运行时没有出现错误。然而,我的JS文件并没有被连接或放大。CSS文件在导入点,所以发生了一些事情。完成下面的build.js
文件(请原谅,但她个子很高):
{
appDir: '../www',
baseUrl: 'assets/js', // relative to appDir
dir: '../www-built',
mainConfigFile: '../www/assets/js/common.js',
modules: [
//First set up the common build layer.
{
//module names are relative to baseUrl
name: 'common',
//List common dependencies here. Only need to list
//top level dependencies, "include" will find
//nested dependencies.
include: ['jquery',
'modernizr',
'underscore',
'bootstrap'
]
},
//Now set up a build layer for each page, but exclude
//the common one. "exclude" will exclude nested
//the nested, built dependencies from "common". Any
//"exclude" that includes built modules should be
//listed before the build layer that wants to exclude it.
//"include" the appropriate "app/main*" module since by default
//it will not get added to the build since it is loaded by a nested
//require in the page*.js files.
{
//module names are relative to baseUrl/paths config
name: 'pages/home',
include: ['pages/home'],
exclude: ['common']
},
{
//module names are relative to baseUrl/paths config
name: 'pages/start',
include: ['pages/start'],
exclude: ['common']
},
{
//module names are relative to baseUrl/paths config
name: 'pages/checkout',
include: ['pages/checkout'],
exclude: ['common']
},
],
paths: {
jquery: "empty:",
modernizr: "empty:"
// underscore: "empty:"
},
optimize: "uglify2",
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false
}
最终更新(耶!正在运行)
多亏了下面的特拉维斯,一切都很顺利!(文件正在缩小并连接)。由于他的解决方案托管在Dropbox上,将来可能会丢失(谁知道amirite?),我只总结一下他所做的修复:
1.不要将define
和require
调用混合在一个文件中
我有几个文件,我把它们混合在一起:
page/start.js
define(['jquery','underscore'],function($,_) {
...
});
require(['jquery','page/start'], function($, Y) { // BAD!
...
});
解决办法是这样做:
page/start.js
require(['jquery','app/start_helper'], function($, Y) {
...
});
app/start_help.js
define(['jquery','underscore'],function($,_) {
...
});
2.是"empty:"
而不是"empty"
这是一个棘手的问题,尽管RequireJS文档提到了它们。
3.因为
什么样的列表只有2个要点?
真棒-现在它像一个魅力:)
看起来requireJs认为您试图为下划线提供路径回退,因为您将其路径值指定为数组。试着把它当作一个字符串。
paths: {
underscore: 'underscore-amd.min'
}
还要注意,空路径的正确符号是empty:
(带":"),而不是empty
。
最后,作为一个无关的旁注,你总是可以看看lodash,它是IMHO,一个更可定制、跨浏览器兼容、更快的下划线替换为相同的API,它托管在cdnjs上,是AMD兼容的
更新
根据评论中的对话,以下是我对您项目的更新版本:https://dl.dropboxusercontent.com/u/21823728/so_rjs.tar.gz
正如评论中提到的,您的问题似乎是,您在需要这些模块的同一文件中使用define
模块,我认为这导致r.js认为这些模块没有主入口。惯例是将模块定义从需要这些模块的文件中分离出来。
请注意,现在assets/js
下有一个app
文件夹,其中存储了页面模块中曾经是define
d的每个模块。您的页面模块现在是require
中的这些模块。当我重新运行r.js
(使用uglify2作为优化器)时,一切似乎都如预期的那样工作。
此外,我从你的build.js文件中删除了一些冗余(如果你的构建配置也使用baseUrl,你只需要在mainConfigFile中指定baseUrl)。最后,如果您想将jQuery和Bootstrap全局地附加到每个页面,您可能需要考虑使用填充程序配置。否则,您应该在需要时将它们明确列为依赖项。
最后,作为最后一条建议,您可能希望减少每个文件中require
的数量。对于大多数页面,您可以将所有内容封装在一个require调用中,然后将不同的逻辑分离为函数,以节省事件队列上的一些空间,以及必须冗余调用require
函数的一些周期。
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 学生搜索项目jquery/javascript
- 无法在jquery中向上或向下移动列表中的多个项目
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- JQuery和Javascript没有'在我的项目中不起作用,但在网络上起作用
- jQuery:根据select选项中的每页项目进行分页
- 我在页面中使用的jQuery UI可排序项目;不起作用
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- jQuery无限循环,动画化许多项目
- 如何让li项目在这个jQuery列表中滑动和/或淡出视图
- 根据jQuery针对特定项目
- 在此项目中使用jQuery或JavaScript中的选择器
- jquery ias插件不适用于我的网站,加载更多项目不起作用
- 为图像滑块jquery添加项目符号功能
- 第一个jquery项目-在函数中使用处理程序来模块化它们
- 第一个JQuery项目..有点卡住了
- 如何检查PHP和jquery项目中代码重定向的位置
- 将我的Jquery项目更改为纯javascript
- JQuery项目.视图中的ID