温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - Use Wrapbootstrap theme with Aurelia
aurelia wrapbootstrap

其他 - 将Wrapbootstrap主题与Aurelia一起使用

发布于 2020-04-05 23:54:49

我正在尝试将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来继续工作。

查看更多

提问者
Luka
被浏览
11
huocp 2020-02-03 07:00

您的src/main.tshas 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打包到供应商捆绑包中。您有两种选择:

  1. 从不做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"
],
  1. 使用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 $;});';
      }
    });
  }