Question

我正在尝试在我的scalajs应用程序中使用bootstrap input spinner。但是，当我尝试使用它时，即使我已将其包含在项目中，也会出现错误“未定义jQuery”。有人可以告诉我我在想什么吗？

所以，如果我定义一个build.sbt：

name := "repro"
version := "1.0"
scalaVersion := "2.12.8"                      

scalaJSUseMainModuleInitializer := true       
mainClass in Compile := Some("App")   
enablePlugins(ScalaJSPlugin)
enablePlugins(ScalaJSBundlerPlugin)

webpackBundlingMode := BundlingMode.LibraryOnly()

libraryDependencies ++= Seq(
"org.querki" %%% "jquery-facade" % "1.2"
)

npmDependencies in Compile ++= Seq(
    "bootstrap" -> "4.3.1",
    "jquery" -> "3.2.1",
    "bootstrap-input-spinner" -> "1.11.8",
)

然后尝试按如下所示在我的应用中使用它：

@js.native

trait BootstrapInputSpinner extends JQuery {
def inputSpinner(options: js.Object = js.Dynamic.literal()): BootstrapInputSpinner = js.native
}

object BootstrapInputSpinner {
@JSImport("bootstrap-input-spinner", JSImport.Default)
@js.native
object Import extends BootstrapInputSpinner
val _import = Import  // explicitly import it

implicit def bisExtensions(query: JQuery): BootstrapInputSpinner = 

query.asInstanceOf[BootstrapInputSpinner]
}


object App {

  import BootstrapInputSpinner._

  def main(args: Array[String]): Unit = {
    $(dom.document.getElementById("spinner")).inputSpinner()
  }
}

我的html文件定义如下：

<!DOCTYPE html>
<html>
<head>
    <title>Test User interface</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="app-container" id="root">
    <input id="spinner" type="number"/>
</div>

<script src="repro-fastopt-library.js"></script>
<script src="repro-fastopt-loader.js"></script>
<script src="repro-fastopt.js"></script>

</body>
</html>

请注意，如果我不引用bootstrap-input-spinner库，并尝试单独使用jQuery，则效果很好。例如，如果我将App对象更改为：

object App {

//  import BootstrapInputSpinner._

  def main(args: Array[String]): Unit = {
    println($(dom.document.getElementById("spinner")))
  }
}

我还检查了-library.js文件，它具有以下代码：

module.exports = {
  "require": (function(x1) {
    return {
      "jquery": __webpack_require__(2),
      "bootstrap-input-spinner": __webpack_require__(3)
    }[x1]
  })
}

哪个告诉我应该先导入jquery？

Answer 1

通过查看代码，我可能会猜到，您可能还需要在依赖的库脚本之前添加jQuery脚本。

侧面说明：您必须检查引导程序版本及其所依赖的jQuery的兼容性

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="repro-fastopt-library.js"></script>
<script src="repro-fastopt-loader.js"></script>
<script src="repro-fastopt.js"></script>

哪些脚本依赖于jquery？

repro-fastopt-library或 repro-fastopt-loader或 repro-fastopt

捆绑它们时可能是导入顺序。

使用依赖于它的库时，获取“未定义jQuery”

1 个答案: