Используйте тему Wrap bootstrap с Aurelia - PullRequest
Новая
       31

Используйте тему Wrap bootstrap с Aurelia

1 голос
/ 31 января 2020

Я пытаюсь использовать WrapBootstrapTheme с Aurelia- js, и у меня возникают трудности. Я использую пакет Aurelia CLI с require js и Typescript.

Я добавил скрипт темы (app.min. js) в индекс. 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». Я включил этот скрипт в указатель. html, как я написал выше. Затем я попытался использовать плагин aurelia-jstree. После того, как я включил плагин в файл main.ts, появилась ошибка ($ (...). Sortable не является функцией). Затем я заметил, что всякий раз, когда я использую плагин или что-либо, что использует jquery или включает сам jquery в app.ts или main.tss или любом файле .ts, я получаю ту же ошибку. Я видел, что сценарий темы "app.min. js" включает в себя jquery и jquery -ui-dist. Так что проблема кажется в порядке выполнения скрипта. Где jquery и jquery -ui-dist в скрипте темы выполняются первыми, а jquery, который я включаю в приложение Aurelia, выполняется позже и переопределяет первый.

Теперь я попытался включить исходный скрипт темы без jquery и jquery -ui-dist в нем. Я тоже получил такую ​​же ошибку. Возможно, моя конфигурация в файле проекта aurelia json неверна. Я не знаю, как включить скрипт темы со всеми зависимостями, и это работает. Я даже пытался установить shim = true, но безуспешно.

Я сделал tst репо на gitlab: Тестовое приложение

Обновление 2 @huocp Спасибо за ответ, но ... Я выбрал второй вариант - удаление jquery в процессе сборки. Я оставил включить "jquery" в main.ts. Теперь я получаю новую ошибку: enter image description here

Я обновил репо с изменением. Почему я пошел со вторым, потому что я знаю, что иногда в будущем мне будет необходимо использовать jquery. Также я использую машинопись, поэтому я должен импортировать модули, иначе я получаю ошибки компиляции. У меня также есть сценарий темы без jquery ini it (также в репозитории), но тогда я не знаю, как настроить aurelia, чтобы скрипт продолжал работать с использованием jquery и jquery пользовательского интерфейса из комплекта поставщиков. .

1 Ответ

2 голосов
/ 02 февраля 2020

Ваш 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", но использовать aurelia.json prepend для всех 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 $;});';
      }
    });
  }
...