0

我正在尝试在我的 scalajs 应用程序中使用引导输入微调器。但是当我尝试使用它时，我收到错误“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？

4

1 回答 1

0

我可以通过查看代码猜测，您可能还需要在依赖的库脚本之前添加 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

捆绑它们时可能是进口订单。

于 2019-07-14T14:50:27.380 回答