0

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

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

(ReferenceError) : 时刻未定义

我看到 FullCalendar Web 组件 jarFullCalendar在包中的类上有这些注释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而不是 just vaadinPrepareFrontend，但这并没有什么不同。

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

更新：如果我明确启用vaadin.productionModein 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(...). 显然，该功能在该范围内是未知的。也许是由于严格模式？不确定这是否解释了为什么它在生产模式下工作。

4

2 回答 2

1

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

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

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

我能够解决这个问题，因为moment它用于创建可解析的日期字符串，但是（至少是当前版本）该库支持由LocalDate#toString.

正如我所怀疑的，由于严格模式，该变量未在全局范围内声明，因此不能在executeJs. 如果有必要这样做，需要创建一个将变量添加到 的 javascript 文件window，并使用@JsModule. window然后可以使用对象中的变量from 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。

于 2020-10-05T08:02:09.593 回答