Scala.JS 学习记录（一）

官方文档：Scala.js.

创建项目#

创建 Vanilla 模板：

1
npm create vite@4.1.0

1
◇  Select a framework:
2
│  Vanilla
3
│
4
◇  Select a variant:
5
│  JavaScript

Vite 配置#

安装 @scala-js/vite-plugin-scalajs 插件：

1
npm install -D @scala-js/vite-plugin-scalajs@1.0.0

在项目根目录中创建 vite.config.js 文件：

1
import { defineConfig } from "vite";
2
import scalaJSPlugin from "@scala-js/vite-plugin-scalajs";
3

4
export default defineConfig({
5
  // 注册 Scala.js 插件
6
  plugins: [scalaJSPlugin()]
7
});

修改 main.js 文件：

1
import 'scalajs:main.js'
2
// 引入样式
3
import './style.css'

初始化项目：

1
npm install

SBT 配置#

在项目根目录中创建 project 文件夹，并在该文件夹下创建 build.properties、metals.sbt、plugins.sbt 文件。

build.properties 文件：

1
# 设置 SBT 版本
2
sbt.version=1.10.11

metals.sbt 文件：

1
// 导入 bloop 插件
2
addSbtPlugin("ch.epfl.scala" % "sbt-bloop" % "2.0.10")

plugins.sbt 文件：

1
// 导入 scala.js 插件
2
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.19.0")

在项目根目录中 build.sbt 文件：

1
import org.scalajs.linker.interface.ModuleSplitStyle
2

3
lazy val root = project.in(file("."))
4
  //
5
  .enablePlugins(ScalaJSPlugin)
6
  .settings(
7
    // 设置 Scala 项目名称与版本
8
    // Scala.js 1.19.0 支持的最高 Scala 版本是 3.3.3
9
    name := "scala_js_test",
10
    scalaVersion := "3.3.3",
11

12
    // 不指定主类
13
    scalaJSUseMainModuleInitializer := true,
14

15
    // 设置热更新
16
    // List("test")：表示 test 包下的 .scala 文件需要热更新
17
    scalaJSLinkerConfig ~= {
18
      _.withModuleKind(ModuleKind.ESModule)
19
        .withModuleSplitStyle(ModuleSplitStyle.SmallModulesFor(List("test")))
20
    },
21

22
    // 引入 scala.js dom 与 laminar（响应式框架） 依赖
23
    libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.8.0",
24
    libraryDependencies += "com.raquo" %%% "laminar" % "17.0.0",
25
  )

通过 VsCode 的 Metals 插件初始化 Sbt 项目。

使用#

在 src 目录中创建 main/scala 目录，用于存放 Scala 代码文件。

创建 src/main/scala/Main.scala 文件，即项目主入口（在 index.html 中调用）：

1
import scala.scalajs.js
2
import scala.scalajs.js.annotation.*
3
import com.raquo.laminar.api.L.{*, given}
4
import org.scalajs.dom
5

6
import test.MainApp
7

8
// 通过 npm run dev 启动项目会从标注了 @main 注解的 Main 方法开始加载
9
@main
10
def Main(): Unit = renderOnDomContentLoaded(
11
  dom.document.getElementById("app"),
12
  MainApp.appElement()
13
)

创建 src/main/scala/test/MainApp.scala 文件：

此处的 test 目录即是在 build.sbt 文件中定义的需要热更新的目录。

1
import com.raquo.laminar.api.L.{*, given}
2
import com.raquo.laminar.nodes.ReactiveHtmlElement
3
import org.scalajs.dom.HTMLDivElement
4
import scala.scalajs.js
5
import scala.scalajs.js.annotation.*
6

7
object MainApp {
8
  // 引入静态图片资源
9
  @js.native @JSImport("/src/javascript.svg", JSImport.Default)
10
  val javascriptLogo: String = js.native
11

12
  def appElement(): ReactiveHtmlElement[HTMLDivElement] = {
13
    div(
14
      img(src := javascriptLogo, className := "logo vanilla"),
15
      h1("Hello Scala.JS~!")
16
    )
17
  }
18
}

启动项目#

在 VsCode 中创建两个终端，一个用于 SBT 热更新，一个用于启动 Vite 项目。

终端一：设置热更新。

1
sbt ~fastLinkJS

当最后一行出现 [info] Press <enter> to interrupt or '?' for more options. 时，表示热更新功能正常运行；此时不需要再按 Enter 或 Crtl + C，因为这个功能是用来监视 Scala 代码文件的，不是生成一次性文件的。

终端二：

1
npm run dev

此时再修改 src/main/scala/test/MainApp.scala 文件即可看到页面自动更新。

欢迎来到哔的博客

创建项目#

Vite 配置#

SBT 配置#

使用#

启动项目#