如何在Scala.js应用开发中实现类似React的热重载功能？

方案1：sbt-fastopt-js + 自动浏览器刷新 #

这是最简便的入门方案，依赖Scala.js原生的开发服务器支持：

• 在build.sbt中添加配置，开启自动重载：

  scalaJSLinkerConfig ~= { _.withReload(true) }
  

• 启动sbt开发服务器：

  sbt fastOptJS::startDevServer
  

修改Scala代码后，fastOptJS会自动增量编译，服务器会推送刷新指令给浏览器，页面自动更新变更内容。

方案2：Webpack集成实现HMR（无刷新热替换） #

如果需要类似React的无页面刷新热重载，可以用Webpack的HMR功能配合Scala.js：

1. 添加sbt-scalajs-webpack插件到project/plugins.sbt：

   addSbtPlugin("ch.epfl.scala" % "sbt-scalajs-webpack" % "1.0.2")
   

2. 在build.sbt中配置模块类型并关闭原生刷新：

   scalaJSLinkerConfig ~= {
     _.withModuleKind(ModuleKind.CommonJSModule)
      .withReload(false)
   }
   webpackConfigFile := Some(baseDirectory.value / "webpack.config.js")
   

3. 编写webpack.config.js启用HMR：

   const path = require('path');
   const webpack = require('webpack');
   
   module.exports = {
     entry: './target/scala-2.13/[你的项目名]-fastopt.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     devServer: {
       static: './dist',
       hot: true,
     },
     plugins: [new webpack.HotModuleReplacementPlugin()],
   };
   

4. 启动Webpack开发服务器：

   sbt fastOptJS::webpackDevServer
   

这种模式下，修改代码后只会更新变更的模块，无需刷新整个页面。

方案3：Mill构建工具简化配置 #

如果使用Mill替代sbt，配置更简洁：

• 在build.sc中配置开发服务器：

  object yourProject extends ScalaJSModule {
    def scalaVersion = "2.13.10"
    def scalaJSVersion = "1.13.2"
    def devServer = T.command {
      val jsFile = fastOpt().path
      mill.scalajslib.devserver.DevServer.run(
        jsFile,
        mill.scalajslib.devserver.DevServerConfig().withReload(true)
      )
    }
  }
  

• 启动命令：

  mill yourProject.devServer
  

关键注意事项 #

• 确保Scala.js版本≥1.0，老版本不支持这些热重载特性。
• 开发阶段优先使用fastOptJS，编译速度远快于fullOptJS，适合快速迭代。
• 若使用Scala.js React、Laminar等框架，部分框架内置了HMR优化，可参考对应框架文档开启适配配置。

内容的提问来源于stack exchange，提问作者BALAJI