我在一个多页项目上使用 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
优化器只是拒绝合作,抛出一个 Error: paths fallback not supported in optimizer。请为 underscore 提供构建配置路径覆盖
,即使 Underscore 没有指定 CDN。
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
文件的结构基于 this example
已更新!
我已经更新了问题以包含 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
}
最终更新(耶!它正在运行)
感谢下面的 Travis,一切正常! (文件正在缩小和连接)。由于他的解决方案托管在 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_helper.js
define(['jquery','underscore'],function($,_) {
...
});
2。它是 "empty:"
而不是 "empty"
虽然 RequireJS 文档提到了它们,但这是一个棘手的问题。
3。因为
什么样的列表只有 2 个要点?
Awesomelicious - 现在它就像一个魅力:)
最佳答案
看起来 requireJs 认为您正在尝试为下划线提供路径回退,因为您将其路径值指定为数组。尝试将其作为字符串来代替。
paths: {
underscore: 'underscore-amd.min'
}
另请注意 correct symbol for empty paths是 empty:
(带有 ':')不是 empty
。
最后,作为一个不相关的旁注,您可以随时查看 lodash恕我直言,这是一个更可定制、跨浏览器兼容、更快的下划线替换,具有相同的 API,它托管在 cdnjs 上并且符合 AMD
更新
跟进评论中的对话,这是我对您的项目的更新版本:https://dl.dropboxusercontent.com/u/21823728/so_rjs.tar.gz
如评论中所述,您的问题似乎是您在需要这些模块的同一个文件中定义
ing 模块,而且我认为这导致 r.js 相信这些模块没有主入口点。约定是将模块定义与需要这些模块的文件分开。
注意 assets/js
下现在有一个 app
文件夹.您的页面模块现在 require
这些模块。当我重新运行 r.js
(使用 uglify2 作为优化器)时,一切似乎都按预期工作。
此外,我从您的 build.js 文件中删除了一些冗余(您只需在您的 mainConfigFile 中指定 baseUrl,如果您也将其用于您的构建配置)。最后,您可能需要研究使用 shim config如果你想将 jQuery 和 Bootstrap 全局附加到每个页面。否则,您应该在需要时明确地将它们列为依赖项。
最后,作为最后一条建议,您可能希望减少每个文件中的 require
数量。对于这些页面中的大多数,您可以将所有内容包装在一个 require 调用中,然后将不同的逻辑分离到函数中,以节省事件队列上的一些空间以及一些不得不冗余调用 require
函数的周期。
关于javascript - RequireJS 不适用于具有 CDN 托管库 (jQuery) 的多页项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18155968/