更新:14.2版本不存在问题
Vaadin 14.2和16已经更改,现在在Maven驱动的项目中自动包含必要的npm工具,无需手动安装Node.js和npm。
引用这篇博客文章:
自动安装Node.js
从14.2和16版本开始,Node.js安装(包括npm)会自动发生。它安装到主文件夹内的.vaadin
文件夹中,并在所有Vaadin项目中重复使用。与以前一样,Node仅用于构建前端部分;在部署生产后不会运行!
并进一步改进:pnpm代替npm。
前端依赖管理,只需要用pnpm - pnpm
在幕后,自14.0版本以来,npm已被用于管理前端依赖项。现在,我们增加了对
pnpm的支持,它引入了以下好处:
1.与本地计算机和CI系统上的npm相比,构建时间更短,因为
pnpm仅下载包一次并从本地缓存中重复使用。
2.在更新项目中的Vaadin版本时,无需删除package.json、锁定文件或node_modules文件夹。
在14.2版本中,默认仍使用npm,但我们鼓励您测试pnpm并给我们反馈。尝试pnpm很容易:只需使用配置属性或Maven插件配置启用它即可,无需迁移。您可以在
这里了解更多关于pnpm的信息。Vaadin 16将默认使用pnpm。
我已经验证了这个功能很好。现在我已经手动从我的Mac中删除了Node.js/npm安装。
tl;dr
Vaadin 14团队希望您在计算机上安装Node.js和npm工具。
作为替代方案,Vaadin 14与Node.js / npm似乎可以通过frontend-maven-plugin
工具在您的项目中自动安装(而不是全局安装在您的计算机上)。 您可以在Maven POM文件中指定。请查看下面的XML片段以获取有关您的POM的详细信息。
如果您更喜欢在计算机上全局安装Mode / npm,请务必阅读Tom Novosad的other Answer。
Details
![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/320px-Npm-logo.svg.png)
![](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/320px-Node.js_logo.svg.png)
截至Vaadin 14,
Vaadin团队正在切换:
…作为他们从Polymer 2向Polymer 3过渡的一部分。
详见博客文章Bower and npm in Vaadin 14+。
希望作为Vaadin-on-Java用户,我们不需要关心这些底层技术细节......但有一件事:不幸的是,默认情况下,
npm和Node.js工具是必需的,但未绑定在您的Vaadin项目中。
你有两个解决方案:
我更喜欢后者。而且我更喜欢Maven自动在我的项目中安装它们,这样我就不用手动进行太多的维护。
注意:我不知道我的每个项目解决方案的限制或影响。我几乎不知道node/npm的目的或性质,并不知道Vaadin如何使用它们。所以请自行决定是否使用此解决方案。我只能说,它对我来说似乎是有效的。
将
frontend-maven-plugin
添加到您的项目中
frontend-maven-plugin
工具可被Maven用于下载并安装Node.js与npm到您的Vaadin项目中。
打开Vaadin项目中的Maven POM文件。
将以下块添加到该POM的
<build> <defaultGoal>jetty:run</defaultGoal> <plugins>
元素内。
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
</executions>
<configuration>
<nodeVersion>v10.16.3</nodeVersion>
</configuration>
</plugin>
当然,您可以调整那段代码以使用最新的版本号。请查看
Node.js页面以获取最新版本号。
请注意,我们将
npm
项注释掉了,因为该工具已捆绑在最新版本的Node.js中。
剩下的步骤:
1. 在IntelliJ中的
Maven
面板中运行名为
clean
和
install
的
Lifecycle
项目。等待一会儿,因为会下载和配置更多的项目。(在您的控制台历史记录中注意到"Installing node version v10.16.3")。
2. 在相同的面板中,在
Plugins
>
jetty
部分中,运行
jetty:run
项。稍等片刻,因为Jetty服务器启动以运行您的Vaadin应用程序。
在控制台上,您应该会看到类似于这样的内容(所有Vaadin版本都有一个
神秘的Quiet Time
警告):
[INFO] Started Jetty Server
[INFO] Using Non-Native Java sun.nio.fs.PollingWatchService
[WARNING] Quiet Time is too low for non-native WatchService [sun.nio.fs.PollingWatchService]: 1000 < 5000 ms (defaulting to 5000 ms)
- 在浏览器中输入:
http://localhost:8080/
,即可看到“Click Me” 按钮,表示您的应用程序成功运行。
这个解决方案来自 frontend-maven-plugin
的项目页面。请注意,那里的示例 POM 片段不正确,并未将 <execution>
标签包装在复数的 <executions>
标签内。我已经在那里提交了ticket # 838。
您可能想要在 Vaadin 论坛中关注 this discussion。
供您参考,这是一个完整的 POM 文件,可与您的进行比较。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>work.basil.example</groupId>
<artifactId>acme</artifactId>
<name>acme</name>
<version>2.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<maven.compiler.source>13</maven.compiler.source>
<maven.compiler.target>13</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<failOnMissingWebXml>false</failOnMissingWebXml>
<vaadin.version>14.0.5</vaadin.version>
<drivers.downloader.phase>pre-integration-test</drivers.downloader.phase>
</properties>
<repositories>
<repository>
<id>central</id>
<url>https://repo1.maven.org/maven2/</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
<repository>
<id>Vaadin Directory</id>
<url>https://maven.vaadin.com/vaadin-addons</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>central</id>
<url>https://repo1.maven.org/maven2/</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<type>pom</type>
<scope>import</scope>
<version>${vaadin.version}</version>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin</artifactId>
<exclusions>
<exclusion>
<groupId>com.vaadin.webjar</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.insites</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.polymer</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.polymerelements</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.vaadin</groupId>
<artifactId>*</artifactId>
</exclusion>
<exclusion>
<groupId>org.webjars.bowergithub.webcomponents</groupId>
<artifactId>*</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-testbench</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<defaultGoal>jetty:run</defaultGoal>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.1</version>
</plugin>
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.4.19.v20190610</version>
<configuration>
<scanIntervalSeconds>2</scanIntervalSeconds>
<webAppConfig>
<allowDuplicateFragmentNames>true</allowDuplicateFragmentNames>
</webAppConfig>
</configuration>
</plugin>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.version}</version>
<executions>
<execution>
<goals>
<goal>prepare-frontend</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
</executions>
<configuration>
<nodeVersion>v10.16.3</nodeVersion>
</configuration>
</plugin>
</plugins>
</build>
<profiles>
<profile>
<id>production</id>
<properties>
<vaadin.productionMode>true</vaadin.productionMode>
</properties>
<dependencies>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-server-production-mode</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<executions>
<execution>
<goals>
<goal>build-frontend</goal>
</goals>
<phase>compile</phase>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
<profile>
<id>integration-tests</id>
<build>
<plugins>
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.4.19.v20190610</version>
<configuration>
<scanIntervalSeconds>0</scanIntervalSeconds>
<stopPort>8081</stopPort>
<stopWait>5</stopWait>
<stopKey>${project.artifactId}</stopKey>
</configuration>
<executions>
<execution>
<id>start-jetty</id>
<phase>pre-integration-test</phase>
<goals>
<goal>deploy-war</goal>
</goals>
</execution>
<execution>
<id>stop-jetty</id>
<phase>post-integration-test</phase>
<goals>
<goal>stop</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-failsafe-plugin</artifactId>
<version>3.0.0-M3</version>
<executions>
<execution>
<goals>
<goal>integration-test</goal>
<goal>verify</goal>
</goals>
</execution>
</executions>
<configuration>
<trimStackTrace>false</trimStackTrace>
<enableAssertions>true</enableAssertions>
<systemPropertyVariables>
<webdriver.chrome.driver>${webdriver.chrome.driver}</webdriver.chrome.driver>
</systemPropertyVariables>
</configuration>
</plugin>
<plugin>
<groupId>com.lazerycode.selenium</groupId>
<artifactId>driver-binary-downloader-maven-plugin</artifactId>
<version>1.0.17</version>
<configuration>
<onlyGetDriversForHostOperatingSystem>true
</onlyGetDriversForHostOperatingSystem>
<rootStandaloneServerDirectory>
${project.basedir}/drivers/driver
</rootStandaloneServerDirectory>
<downloadedZipFileDirectory>
${project.basedir}/drivers/driver_zips
</downloadedZipFileDirectory>
<customRepositoryMap>
${project.basedir}/drivers.xml
</customRepositoryMap>
</configuration>
<executions>
<execution>
<phase>${drivers.downloader.phase}</phase>
<goals>
<goal>selenium</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
</profiles>
</project>