RequireJS로 Backbone 및 Underscore (jQuery뿐만 아니라)를로드하려고합니다. 최신 버전의 Backbone 및 Underscore에서는 다소 까다로워 보입니다. 우선 Underscore는 자동으로 모듈로 자체 등록하지만 Backbone은 Underscore를 전 세계적으로 사용할 수 있다고 가정합니다. 또한 Backbone은 자신을 다른 라이브러리와 일치하지 않는 모듈로 등록하지 않는 것 같습니다. 이것이 내가 할 수있는 최고의 main.js입니다.
require(
{
paths: {
'backbone': 'libs/backbone/backbone-require',
'templates': '../templates'
}
},
[
// jQuery registers itself as a module.
'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js',
// Underscore registers itself as a module.
'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js'
], function() {
// These nested require() calls are just due to how Backbone is built. Underscore basically says if require()
// is available then it will automatically register an "underscore" module, but it won't register underscore
// as a global "_". However, Backbone expects Underscore to be a global variable. To make this work, we require
// the Underscore module after it's been defined from within Underscore and set it as a global variable for
// Backbone's sake. Hopefully Backbone will soon be able to use the Underscore module directly instead of
// assuming it's global.
require(['underscore'], function(_) {
window._ = _;
});
require([
'order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js',
'order!app'
], function(a, app) {
app.initialize();
})
});
작동하는 동안 옵티마이 저가 질식합니다. 나는 다음을 받는다 :
Tracing dependencies for: main
js: "/home/httpd/aahardy/requirejs/r.js", line 7619: exception from uncaught JavaScript throw: Error: Error: Error evaluating module "undefined" at location "/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js":
JavaException: java.io.FileNotFoundException: /home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js (No such file or directory)
fileName:/home/httpd/aahardy/phoenix/trunk/ui/js/../../ui-build/js/underscore.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
main
이것을 처리하는 더 좋은 방법이 있습니까? 감사!
답변
RequireJS 2.X는 이제 새로운 shim
구성을 사용하여 Backbone & Underscore와 같은 비 AMD 모듈을 훨씬 더 유기적으로 처리 합니다.
shim
구성 사용할 간단하다 : (1) 하나의 종속 상태 ( deps
있는 경우), (로부터 될 수있는 paths
구성 또는 유효 패스 자체 일 수있다). (2) (선택적으로) shimming중인 파일에서 전역 변수 이름을 지정합니다.이 변수는 필요한 모듈 함수로 내 보내야합니다. (내보내기를 지정하지 않으면 require / define 함수에 아무것도 전달되지 않으므로 전역을 사용해야합니다.)
다음은 shim
Backbone을로드 하는 간단한 사용법입니다 . 또한 종속성이 없지만 밑줄에 대한 내보내기를 추가합니다.
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
//the "main" function to bootstrap your code
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone) { // or, you could use these deps in a separate module using define
});
참고 : 이 간단한 코드는 jquery, backbone 및 underscore가이 “main”코드와 동일한 디렉토리에있는 “jquery.js”, “backbone.js”및 “underscore.js”파일에 있다고 가정합니다 (필수의 baseURL이 됨). ). 그렇지 않은 경우 paths config 를 사용해야합니다 .
나는 기본적으로 내장 shim
기능을 사용 한다고 생각 합니다. 포크 버전의 Backbone & Underscore를 사용하지 않는 이점은 다른 인기있는 답변에서 권장되는 AMD 포크를 사용하는 이점보다 중요하지만 어느 쪽이든 작동합니다.
답변
업데이트 : 버전 1.3.0부터 Underscore는 AMD (RequireJS) 지원을 제거했습니다 .
James Burke (RequireJS 유지 관리자)의 AMD 지원으로 amdjs / Backbone 0.9.1 및 amdjs / Underscore 1.3.1 포크를 사용할 수 있습니다 .
Underscore 및 Backbone 에 대한 AMD 지원에 대한 추가 정보 .
// main.js using RequireJS 1.0.7
require.config({
paths: {
'jquery': 'libs/jquery/1.7.1/jquery',
'underscore': 'libs/underscore/1.3.1-amdjs/underscore', // AMD support
'backbone': 'libs/backbone/0.9.1-amdjs/backbone', // AMD support
'templates': '../templates'
}
});
require([
'domReady', // optional, using RequireJS domReady plugin
'app'
], function(domReady, app){
domReady(function () {
app.initialize();
});
});
모듈이 올바르게 등록되었으며 주문 플러그인이 필요하지 않습니다.
// app.js
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone){
return {
initialize: function(){
// you can use $, _ or Backbone here
}
};
});
Underscore는 실제로 선택 사항입니다. Backbone은 이제 자체적으로 종속성을 가져옵니다.
// app.js
define(['jquery', 'backbone'], function($, Backbone){
return {
initialize: function(){
// you can use $ and Backbone here with
// dependencies loaded i.e. Underscore
}
};
});
일부 AMD 설탕 을 사용하면 다음과 같이 작성할 수도 있습니다.
define(function(require) {
var Backbone = require('backbone'),
$ = require('jquery');
return {
initialize: function(){
// you can use $ and Backbone here with
// dependencies loaded i.e. Underscore
}
};
});
최적화 오류와 관련하여 : 빌드 구성을 다시 확인하십시오. 경로 구성이 꺼져 있다고 가정합니다. RequireJS Docs와 유사한 디렉토리 설정 이있는 경우 다음을 사용할 수 있습니다.
// app.build.js
({
appDir: "../",
baseUrl: "js",
dir: "../../ui-build",
paths: {
'jquery': 'libs/jquery/1.7.1/jquery',
'underscore': 'libs/underscore/1.3.1-amdjs/underscore',
'backbone': 'libs/backbone/0.9.1-amdjs/backbone',
'templates': '../templates'
},
modules: [
{
name: "main"
}
]
})
답변
참고로, 버전 1.1.1 (~ Feb ’13) 기준으로 Backbone은 자체적으로 AMD 모듈로 등록합니다 . shim 설정을 사용하지 않고도 requirejs와 작동합니다. ( James Burke의 amdjs 포크 는 1.1.0 이후로 업데이트되지 않았습니다)
답변
좋은 소식, Underscore 1.6.0은 이제 requirejs define을 지원합니다 !!!
아래 버전은 shim이 필요하거나 underscore.js가 필요합니다. “_”전역 변수가 손상되지 않기를 맹목적으로 기대합니다.
간단히로드
requirejs.config({
paths: {
"underscore": "PATH/underscore-1.6.0.min",
}
});
답변
직접 적어 두겠습니다. requirejs.org에 대한 설명을 읽을 수 있습니다. 아래 코드를 일상적인 사용을위한 스 니펫으로 사용할 수 있습니다. (ps 나는 yeoman을 사용합니다.)
index.html에 스크립트를 포함했는지 확인하십시오
<!-- build:js({app,.tmp}) scripts/main.js -->
<script data-main="scripts/main" src="bower_components/requirejs/require.js"></script>
<!-- endbuild -->
그런 다음 main.js에서
require.config({
shim: {
'backbone': {
deps: ['../bower_components/underscore/underscore.js', 'jquery'],
exports: 'Backbone'
}
},
paths: {
jquery: '../bower_components/jquery/jquery',
backbone: '../bower_components/backbone/backbone'
}
});
require(['views/app'], function(AppView){
new AppView();
});
app.js
/**
* App View
*/
define(['backbone', 'router'], function(Backbone, MainRouter) {
var AppView = Backbone.View.extend({
el: 'body',
initialize: function() {
App.Router = new MainRouter();
Backbone.history.start();
}
});
return AppView;
});
도움이 되었기를 바랍니다.!
답변
require.config({
waitSeconds: 500,
paths: {
jquery: "libs/jquery/jquery",
jqueryCookie: "libs/jquery/jquery.cookie",
.....
},
shim: {
jqxcore: {
export: "$",
deps: ["jquery"]
},
jqxbuttons: {
export: "$",
deps: ["jquery", "jqxcore"]
}
............
}
});
require([
<i> // Load our app module and pass it to our definition function</i>
"app"
], function(App) {
// The "app" dependency is passed in as "App"
// Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
App.initialize();
});