如何使用 scala.js 和 sbt 的 ScalaJSBundler 制作客户端 javascript 页面？答案

【问题标题】：How can you make a client-side javascript pages with scala.js and sbt's ScalaJSBundler?如何使用 scala.js 和 sbt 的 ScalaJSBundler 制作客户端 javascript 页面？
【发布时间】：2021-03-03 07:17:47
【问题描述】：

我正在使用 scala.js 创建要在浏览器中运行的 javascript 代码，由 akka-http 服务器提供服务。我主要使用mill 作为我的构建工具，但后来想切换到sbt，这样我就可以使用ScalaJSBundler 插件来进行npm 依赖和打包。使用 sbt，当我执行 fastOpt 来编译我的 scala.js 代码时，创建的 javascript 代码与mill 创建的代码略有不同，它现在包含 require 语句（mill build 没有），例如

var $i_react = require("react");

当此代码在我的浏览器中运行时，require 显示为未定义。我在 scala.js 中导出的变量也是未定义的。我认为这是因为正在创建的代码是针对 ModuleKind.CommonJSModule 的（通过 sbt 设置 scalaJSModuleKind 设置），但是当我尝试将其更改为 ModuleKind.ESModule 时，构建失败：

scalaJSModuleKind must be set to ModuleKind.CommonJSModule in projects where ScalaJSBundler plugin is enabled

我是 javascript（和 scala.js）的新手。我究竟做错了什么？这应该怎么做？

谢谢！

【问题讨论】：

标签： sbt scala.js scalajs-bundler

【解决方案1】：

如Getting Started of scalajs-bundler 中所述，您应该将webpack/fastOptJS 的结果提供给浏览器，而不是fastOptJS。这是必要的，因为后者作为 CommonJS 模块发出，不适合浏览器，但随后由 Webpack 处理以生成前者，适合浏览器的包，还包含 npm 依赖项。

【讨论】：

我需要添加设置：webpackBundlingMode := BundlingMode.LibraryAndApplication()，然后 fastOptJS::webpack 成功了。