我在一个多页项目中使用 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. Please provide a build config path override for underscore
即使 Underscore 没有指定 CDN,也会抛出一个。
构建.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
我有几个文件,我像这样混合它们:
页面/start.js
define(['jquery','underscore'],function($,_) {
...
});
require(['jquery','page/start'], function($, Y) { // BAD!
...
});
解决方法是这样做:
页面/start.js
require(['jquery','app/start_helper'], function($, Y) {
...
});
应用程序/start_helper.js
define(['jquery','underscore'],function($,_) {
...
});
2."empty:"
不是"empty"
这是一个棘手的问题,尽管 RequireJS 文档提到了它们。
3. 因为
什么样的列表只有 2 个要点?
Awesomelicious - 现在它就像一个魅力:)