Requirejs r、 带文本文件的js
我有一个项目正在使用require.js。我正在使用r.js优化资源,但是当我设置inlineText:true时,我无法使它工作 为了使用r.js进行测试,我有以下目录树Requirejs r、 带文本文件的js,requirejs,r.js,Requirejs,R.js,我有一个项目正在使用require.js。我正在使用r.js优化资源,但是当我设置inlineText:true时,我无法使它工作 为了使用r.js进行测试,我有以下目录树 └── uncompiled ├── js │ ├── bookmarklet │ ├── collections │ ├── libs │ │ ├── backbone │ │ ├── jquery │ │ ├── jquery.f
└── uncompiled
├── js
│ ├── bookmarklet
│ ├── collections
│ ├── libs
│ │ ├── backbone
│ │ ├── jquery
│ │ ├── jquery.fileupload
│ │ ├── jquery.iframe-transport
│ │ ├── jquery.jscrollpane
│ │ ├── jquery.mousewheel
│ │ ├── jquery.scrolltofixed
│ │ ├── jquery.simple-dialog
│ │ ├── jquery.tag-it
│ │ ├── jquery.timeago
│ │ ├── jquery.ui
│ │ ├── modernizr
│ │ ├── require
│ │ └── underscore
│ ├── models
│ └── views
└── templates
我的build.js文件如下所示
({
dir: "compiled",
baseUrl: "uncompiled/js",
stubModules: ['text'],
findNestedDependencies: true,
preserveLicenseComments: false,
optimizeAllPluginResources: true,
removeCombined: true,
optimize: "uglify",
inlineText: true,
modules: [
{
name: "main"
}
],
paths: {
jquery: 'libs/jquery/jquery-2.0.0',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-1.0.0',
modernizr: 'libs/modernizr/modernizr-2.6.2',
jqueryui: 'libs/jquery.ui/jquery.ui-1.10.3',
jquerytagit: 'libs/jquery.tag-it/jquery.tag-it-2.0',
jqueryiframetransport: 'libs/jquery.iframe-transport/jquery.iframe-transport-1.7',
jqueryfileupload: 'libs/jquery.fileupload/jquery.fileupload-5.31.6',
jquerysimpledialog: 'libs/jquery.simple-dialog/jquery.simple-dialog-0.0.1',
jqueryscrolltofixed: 'libs/jquery.scrolltofixed/jquery.scrolltofixed',
jquerytimeago: 'libs/jquery.timeago/jquery.timeago-1.3.0',
jquerymousewheel: 'libs/jquery.mousewheel/jquery.mousewheel',
jqueryjscrollpane: 'libs/jquery.jscrollpane/jquery.jscrollpane'
},
})
我的main.js文件如下所示
require.config({
baseUrl: "/js",
paths: {
jquery: 'libs/jquery/jquery-2.0.0',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-1.0.0',
modernizr: 'libs/modernizr/modernizr-2.6.2',
jqueryui: 'libs/jquery.ui/jquery.ui-1.10.3',
jquerytagit: 'libs/jquery.tag-it/jquery.tag-it-2.0',
jqueryiframetransport: 'libs/jquery.iframe-transport/jquery.iframe-transport-1.7',
jqueryfileupload: 'libs/jquery.fileupload/jquery.fileupload-5.31.6',
jquerysimpledialog: 'libs/jquery.simple-dialog/jquery.simple-dialog-0.0.1',
jqueryscrolltofixed: 'libs/jquery.scrolltofixed/jquery.scrolltofixed',
jquerytimeago: 'libs/jquery.timeago/jquery.timeago-1.3.0',
jquerymousewheel: 'libs/jquery.mousewheel/jquery.mousewheel',
jqueryjscrollpane: 'libs/jquery.jscrollpane/jquery.jscrollpane'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
exports: 'Backbone',
deps: ['underscore', 'jquery']
},
modernizr: {},
jqueryui: {
deps: ['jquery']
},
jquerytagit: {
deps: ['jquery', 'jqueryui']
},
jqueryiframetransport: {
deps: ['jquery']
},
jqueryfileupload: {
deps: ['jquery', 'jqueryui']
},
jquerysimpledialog: {
deps: ['jquery']
},
jqueryscrolltofixed: {
deps: ['jquery'],
},
jquerytimeago: {
deps: ['jquery'],
},
jquerymousewheel: {
deps: ['jquery'],
},
jqueryjscrollpane: {
deps: ['jquery', 'jquerymousewheel'],
}
}
});
require([
// Load our app module and pass it to our definition function
'app',
'events',
'modernizr',
'jquery',
'jqueryscrolltofixed',
'jqueryui',
'jquerytagit',
'jquerysimpledialog',
'jqueryiframetransport',
'jqueryfileupload',
'jquerytimeago',
'jquerymousewheel',
'jqueryjscrollpane'
], function(Application, Events){
...
...
});
使用文本资源的define示例如下
define([
'underscore',
'backbone',
'helpers',
'events',
'router',
'views/destroyableView',
'text!/templates/comment.html'
], function(_, Backbone, Helpers, Events, Router, DestroyableView, CommentTemplate){
...
...
});
我已经能够得到一个编译过的文件,在build.js中打开inlineText:false,并去掉“text!*”定义。当inlineText设置为true并且我保留文本资源定义时,我得到的错误如下:
Tracing dependencies for: main
RangeError: Maximum call stack size exceeded
In module tree:
main
app
views/appView
views/menuView
views/notificationCollectionView
views/notificationView
views/viewGifPopupView
views/commentCollectionView
views/commentView
text
Error: RangeError: Maximum call stack size exceeded
In module tree:
main
app
views/appView
views/menuView
views/notificationCollectionView
views/notificationView
views/viewGifPopupView
views/commentCollectionView
views/commentView
text
非常感谢您的帮助。我唯一能做的就是提供一个小的工作示例: main.js
require.config({
paths : {
jquery : 'jquery-2.0.3',
backbone: 'backbone',
underscore: 'underscore'
},
shim : {
underscore: {exports: '_'},
backbone: {deps: ['underscore'], exports: 'Backbone'}
},
map : {
'*' : {
'text' : 'text' // real path tot text.js plugin
}
}
});
require(['jquery', 'backbone', 'text!./partials/view.html'], function($, Backbone, view) {
console.log('Type of $: ' + typeof $);
console.log('Type of Backbone: ' + typeof Backbone);
var element = $(view);
$('body').append(element);
});
({
baseUrl : ".",
name : 'main',
mainConfigFile : "main.js",
out : "main-built.js",
findNestedDependencies : true,
inlineText : true,
stubModules: ['text'],
preserveLicenseComments: false,
optimizeAllPluginResources: true,
removeCombined: true,
optimize: "uglify",
})
index-prod.html
<!doctype html>
<html>
<head></head>
<body>
<script src="require.js"></script>
<script src="main-built.js"></script>
</body>
</html>
<!doctype html>
<html>
<head></head>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>
<div>Some view</div>
index.html
<!doctype html>
<html>
<head></head>
<body>
<script src="require.js"></script>
<script src="main-built.js"></script>
</body>
</html>
<!doctype html>
<html>
<head></head>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>
<div>Some view</div>
partials/view.html
<!doctype html>
<html>
<head></head>
<body>
<script src="require.js"></script>
<script src="main-built.js"></script>
</body>
</html>
<!doctype html>
<html>
<head></head>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>
<div>Some view</div>
一些视图
构建过程没有错误,文本资源内联在main build.js中Thank@andrey,问题在于模板的放置位置。我觉得他们在js的兄弟文件夹中更自然,相反,他们需要在js文件夹中。