将 Wrapbootstrap 主题与 Aurelia 一起使用答案

【问题标题】：Use Wrapbootstrap theme with Aurelia将 Wrapbootstrap 主题与 Aurelia 一起使用
【发布时间】：2020-01-31 15:52:21
【问题描述】：

我正在尝试将 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 is not a function）。然后我注意到，每当我使用插件或任何使用 jquery 或将 jquery 本身包含在 app.ts 或 main.tss 或任何 .ts 文件中时，我都会收到相同的错误。我看到主题脚本“app.min.js”中包含 jquery 和 jquery-ui-dist。所以问题似乎是脚本执行的顺序。主题脚本中的 jquery 和 jquery-ui-dist 首先执行，我在 Aurelia 应用程序中包含的 jquery 稍后执行并覆盖第一个。

现在我尝试在其中包含没有 jquery 和 jquery-ui-dist 的主题源脚本。我也遇到了同样的错误。也许我在 aurelia 项目 json 文件中的配置是错误的。我不知道如何将主题脚本包含在所有依赖项中并且有效。我什至尝试设置 shim = true 但没有成功。

我在 gitlab 上做了一个 tst repo：test app

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

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

【问题讨论】：

这可能意味着顺序错误。您目前如何包含这些脚本？
我添加了一个更新部分
我认为您可以利用 shim 配置。我会为此通知 Chungpeng Hu。

标签： aurelia

【解决方案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"，而是使用aurelia.json 为所有jquery 插件添加前缀。喜欢：

"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 $;});';。我不在电脑旁，让我知道它是否有效，我会在之后更新答案。
通过这个修改，它可以工作了！非常感谢。