如何使用ScalaJS Bundler設置JavaScript全局變量到模塊

Question

我正在使用Scalajs-Bundler來管理我的Scala.js項目的NPM依賴項。我試圖用scalajs反應的成分爲原料的UI組件提供Scala.js外牆，但庫需要定義一個全局變量mui如下：

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

window.mui = mui; 

我在建立線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打捆定義只有一個入口點）