【问题标题】:How does maven (running under dev profile) include the javascript files inside index.html?maven(在 dev 配置文件下运行)如何在 index.html 中包含 javascript 文件?
【发布时间】:2017-07-14 22:43:28
【问题描述】:

我从 2.0 版开始就没有使用过 jhipster,我目前正在追赶 #4.0.6 版。 当我尝试从命令行通过“./mvnw”(使用默认 dev maven 配置文件)构建初始应用程序时,应用程序 javascript 文件不会添加到 index.html 中(因此该页面出现当我尝试http://localhost:8080 时,我的浏览器中出现空白)。 有人可以向我解释一下通常导致 maven(使用 dev 配置文件运行)将应用程序 javascript 文件包含到 index.html 中的正常事件链吗? 非常感谢您的帮助。 最好的祝福 kbjp

【问题讨论】:

标签: jhipster


【解决方案1】:

我们的工作流程如下,根据选择使用yarn或者npm

  1. 当您生成应用程序时,会生成文件并在最后触发yarn install 任务
  2. package.json中的postInstall脚本在yarn install之后触发,这一步调用webpack:build任务
  3. 现在您应该根据选择的构建工具生成并编译到targetbuild 文件夹内的www 文件夹中的所有文件
  4. 现在运行 mvnwgradlew 将启动后端并且应该可以在 localhost:8080 这也应该服务于从上述步骤编译的前端
  5. 现在,如果您开始进行更改,任何内容都不会反映为未编译,因此您需要在更改后手动运行 webpack:build:dev 或使用实时重新加载运行 yarn start

要么你没有让 postInstall 脚本运行,要么你删除了目标文件夹

您还可以通过传递webpack 配置文件(如mvnw -Pdev,webpack)来强制maven 运行webpack 任务

【讨论】:

  • 很好的答案 Deepu,可能在文档中
  • 嗨,迪普……你成功了!现场!...在最初的项目生成之后,我做了一个“mvn clean install”。话虽如此,为什么前端 maven-plugin (“webpack build dev”)不是开发配置文件的一部分?我不确定其他开发人员,但通常在构建项目时,我会执行“mvn clean install”(清除目标文件夹),而不仅仅是“mvn install”。
【解决方案2】:

虽然我使用的是 gradle,但我刚刚遇到了这个问题。 Deepu's answer 也为我解决了所有问题。为了强制 gradle 在清理后运行 webpackBuildDev 任务(构建缺少的 www 目录),我添加了这个:

processResources {
  doLast {
    if (!new File("$buildDir/www").exists()) webpackBuildDev.exec()
  }
}

大概这实现了与前端 maven-plugin 相同的功能。

【讨论】:

  • 这段代码你在哪里写的?你能解释一下吗?
  • 那在顶层的 build.gradle 中。当且仅当www 目录不存在时,它更新processResources 任务(发生在编译/打包之前)以运行webpackBuildDev 任务。本质上,“如果从未构建过 webpack,则构建一次”。
【解决方案3】:

构建网络资产(图像、html、打字稿等)的单个命令是

yarn webpack:build

此命令会将网络资源放在需要的位置,即build/www

【讨论】:

    【解决方案4】:

    德普的回答很好地涵盖了主要的概念方面。我想添加我的两分钱,基于遇到类似的问题,特别是与 Maven。我们知道默认的首选 JHipster 样式是使用两个终端,一个使用 ./mvnw,一个使用 yarn start。

    但是,在我们的项目中,我们有时只专注于一些后端工作并在单个终端中运行 ./mvnw,并期望前端始终可用。尽管无论出于何种原因(eclipse 或 maven clean 步骤等),前端构建的人工制品可能不会始终存在于 /target/www 中。

    因此,为了确保我们在单终端中运行 ./mvnw 并始终构建前端,我将 maven dev 配置文件更新如下。基本上添加了调用 yarn install 的前端构建插件(这会传递运行 yarn run webpack:build 步骤作为脚本的一部分,而无需运行开发服务器)和 test 。这对我有用。

    <profile>
        <id>dev</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-undertow</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>
        </dependencies>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-war-plugin</artifactId>
                    <configuration>
                        <warSourceDirectory>src/main/webapp/</warSourceDirectory>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>${frontend-maven-plugin.version}</version>
                    <executions>
                        <execution>
                            <id>install node and yarn</id>
                            <goals>
                                <goal>install-node-and-yarn</goal>
                            </goals>
                            <configuration>
                                <nodeVersion>${node.version}</nodeVersion>
                                <yarnVersion>${yarn.version}</yarnVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>yarn install</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <configuration>
                                <arguments>install</arguments>
                            </configuration>
                        </execution>
                        <execution>
                            <id>webpack build test</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <phase>test</phase>
                            <configuration>
                                <arguments>run webpack:test</arguments>
                            </configuration>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>
        <properties>
            <!-- log configuration -->
            <logback.loglevel>DEBUG</logback.loglevel>
            <!-- default Spring profiles -->
            <spring.profiles.active>dev${profile.no-liquibase}</spring.profiles.active>
        </properties>
    </profile>
    

    【讨论】:

      猜你喜欢
      • 2011-01-06
      • 1970-01-01
      • 2019-08-03
      • 1970-01-01
      • 1970-01-01
      • 2017-06-04
      • 2011-07-09
      • 1970-01-01
      • 2013-07-06
      相关资源
      最近更新 更多