Как использовать 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>
теги, но одна проблема с этим (кроме беспорядка и оптимизации размера кода) состоит в том, что я не смог легко контролировать порядок загрузки, но я отвлекся...