使用 RequireJS 从 Webjars 使用 JQuery
Use JQuery from Webjars using RequireJS
我正在尝试将 JQuery
包含在使用 maven
构建的 Web 应用程序中,使用 RequireJS
定义 Javascript
模块。
我遵循了 RequireJS
文档 here,它解释了如何将 JQuery
与 RequireJS
一起使用。我还有一个 maven
build.
这是我所做的:
我的 main.js,由我的 HTML
中的 RequireJS
的主数据调用
define(function() {
// Configuration of RequireJS
requirejs.config({
// No module can start with require. This can potentially allow easier definition of some elements
enforceDefine : true,
map : {
'*': {
'jquery': 'libs/jquery',
},
// To make jquery work with requireJS: see http://requirejs.org/docs/jquery.html
// 'jquery' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
'libs/jquery': { 'jquery': 'jquery' },
},
// The base URL is just the top-level directory where the files are stored
baseUrl : './',
// Kick-start the application by loading these files
deps : [ 'MyMainPanel' ],
});
});
我定义了一个"custom" JQuery(如RequireJS文档),位于/libs/jquery.js
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
在我的 maven
pom.xml
:
...
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.version}</version>
</dependency>
...
在使用 jquery 实例化模块时,出现以下错误:
GET http://localhost:8080/jquery.js 404 (Not Found)
require.js:166 Uncaught Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
使用JQuery的模块如下:
define(['ractive',
'jquery',
function(Ractive,
$,
){
var Panel = Ractive.extend({
el:"mainPanel",
oninit: function(){
$.ajax({url: "/myURL"}).done(function(types){
// Work
})
}
})
return Panel
})
我找到的唯一解决方案(这是一种解决方法)是发挥 "enforceDefine" 价值:
requirejs.config({
enforceDefine : false,
map : {
'libs/jquery' : {
'jquery' : "webjars/jquery/${jquery.version}/jquery"
},
'*': {
'jquery' : 'libs/jquery',
},
},
baseUrl : './',
deps : [ 'MyMainPanel' ],
});
我不知道它为什么有效,但它确实有效。在找到更好的解决方案之前,我会一直这样。
我正在尝试将 JQuery
包含在使用 maven
构建的 Web 应用程序中,使用 RequireJS
定义 Javascript
模块。
我遵循了 RequireJS
文档 here,它解释了如何将 JQuery
与 RequireJS
一起使用。我还有一个 maven
build.
这是我所做的:
我的 main.js,由我的 HTML
RequireJS
的主数据调用
define(function() {
// Configuration of RequireJS
requirejs.config({
// No module can start with require. This can potentially allow easier definition of some elements
enforceDefine : true,
map : {
'*': {
'jquery': 'libs/jquery',
},
// To make jquery work with requireJS: see http://requirejs.org/docs/jquery.html
// 'jquery' wants the real jQuery module
// though. If this line was not here, there would
// be an unresolvable cyclic dependency.
'libs/jquery': { 'jquery': 'jquery' },
},
// The base URL is just the top-level directory where the files are stored
baseUrl : './',
// Kick-start the application by loading these files
deps : [ 'MyMainPanel' ],
});
});
我定义了一个"custom" JQuery(如RequireJS文档),位于/libs/jquery.js
define(['jquery'], function (jq) {
return jq.noConflict( true );
});
在我的 maven
pom.xml
:
...
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.version}</version>
</dependency>
...
在使用 jquery 实例化模块时,出现以下错误:
GET http://localhost:8080/jquery.js 404 (Not Found)
require.js:166 Uncaught Error: Script error for: jquery
http://requirejs.org/docs/errors.html#scripterror
使用JQuery的模块如下:
define(['ractive',
'jquery',
function(Ractive,
$,
){
var Panel = Ractive.extend({
el:"mainPanel",
oninit: function(){
$.ajax({url: "/myURL"}).done(function(types){
// Work
})
}
})
return Panel
})
我找到的唯一解决方案(这是一种解决方法)是发挥 "enforceDefine" 价值:
requirejs.config({
enforceDefine : false,
map : {
'libs/jquery' : {
'jquery' : "webjars/jquery/${jquery.version}/jquery"
},
'*': {
'jquery' : 'libs/jquery',
},
},
baseUrl : './',
deps : [ 'MyMainPanel' ],
});
我不知道它为什么有效,但它确实有效。在找到更好的解决方案之前,我会一直这样。