Question

我正在使用Scalajs-Bundler来管理我的Scala.js项目的NPM依赖项。我正在尝试使用scalajs-react-components为Material-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;

我的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（＆＃39; webpack＆＃39;）;

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;

但由于在webpack配置脚本中未定义window，因此没有说明。

如何设置mui全局变量？

（full 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

1 个答案: