使用React WebJar时遭遇MultipleMatchesException问题求助

我之前在Play里用WebJar整合React时也碰到过这个问题，咱们一步步来拆解：

一、CJS和UMD的核心区别 #

这两种都是JavaScript的模块规范，针对不同的运行场景设计：

• CJS（CommonJS）：是Node.js原生的模块规范，用require()导入、module.exports导出。它是同步加载模块的，适合后端Node环境，或者前端用Webpack、Browserify这类打包工具的项目——打包工具会把CJS模块处理成浏览器能识别的代码。
• UMD（Universal Module Definition）：是通用模块格式，兼容CJS、AMD（浏览器端异步模块规范），甚至可以直接作为全局变量在浏览器中使用（比如通过<script>标签引入后直接用React全局对象）。它的目标是让同一份代码能在各种环境下运行，适配性更强。

二、为什么两个目录的文件都会被下载？ #

WebJar的React包会同时包含多种模块格式，这是为了满足不同项目的需求：
有的项目可能用Node做服务端渲染，需要CJS格式；有的项目可能直接在浏览器里通过script标签引入，需要UMD格式；还有的项目用AMD加载器（比如RequireJS）。WebJar把所有常用格式都打包进来，确保不管你是什么场景，都能找到对应的文件。

三、如何指定仅使用其中一个？ #

解决这个异常的核心是让WebJar能定位到唯一的文件，有两种常用方式：

1. 在模板中指定完整的相对路径 #

如果你用的是Play的WebJar模板助手，原来的代码可能是这样（会抛出异常）：

@routes.WebJarAssets.at(WebJarAssets.locate("react.production.min.js"))

现在你需要指定具体的目录：

• 要使用UMD格式（适合浏览器直接引入）：

@routes.WebJarAssets.at(WebJarAssets.locate("umd/react.production.min.js"))

• 要使用CJS格式（适合打包工具场景）：

@routes.WebJarAssets.at(WebJarAssets.locate("cjs/react.production.min.js"))

2. （可选）在build.sbt中配置WebJar的筛选规则 #

如果你的项目用sbt-web插件，可以通过配置过滤掉不需要的目录，比如只保留UMD：

WebJarKeys.webJarFilter := GlobFilter("umd/**")

不过这种方式会影响所有WebJar的文件，如果你还用到其他WebJar的话要谨慎使用，更推荐第一种模板指定路径的方式。

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