如何将scalajs-bundler与仅限客户端的应用程序一起使用

Question

在另一个问题中，建议我使用ScalaJS捆绑器来导入NPM依赖项。

我想在一个简单的仅限客户端的Web应用程序中使用一些Javascript NPM包。有一个名为静态的例子来说明这一点。我对示例的更改：

添加到build.sbt：

npmDependencies in Compile += "esprima" -> "3.1.3"

添加到 Main.scala 中：

import Esprima._
import JsonToString._
val code = "answer = 42"
val tokens = tokenize(code)
val tokensStr = tokens.json

Main.scala的变化："This is bold"成s"This is bold $tokensStr"

外观（有点简化，完整的版本见GitHub）：

import scala.scalajs.js
import scala.scalajs.js.annotation.JSName
@JSName("esprima")
@js.native
object Esprima extends js.Object {
  def tokenize(input: String, config: js.Any = js.native, delegate: String => String = js.native): js.Array[js.Any] = js.native
  def parse(input: String, config: js.Any = js.native): js.Dynamic = js.native
}

运行使用 fastOptJS::webpack 生成的 html 时，错误为：

未

捕获的类型错误：无法读取未定义的属性"标记化"

检查static-fastopt-bundle.js会显示使用了esprima，但其 js 未捆绑在一起。

将依赖项添加到仅限客户端的网页还需要执行哪些其他步骤？

Answer 1

如文档的这一部分所述，您必须在外观定义中使用@JSImport：

@JSImport("esprima", JSImport.Namespace)

作为参考，@JSName定义绑定到全局名称的外观，而@JSImport定义绑定到require d JavaScript 模块的外观。