Question

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似乎有效，因为当我使用jquery/dist/jquery.slim.min.js代替{{1}时，捆绑器js文件的数量大约等于@JSimport的大小}}

然而，一旦我运行我的应用程序，当我到达JSGlobal的代码时，我收到错误：

JQuery("p").hide()

2。在Bootstrap.js之前加载JQuery

在上面的定义之后，如果我将以下代码添加到与Bootstrap的接口（并且实际上在某处使用它以使其不被“优化掉”），我将在页面加载时立即得到运行时错误：

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

页面加载错误是：

  @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文件，我已经确认我的代码有效，但是其中一个问题（除了杂乱和代码大小优化）是我无法轻松实现的控制负载顺序，但我离题......

如何在Scala.js中使用scalajs bundler中的jQuery + Bootstrap.js？

1。加载JQuery

2。在Bootstrap.js之前加载JQuery

0 个答案: