如何使用 ScalaJS Bundler 将 javascript 全局变量设置为模块

Question

我正在使用 Scalajs-Bundler 来管理我的 Scala.js 项目的 NPM 依赖项。我正在尝试使用 scalajs-react-components 为 Material-ui 组件提供 Scala.js 外观，但是库 requires 是一个全局变量 mui定义如下：

var mui = require("material-ui");
mui.Styles = require("material-ui/styles");
mui.SvgIcons = require('material-ui/svg-icons/index');

window.mui = mui;

我的 build.sbt 中有行 webpackConfigFile := Some(baseDirectory.value/"webpack.config.js") 允许我自定义 scalajs-bundler 的 Webpack 配置。我在 webpack.config.js 中有以下内容：

var webpack = require('webpack');

module.exports = require('./scalajs.webpack.config.js');

module.exports.entry.material_ui = './mui.js';
module.exports.output.filename = "[name]-bundle.js";

并在 mui.js

var mui = require("material-ui");
mui.Styles = require("material-ui/styles");
mui.SvgIcons = require('material-ui/svg-icons/index');

window.mui = mui;

但是，生成的包不包含 mui 变量的定义。如果 webpack.config.js 改为

var webpack = require('webpack');

module.exports = require('./scalajs.webpack.config.js');

module.exports.entry.material_ui = './mui.js';
module.exports.output.filename = "final-bundle.js";

包含 mui 变量的定义，但实际的 Scala.js 应用程序不包含！

我也试过将 mui 变量的定义直接放在 webpack.config.js 文件中作为

var webpack = require('webpack');

module.exports = require('./scalajs.webpack.config.js');

var mui = require("material-ui");
mui.Styles = require("material-ui/styles");
mui.SvgIcons = require('material-ui/svg-icons/index');

window.mui = mui;

但这并没有说明，因为 window 在 webpack 配置脚本中未定义。

如何设置 mui 全局变量？

（满build.sbt）：

import org.scalajs.sbtplugin.cross.CrossType
import sbt.Keys.{organization, scalacOptions}

version := "1.0-SNAPSHOT"

inThisBuild(Seq(
  scalaVersion := "2.12.2",
  name := """CubScout""",
  organization := "com.robocubs4205",
  version := "1.0-SNAPSHOT",
  scalacOptions += "-feature",
  resolvers += "Atlassian" at "https://maven.atlassian.com/content/repositories/atlassian-public/"
))

lazy val server = (project in file("server")).settings(
  libraryDependencies ++= Seq(
    guice,
    "org.scalatestplus.play" %% "scalatestplus-play" % "3.1.0" % Test,
    "com.typesafe.play" %% "play-slick" % "3.0.0",
    "com.typesafe.play" %% "play-slick-evolutions" % "3.0.0",
    evolutions
  ),
  libraryDependencies += "com.h2database" % "h2" % "1.4.194",
  libraryDependencies ++= Seq(
    "com.nulab-inc" %% "scala-oauth2-core" % "1.3.0",
    "com.nulab-inc" %% "play2-oauth2-provider" % "1.3.0"
  ),
  //libraryDependencies += "com.mohiva" %% "play-silhouette" % "5.0.0",

  libraryDependencies += "com.github.t3hnar" %% "scala-bcrypt" % "3.1"


  // Adds additional packages into Twirl
  //TwirlKeys.templateImports += "com.robocubs4205.cubscout.controllers._",

  // Adds additional packages into conf/routes
  // play.sbt.routes.RoutesKeys.routesImport += "com.robocubs4205.binders._",
).dependsOn(commonJVM).enablePlugins(PlayScala)

lazy val client = (project in file("client")).settings(
  scalaJSUseMainModuleInitializer := true,
  webpackConfigFile := Some(baseDirectory.value/"webpack.config.js"),
  libraryDependencies ++= Seq(
    "org.scala-js" %%% "scalajs-dom" % "0.9.1"
  ),
  libraryDependencies += "com.github.japgolly.scalajs-react" %%% "core" % "1.1.0",
  libraryDependencies += "com.github.japgolly.scalajs-react" %%% "extra" % "1.1.0",
  libraryDependencies += "com.olvind" %%% "scalajs-react-components" % "0.7.0",
  npmDependencies in Compile ++= Seq(
    "react" -> "15.6.1",
    "react-dom" -> "15.6.1",
    "material-ui" -> "0.17.0"),
  scalaSource in Compile := baseDirectory.value / "app",
  scalaSource in Test := baseDirectory.value / "test",
  javaSource in Compile := baseDirectory.value / "app",
  javaSource in Test := baseDirectory.value / "test",
  resourceDirectory in Compile := baseDirectory.value / "resources"
).enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin).
  dependsOn(commonJS)

lazy val commonJVM = common.jvm

lazy val commonJS = common.js

lazy val common = (crossProject.crossType(CrossType.Pure) in file("common")).settings(
  libraryDependencies += "io.lemonlabs" %% "scala-uri" % "0.4.16",
  libraryDependencies += "com.typesafe.play" %% "play" % "2.6.2",
  libraryDependencies += "commons-codec" % "commons-codec" % "1.10"
).jvmSettings(
  libraryDependencies += "org.scala-js" %% "scalajs-stubs" % scalaJSVersion % "provided"
).jsSettings(
  libraryDependencies += "org.scala-js" %%% "scalajs-java-time" % "0.2.2"
)

onLoad in Global := (Command.process("project server", _: State)) compose (onLoad in Global).value

Answer 1

我误解了 webpack 入口点的工作原理。有效的 webpack.config.js 是：

var webpack = require('webpack');

module.exports = require('./scalajs.webpack.config.js');

Object.keys(module.exports.entry).forEach(function(key){
    module.exports.entry[key] = ['./mui.js'].concat(module.exports.entry[key])
});

这会将 './mui.js' 添加到每个入口点的文件数组的开头（默认情况下，只有一个由 scalajs-bundler 定义的入口点）

如何使用 ScalaJS Bundler 将 javascript 全局变量设置为模块

How do I set a javascript global variable to a module with ScalaJS Bundler

webpack

scala.js

scalajs-bundler