在Aurelia中使用Wrapbootstrap主题

问题描述 投票：1回答：1

我正在尝试将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上进行了第一次回购：test app

更新2@huocp感谢您的回复，但是...我选择了第二种方法，即在构建过程中删除jquery。我在main.ts中保留了include“ jquery”。现在我得到了新的错误：enter image description here

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

aurelia wrapbootstrap
1个回答
0
投票

您的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-bundler将jquery再次打包到vendor-bundle.js中。

为了防止将jquery打包到供应商捆绑包中。您有两个选择：

  1. 从不执行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"
],
  1. 使用import foo from "jquery-foo"，甚至可以使用import "jquery"，然后修改tasks/build.ts。
  function writeBundles() {
    return buildCLI.dest({
      onRequiringModule: function(moduleId) {
        // 1. Boolean `false`: ignore this moduleId;
        // This prevents cli-bundler from packing jquery
        // into vendor-bundle
        if (moduleId === 'jquery') return false;
      }
    });
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.