如何通过scalajs-bundler将jQuery-modal插件纳入Webpack打包？

之前我用jQuery facade搭配jQuery模态框插件时一切顺畅，但换成scalajs-bundler的Webpack来替代jsDependencies之后，遇到了个麻烦：Webpack打包出来的文件里居然没包含这个模态框脚本。我琢磨着只要在加载时执行这个脚本，它应该就能自动挂载到$上，而且不用改动我已经写好的jQuery facade，但就是不知道在Scala.js里该怎么实现。

我当时已经配了一部分build.sbt，后来通过自定义webpack.config.js把jQuery暴露出来后，插件倒是能识别$了，但还是得在HTML里手动加<script>标签引入插件才行——这显然不是我想要的，我希望能完全在Scala.js的代码体系里搞定插件的引入和执行，不用碰HTML的脚本标签。

搁置了好几个月后重新捡起来处理，终于靠着scalajs-bundler结合Webpack搞定了这个需求，下面是具体的实现步骤：

步骤1：给package.json添加依赖 #

先在项目的package.json里添加上jQuery和模态框插件的依赖，示例如下：

"dependencies": {
  "jquery": "^3.6.0",
  "jquery-modal": "^0.9.2"
}

步骤2：配置Webpack全局暴露jQuery #

自定义webpack.config.js，用Webpack的ProvidePlugin把jQuery全局暴露出来，这样模态框插件才能找到$并挂载：

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

module.exports.plugins.push(
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);

步骤3：在Scala.js中引入并触发插件 #

在Scala.js代码里，通过JSImport来导入模态框插件，然后在应用初始化的时候触发它执行，这样它就会自动挂载到jQuery上：

import scala.scalajs.js
import scala.scalajs.js.annotation.JSImport

// 导入jQuery模态框插件
@JSImport("jquery-modal", JSImport.Namespace)
@js.native
object JQueryModal extends js.Object

object App {
  def main(args: Array[String]): Unit = {
    // 触发插件加载，自动挂载到全局jQuery对象
    JQueryModal
    // 接下来就可以正常用你原来的jQuery facade调用模态框方法了
    // 比如像这样：$(...).modal()
  }
}

步骤4：更新build.sbt配置 #

确保scalajs-bundler能正确处理这些npm依赖，在build.sbt里加上这些配置：

enablePlugins(ScalaJSPlugin, ScalaJSBundlerPlugin)

npmDependencies in Compile += "jquery" -> "3.6.0"
npmDependencies in Compile += "jquery-modal" -> "0.9.2"

webpackConfigFile := Some(baseDirectory.value / "webpack.config.js")

这样一套配置下来，Webpack就会把jQuery和模态框插件都打包到最终的输出文件里，完全不需要在HTML里手动添加<script>标签，插件也会自动挂载到$上，你之前写的jQuery facade代码完全不用修改就能正常调用模态框的功能啦。

内容的提问来源于stack exchange，提问作者thlim