在 Aurelia 中使用 Wrapbootstrap 主题

Question

我正在尝试将 WrapBootstrapTheme 与 Aurelia-js 一起使用，但我遇到了困难。我将 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 回购：test app

更新 2 @huocp 感谢您的回复，但是... 我选择了第二个选项，即在 build 进程中删除 jquery。我在 main.ts 中留下了包含 "jquery"。现在我得到新的错误：

我已经用更改更新了 repo。为什么我选择了第二个，因为我知道将来有时我会被要求uired使用jquery。我还使用打字稿，所以我必须导入模块，否则我会收到编译错误。我还有没有 jquery ini 的主题脚本（也在回购协议中）但是我不知道如何配置 aurelia 所以脚本通过使用 jquery 和 [=55= 继续工作] ui 来自供应商捆绑包。

Answer 1

您的 src/main.ts 有 import "jquery"，这导致 cli-bundler 将 jquery 打包到 vendor-bundle.js.

你不需要那个jquery，因为主题js已经提供了jquery。

解决方法很简单，把src/main.ts中的import "jquery"去掉即可。

请注意，您可能希望在您的应用中使用其他 jquery 插件，当您这样做时 import "jquery-foo";，该插件可能会依赖于 jquery，这将导致 cli-bundler 打包jquery 再次进入 vendor-bundle.js。

防止 jquery 打包到供应商包中。您有两个选择：

从不做 import foo from "jquery-foo"，但对所有 jquery 插件使用 aurelia.json 前缀。喜欢：

"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 $;});';
      }
    });
  }

在 Aurelia 中使用 Wrapbootstrap 主题

Use Wrapbootstrap theme with Aurelia

aurelia