node.js - 新的Vaadin 14应用程序无法运行，错误“无法确定' Node '工具。”缺少Node.js和npm工具

Question

选择“纯Java Servlet”选项后，我使用Get Started页创建了新的Vaadin 14应用程序。

该网页成功下载了我解压缩的.zip文件，并使用IntelliJ Ultimate Edition 2019.2。打开。我等了几分钟，Maven才开始做，下载并重新配置了项目。最终，我转到IntelliJ中的Maven面板，并运行Lifecycle项clean和install。

我在控制台上收到以下错误消息。

[ERROR] Failed to execute goal com.vaadin:vaadin-maven-plugin:14.0.0:prepare-frontend (default) on project acme: Execution default of goal com.vaadin:vaadin-maven-plugin:14.0.0:prepare-frontend failed: 
[ERROR] 
[ERROR] ======================================================================================================
[ERROR] Failed to determine 'node' tool.
[ERROR] Please install it either:
[ERROR]   - by following the https://nodejs.org/en/download/ guide to install it globally
[ERROR]   - or by running the frontend-maven-plugin goal to install it in this project:
[ERROR]   $ mvn com.github.eirslett:frontend-maven-plugin:1.7.6:install-node-and-npm -DnodeVersion="v10.16.0" 
[ERROR] ======================================================================================================

请参见 discussion on Vaadin Forum。

我提交了 Ticket # 6262 Configure Maven to automatically install Node.js & npm，向Vaadin团队建议要求并忽略Node.js和npm是一个问题。

Answer 1

更新：14.2中未发行

Vaadin 14.2和16已更改为现在在Maven驱动的项目中自动包含必需的npm工具。无需手动安装Node.js和npm。

引用this blog post：


自动安装Node.js

从版本14.2和16开始，Node.js安装（包括npm）自动进行。它安装在主文件夹内的.vaadin文件夹中，并从那里重新用于所有Vaadin项目。和以前一样，Node仅用于构建事物的前端。部署生产后它不会运行！


进一步改进：pnpm代替npm。


可行的前端依赖项管理-PNPM
从14.0开始，在后台使用npm来管理前端依赖项。现在，我们增加了对pnpm的支持，它引入了以下好处：


与本地计算机和CI系统上的npm相比，构建时间更短，因为pnpm仅下载一次软件包并从本地缓存中重新使用它们。
在项目中更新Vaadin版本时，无需删除package.json，锁定文件或node_modules文件夹。


在14.2中，默认情况下仍使用npm，但我们建议您测试pnpm并提供您的反馈。尝试pnpm很容易：无需迁移，只需使用配置属性或Maven插件配置启用它。您可以了解有关pnpm here的更多信息。 Vaadin 16将默认使用pnpm。


我已经验证了此方法的效果。现在，我已经从Mac上手动删除了Node.js / npm安装。



tl; dr

Vaadin 14小组希望您在计算机上安装了Node.js和npm工具。

或者，Vaadin 14似乎正在与Node.js / npm一起工作，该Node.js / npm通过可以在frontend-maven-plugin Maven文件中指定的POM工具自动安装在项目中（而不是在计算机上全局安装）。有关您的POM，请参见下面的XML代码段。

如果您想在计算机上全局安装Mode / npm，请确保阅读Tom Novosad的other Answer。

细节





从Vaadin 14开始，Vaadin team is switching：


来自HTML Imports，Bower和WebJars
使用ES6 Modules到npm，Webpack和Node.js


…作为从Polymer 2到Polymer 3过渡的一部分。

请参阅博客文章Bower and npm in Vaadin 14+。

希望作为Java上Vaadin的用户，我们不需要关心这些基础技术细节...但是，有一件事：不幸的是，npm和Node.js工具是必需的，但默认情况下不捆绑在您的Vaadin项目中。

您有两种解决方案：


全局安装工具。
在您的项目中安装。


我更喜欢后者。而且我更喜欢让Maven在我的项目中自动安装它们，而让我减少手动管理的工作量。

CAVEAT：我不知道我的node / npm-per-project解决方案的局限性或影响。我对节点/ npm的目的或性质几乎一无所知，也不知道Vaadin如何利用它们。因此，使用此解决方案需要您自担风险。我只能说这似乎对我有用。

将frontend-maven-plugin添加到您的项目

Maven可以使用frontend-maven-plugin工具在Vaadin项目中使用npm下载和安装Node.js。

在您的Vaadin项目中打开Maven POM文件。

在该POM的<build> <defaultGoal>jetty:run</defaultGoal> <plugins>元素内添加以下块。

    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <!-- Use the latest released version:
        https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
        <version>1.8.0</version>

        <executions>
            <execution>
                <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
                <id>install node and npm</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <!-- optional: default phase is "generate-resources" -->
                <phase>generate-resources</phase>
            </execution>
        </executions>
        <configuration>
            <nodeVersion>v10.16.3</nodeVersion>

            <!-- optional: with node version greater than 4.0.0 will use npm provided by node distribution -->
            <!--                    <npmVersion>2.15.9</npmVersion>-->

            <!-- optional: where to download node and npm from. Defaults to https://nodejs.org/dist/ -->
            <!--                    <downloadRoot>http://myproxy.example.org/nodejs/</downloadRoot>-->
        </configuration>
    </plugin>

当然，您可以调整该代码段以使用最新版本号。检查 the Node.js page以获取最新版本号。

注意，我们已注释掉 npm项，因为该工具与最新版本的Node.js捆绑在一起。

其余步骤：


在IntelliJ的 Maven面板中，运行名为 Lifecycle和 clean的 install项。请稍等片刻，下载并配置更多项目。 （请注意控制台历史记录中的“安装节点版本v10.16.3”项。）
在同一面板的 Plugins> jetty部分中，运行 jetty:run项。等待Jetty服务器启动以运行Vaadin应用程序，请稍等。


在控制台上，您应该看到类似以下内容（在所有Vaadin发行版中为 mysterious Quiet Time warning is perennial）：

[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)

将您的Web浏览器指向： http://localhost:8080/，以在您的应用成功运行时看到“单击我”按钮。


此解决方案来自Maven插件 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 used by many Vaadin add-ons -->
        <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>
            <!-- Replace artifactId with vaadin-core to use only free components -->
            <artifactId>vaadin</artifactId>
            <exclusions>
                <!-- Webjars are only needed when running in Vaadin 13 compatibility mode -->
                <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>

        <!-- Added to provide logging output as Vaadin uses -->
        <!-- the unbound SLF4J no-operation (NOP) logger implementation -->
        <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>
            <!-- Jetty plugin for easy testing without a server -->
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.19.v20190610</version>
                <configuration>
                    <!-- If using IntelliJ IDEA with autocompilation, this
                    might cause lots of unnecessary compilations in the
                    background.-->
                    <scanIntervalSeconds>2</scanIntervalSeconds>
                    <!-- Use war output directory to get the webpack files -->
                    <webAppConfig>
                        <allowDuplicateFragmentNames>true</allowDuplicateFragmentNames>
                    </webAppConfig>
                </configuration>
            </plugin>

            <!--
                Take care of synchronizing java dependencies and imports in
                package.json and main.js files.
                It also creates webpack.config.js if not exists yet.
            -->
            <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>
                <!-- Use the latest released version:
                https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
                <version>1.8.0</version>

                <executions>
                    <execution>
                        <!-- optional: you don't really need execution ids, but it looks nice in your build log. -->
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <!-- optional: default phase is "generate-resources" -->
                        <phase>generate-resources</phase>
                    </execution>
                </executions>
                <configuration>
                    <nodeVersion>v10.16.3</nodeVersion>

                    <!-- optional: with node version greater than 4.0.0 will use npm provided by node distribution -->
                    <!--                    <npmVersion>2.15.9</npmVersion>-->

                    <!-- optional: where to download node and npm from. Defaults to https://nodejs.org/dist/ -->
                    <!--                    <downloadRoot>http://myproxy.example.org/nodejs/</downloadRoot>-->
                </configuration>
            </plugin>

        </plugins>
    </build>

    <profiles>
        <profile>
            <!-- Production mode is activated using -Pproduction -->
            <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>

                    <!-- Runs the integration tests (*IT) after the server is started -->
                    <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>
                                <!-- Pass location of downloaded webdrivers to the tests -->
                                <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>
                                <!-- use phase "none" to skip download step -->
                                <phase>${drivers.downloader.phase}</phase>
                                <goals>
                                    <goal>selenium</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>
</project>