我正在尝试将Aurelia-js与WrapBootstrapTheme一起使用,但遇到了困难。我将Aurelia CLI捆绑程序与requirejs和Typescript一起使用。
我已经将主题脚本(app.min.js)添加到index.html文件中,如下所示:
<body>
<!-- begin #page-loader -->
<div id="page-loader" class="fade show">
<span class="spinner"></span>
</div>
<!-- end #page-loader -->
<div id="page-container" aurelia-app="main" class="fade page-sidebar-fixed page-header-fixed gradient-enabled">
</div>
</body>
<script src="/scripts/app.min.js"></script>
<script src="/scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
一切正常,主题脚本有效,aurelia绑定有效。但是,如果我尝试使用JQuery,将其导入main.ts,则会收到错误消息:
app.min.js:1 Uncaught TypeError: $(...).sortable is not a function
at handleDraggablePanel (app.min.js:1)
at Object.initComponent (app.min.js:1)
at Object.init (app.min.js:1)
at HTMLDocument.<anonymous> (app.min.js:1)
at t (app.min.js:1)
at e (app.min.js:1)
我知道Jquery,Jquery-ui和bootstrap包含在主题脚本中。
我该如何运作?
谢谢
更新 @bigopon主题有1个脚本“ app.min.js”。就像我上面写的那样,我已将此脚本包含在Index.html中。然后,我尝试使用aurelia-jstree插件。在将插件包含在main.ts文件中之后,出现了错误($(...)。sortable不是函数)。然后我注意到,每当我使用插件或使用jquery的任何东西或在app.ts或main.tss或任何.ts文件中包含jquery本身时,都会遇到相同的错误。我看到主题脚本“ app.min.js”中包含jquery和jquery-ui-dist。因此,问题似乎是脚本执行的顺序。主题脚本中的jquery和jquery-ui-dist首先执行,而我包含在Aurelia应用中的jquery在稍后执行,并覆盖第一个。
现在,我尝试包含主题源脚本,但其中不包含jquery和jquery-ui-dist。我也遇到同样的错误。也许我在aurelia项目json文件中的配置错误。我不知道如何在所有依赖项中包含主题脚本,并且这种方法行得通。我什至尝试将shim = true设置为,但没有成功。
我在gitlab上做了一个tst回购:测试应用
更新2 @huocp感谢您的答复,但是...我选择了第二种方法,即在构建过程中删除jquery。我在main.ts中保留了include“ jquery”。现在我得到了新的错误:
我已经用更改更新了仓库。为什么选择第二个,因为我知道将来有时我会被要求使用jquery。我也使用打字稿,所以我必须导入模块,否则会出现编译错误。我也有主题脚本,但没有jquery ini(也在回购中),但是我不知道如何配置aurelia,因此脚本可以通过使用供应商捆绑包中的jquery和jquery ui来继续工作。
您的src/main.ts
has import "jquery"
导致cli-bundler将jquery打包到中vendor-bundle.js
。
您不需要那个jquery,因为主题js已经提供了jquery。
解决方法很简单,只需import "jquery"
从中删除即可src/main.ts
。
请注意,您可能想在应用程序中使用其他jquery插件,当您这样做时import "jquery-foo";
,该插件将可能取决于jquery,这将导致cli-bundler vendor-bundle.js
再次将jquery打包。
为了防止将jQuery打包到供应商捆绑包中。您有两种选择:
import foo from "jquery-foo"
,但aurelia.json
对所有jquery插件使用prepend。喜欢:"prepend": [
// don't prepend jquery here because them had it!
// prepend all jquery plugins
"node_modules/jquery-foo/to/main/file.js",
"node_modules/whatwg-fetch/dist/fetch.umd.js",
"node_modules/promise-polyfill/dist/polyfill.min.js",
"node_modules/requirejs/require.js"
],
import foo from "jquery-foo"
,您甚至可以使用import "jquery"
,然后修改您的tasks/build.ts
。 function writeBundles() {
return buildCLI.dest({
onRequiringModule: function(moduleId) {
// This prevents cli-bundler from packing jquery
// into vendor-bundle, just return global var $
// which is created by your theme js.
if (moduleId === 'jquery') return 'define(function(){return $;});';
}
});
}
谢谢,我添加了“更新2”部分的问题。
对不起,我想我错过了什么。尝试
if (moduleId === 'jquery') return 'define(function(){return $;});';
。我不在电脑旁,请告诉我它是否有效,之后我将更新答案。进行此修改后,它就可以工作了!非常感谢。