Как использовать jQuery + Bootstrap.js в Scala.js с пакетом scalajs?

1. Загрузка JQuery

Я определил следующее для взаимодействия с JQuery:

  @js.native
  sealed trait JQuery extends js.Any {
    def hide(): js.Any
  }

  @js.native
  @JSImport("jquery/dist/jquery.slim.min.js", "jQuery")
  object JQuery extends js.Object {
    def apply(x: String): JQuery = js.native
  }

Я подтвердил, что @JSimport Кажется, работает, в том, что js-файл компоновщика увеличивается на величину, примерно равную размеру jquery/dist/jquery.slim.min.js когда я использую @JSimport вместо JSGlobal,

Однако, когда я запускаю свое приложение, когда я получаю код, который делает JQuery("p").hide() Я получаю ошибку:

Codebook.scala:42 Uncaught TypeError: (0 , $i_jquery$002fdist$002fjquery$002emin$002ejs.jQuery) is not a function
    at Codebook.scala:42
    at $c_sjsr_AnonFunction1.apply__O__O (AnonFunctions.scala:15)
    at HTMLAnchorElement.<anonymous> (mount.scala:106)
(anonymous) @ Codebook.scala:42
$c_sjsr_AnonFunction1.apply__O__O @ AnonFunctions.scala:15
(anonymous) @ mount.scala:106

2. Загрузка JQuery перед Bootstrap.js

После приведенных выше определений, если я добавлю следующий код для взаимодействия с Bootstrap (и фактически использую его где-то, чтобы он не был "оптимизирован"), я получу ошибку времени выполнения сразу при загрузке страницы:

  @js.native
  sealed trait JQueryBootstrap extends JQuery {
    def collapse(arg: String): js.Any
  }

  @js.native
  @JSImport("bootstrap/dist/js/bootstrap.min.js", "jQuery")
  object JQueryBootstrap extends js.Object {
    def apply(x: String): JQueryBootstrap = js.native

    //TODO not the complete API yet, should be string || "Options":
    //TODO https://bootstrapdocs.com/v3.3.6/docs/javascript/#collapse-methods
    def collapse(arg: String): js.Any = js.native

  }

  implicit class JQueryBootstrapExtra(val jq: JQueryBootstrap) extends AnyVal {

    def collapseToggle = jq.collapse("toggle")

  }

Ошибка при загрузке страницы:

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
    at Object.<anonymous> (bootstrap.min.js:6)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at Object.<anonymous> (Utils.scala:35)
    at Object.<anonymous> (ced2ar3-view-fastopt-bundle.js:102442)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at Object.$env (bootstrap abeaa4cf57d5fe91d588:62)
    at __webpack_require__ (bootstrap abeaa4cf57d5fe91d588:19)
    at bootstrap abeaa4cf57d5fe91d588:62
    at bootstrap abeaa4cf57d5fe91d588:62
(anonymous) @ bootstrap.min.js:6
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
(anonymous) @ Utils.scala:35
(anonymous) @ ced2ar3-view-fastopt-bundle.js:102442
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
$env @ bootstrap abeaa4cf57d5fe91d588:62
__webpack_require__ @ bootstrap abeaa4cf57d5fe91d588:19
(anonymous) @ bootstrap abeaa4cf57d5fe91d588:62
(anonymous) @ bootstrap abeaa4cf57d5fe91d588:62

Я подтвердил, что мой код работает, если я загружаю файлы js вручную через динамически вставленную <script> теги, но одна проблема с этим (кроме беспорядка и оптимизации размера кода) состоит в том, что я не смог легко контролировать порядок загрузки, но я отвлекся...

0 ответов

Другие вопросы по тегам