从 NPM 包中导入资产答案

【问题标题】：Importing assets from an NPM Package从 NPM 包中导入资产
【发布时间】：2019-11-29 18:22:40
【问题描述】：

假设我想在我的 web 应用程序中包含 font-awesome。所以我定义我的 build.sbt 如下：

val commonSettings = Seq(
    name := "repro",
    version := "1.0",
    scalaVersion := "2.12.8",
    unmanagedSourceDirectories in Compile +=
        baseDirectory.value / ".." / "shared" / "src" / "main" / "scala"
)
val client = project.in(file("client"))
    .settings(commonSettings: _*)
    .settings(
        npmDependencies in Compile ++= Seq(
            "font-awesome" -> "4.7.0",
        ),

    mainClass in Compile := Some("app.App"),

    scalaJSUseMainModuleInitializer := true,

    webpackBundlingMode := BundlingMode.LibraryOnly(),
)
.enablePlugins(ScalaJSPlugin)
.enablePlugins(ScalaJSBundlerPlugin)

val server = project.in(file("server"))
.settings(commonSettings: _*)
.settings(
    npmAssets ++= NpmAssets.ofProject(client) { nodeModules =>
        (nodeModules / "font-awesome").allPaths
    }.value
)
.enablePlugins(WebScalaJSBundlerPlugin)

我可以配置这个项目，以便我的“包”命令随后将 css 包含在我的 target/webapp 文件夹中吗？还是我必须使用另一个命令？

【问题讨论】：

标签： scala.js scalajs-bundler

【解决方案1】：

除了您的配置，您还必须将以下设置添加到server 项目：

.settings(
    scalaJSProjects := Seq(client),
    pipelineStages in Assets := Seq(scalaJSPipeline),
    managedClasspath in Runtime += (packageBin in Assets).value,
    WebKeys.packagePrefix in Assets := "public/"
)

第一行介绍了server 项目和client 项目生成的资产之间的依赖关系。 scalaJSProjects 设置由sbt-web-scalajs 插件引入。

第二行将client项目产生的资产整合到sbt-web管理的Web资产中。

第三行告诉 sbt 将 sbt-web 插件生成的资产包含到服务器的类路径中。

最后一行是可选的，它只是将生成的资产放入public/资源目录，这样它们就不会与其他不打算暴露给外界的类路径资源混在一起。

通过此配置，您可以使用以下命令构建生产资产：

> server/web-assets:package

或者，从构建文件中，使用packageBin in Assets 任务。

这将生成一个 target/scala-2.12/repro_2.12-1.0-web-assets.jar 文件，其中包含 Webpack 在您的 client 项目以及 font-awesome/ 目录中生成的 JavaScript 包。

【讨论】：