Vaadin 14 传递 NPM 依赖项答案

【问题标题】：Vaadin 14 transitive NPM dependenciesVaadin 14 传递 NPM 依赖项
【发布时间】：2020-09-23 09:31:39
【问题描述】：

我正在将我的 Spring Boot + Vaadin 应用程序从“Vaadin 13 兼容模式”中的 Vaadin 14 切换到“本机 Vaadin 14 模式”。这主要是因为我想使用 Vaadin Gradle 插件以便能够启用生产模式。这也需要从 Full Calendar web component 升级到 Full Calendar 4 web component，它现在支持 Vaadin 14+ 并且还封装了更新版本的 FullCalendar。不幸的是，很多事情需要同时发生。

我现在遇到的问题是，当显示 FullCalendar 组件时，我收到此客户端错误：

(ReferenceError) : 时刻未定义

我看到 FullCalendar Web 组件 jar 在 org.vaadin.stefan.fullcalendar 包中的 FullCalendar 类上有这些注释：

@NpmPackage(value = "moment", version = "2.24.0")
@NpmPackage(value = "moment-timezone", version = "0.5.28")
@NpmPackage(value = "@fullcalendar/moment", version = "4.4.0")
@NpmPackage(value = "@fullcalendar/moment-timezone", version = "4.4.0")

之所以在这里列出前两个，可能是因为它们被定义为后两个的对等依赖项，所以不会自动安装。

我还注意到 FullCalendar 4 Web 组件页面提到了以下已知问题：

构建问题/JS（客户端）错误（V14+）

可能是传递依赖没有正确解析。

如果您使用的是 Spring Boot，请将 @EnableVaadin 注解添加到您的应用程序类中。添加包 org.vaadin.stefan 加上你的根包作为参数。这应该使 Spring 能够在运行时分析所有 npm 依赖项。其他 CDI 版本应该也能正常工作。

所以我已将此注释添加到我的应用程序类中：

@SpringBootApplication
@EnableVaadin({"org.vaadin.stefan", "com.mypackage"})
public class MyApplication {

但这似乎不起作用。

我也尝试过运行 gradle 任务 vaadinBuildFrontend 而不仅仅是 vaadinPrepareFrontend，但这并没有什么不同。

我还应该做些什么来确保moment 被正确加载和初始化？

更新：如果我在build.gradle 中显式启用vaadin.productionMode，那么错误就消失了。当然，我也希望能够在开发模式下运行应用程序。

更新 2：我已经尝试从提供的基础项目创建一个干净的 Vaadin + Spring Boot + Gradle 项目。我注意到一个不同之处：在我自己的应用程序中，我收到了一条警告：

dev-updater     : Couldn't find  dev dependencies file. Dev dependencies won't be locked

...我没有进入干净的项目。我在那里得到了以下我自己的项目中没有的日志记录行：

dev-updater     : Visited 88 classes. Took 16 ms.
dev-updater     : Skipping `pnpm install` because the frontend packages are already installed...
dev-updater     : Copying frontend resources from jar files ...
dev-updater     : Visited 13 resources. Took 84 ms.```

UDPATE 3：我发现moment() 函数实际上是从使用calendar.getElement().executeJs(...) 执行的代码中调用的。显然，该功能在该范围内是未知的。也许是由于严格模式？不确定这是否解释了它为什么在生产模式下工作。

【问题讨论】：

标签： spring-boot vaadin vaadin-flow vaadin14

【解决方案1】：

我没有在 V14 中使用过 gradle，所以我无法确定是 gradle 相关的原因还是 Vaadin / 插件问题。我只能说，我上周至少尝试使用该插件设置一个新项目，并且它开箱即用，所以我认为某处隐藏了一些棘手的细节。

让我们从一些常见的问题开始：

我假设，您使用的是 V14.3.x？
moment 库是否已下载（请参阅项目根目录 > node_modules/moment 和 ./moment-timezone）？如果没有，是否在 package.json 文件中列出？
您是否在使用干净的 Vaadin 项目时也遇到过这个问题？
而且，我并不是要求您改用它，而只是出于测试目的 - 您是否尝试过使用 maven 而不是 gradle 进行相同的设置？
您如何在 Java 中使用日历。你能展示一些实现的示例代码吗？

【讨论】：

【解决方案2】：

我能够解决此问题，因为 moment 用于创建可解析的日期字符串，但（至少是当前版本）该库支持 LocalDate#toString 返回的 ISO 格式。

正如我所怀疑的，由于严格模式，该变量未在全局范围内声明，因此无法在executeJs 中使用。如果有必要这样做，需要创建一个将变量添加到window 的javascript 文件，并使用@JsModule 导入该文件。那么window对象中的变量就可以从executeJs中使用了。

请参阅 https://vaadin.com/forum/thread/17832455/how-to-use-external-javascript-libraries-correct-in-vaadin-14-npm 和 https://vaadin.com/forum/thread/17753553/can-t-use-frontend-js-with-vaadin-14。

【讨论】：