如何在仅客户端应用程序中使用scalajs-bundler [英] How to use scalajs-bundler with client only app

问题描述

在另一个问题中，建议我使用

In another question I was advised to use ScalaJS bundler to import NPM dependencies.

我想在一个简单的仅客户端Web应用程序中使用一些Javascript NPM软件包.有一个称为静态"的示例显示了这一点. 我对示例的更改:

I would like to use some Javascript NPM packages in a simple client-only web application. There is an example called static which shows this. My changes to the example:

添加到build.sbt中:

Add into build.sbt:

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

添加到Main.scala:

Add into 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"

Facade(进行了一些简化，有关完整版本，请参见

Facade (a bit simplified, for full a version see 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时，错误是:

When running the html generated with fastOptJS::webpack the error is:

未捕获的TypeError:无法读取未定义的属性'tokenize'

Uncaught TypeError: Cannot read property 'tokenize' of undefined

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

Inspecting the static-fastopt-bundle.js shows esprima is used, but its js is not bundled.

要将依赖项添加到仅客户端的网页中，还需要采取什么其他步骤?

What other steps are needed to add dependencies into a client-only web page?

推荐答案

如

As described in this part of the documentation, you have to use @JSImport in your facade definition:

@JSImport("esprima", JSImport.Namespace)

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

For reference, @JSName defines a facade bound to a global name, while @JSImport defines a facade bound to a required JavaScript module.

这篇关于如何在仅客户端应用程序中使用scalajs-bundler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！