Vaadin 14传递NPM依赖性

问题描述

我正在将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在FullCalendar包中的org.vaadin.stefan.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已正确加载和初始化？

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

更新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(...)执行的代码中调用的。显然，该功能在该范围内未知。也许是由于严格模式？不确定是否可以解释为什么它可以在生产模式下工作。

解决方法

我还没有在V14中使用gradle，所以我不能肯定地说，这可能是与gradle相关的原因还是Vaadin /插件问题。我只能说，我至少在上周尝试使用该插件建立一个新项目，并且该项目开箱即用，因此我认为某些地方隐藏着一些棘手的细节。

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

• 我认为您使用的是V14.3.x？
• 时刻库是否已下载（请参阅项目根目录> node_modules / moment和./moment-timezone）？如果没有，它是否列在package.json文件中？
• 您是否在干净的Vaadin项目中也遇到了这个问题？
• 而且，不是我要您使用它，而是为了测试目的-您是否使用maven而不是gradle尝试了相同的设置？
• 您如何在Java中使用日历。您可以显示实现示例代码吗？

,

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

我怀疑，由于严格模式，该变量未在全局范围内声明，因此无法在executeJs中使用。如果有必要这样做，则需要创建一个JavaScript文件，将变量添加到window，然后使用@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。