时间戳

首页 > 解决方案 > 将 Wrapbootstrap 主题与 Aurelia 一起使用

aurelia - 将 Wrapbootstrap 主题与 Aurelia 一起使用

问题描述

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

标签： aurelia

解决方案

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

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

解决方案很简单，只需import "jquery"从src/main.ts.

请注意，您可能想在您的应用程序中使用其他 jquery 插件，当您这样做时import "jquery-foo";，该插件可能会依赖 jquery，这将导致 cli-bundlervendor-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 $;});';
      }
    });
  }

推荐阅读