Fatal编程技术网

Spring mvc 带ReactJS的弹簧靴

spring-mvc reactjs spring-boot

Spring mvc 带ReactJS的弹簧靴,spring-mvc,reactjs,spring-boot,Spring Mvc,Reactjs,Spring Boot,我正在尝试构建一个以ReactJS作为前端的Spring引导应用程序。 我是React JS新手，到目前为止我一直在使用AngularJs和Jquery。因为只要在我的html页面中添加它们作为插件就足够了，所以我从来没有觉得添加这些插件很难。但是说到ReactJS，我发现有很多文件需要在其中生成。现在我的问题是如何生成这些文件，以及Spring boot如何自动加载这些文件。 我目前正在按照下面的链接创建一个spring+reactJS应用程序，下面的链接指向自动加载的文件 有人能给我解释一

我正在尝试构建一个以ReactJS作为前端的Spring引导应用程序。 我是React JS新手，到目前为止我一直在使用AngularJs和Jquery。因为只要在我的html页面中添加它们作为插件就足够了，所以我从来没有觉得添加这些插件很难。但是说到ReactJS，我发现有很多文件需要在其中生成。现在我的问题是如何生成这些文件，以及Spring boot如何自动加载这些文件。 我目前正在按照下面的链接创建一个spring+reactJS应用程序，下面的链接指向自动加载的文件

有人能给我解释一下，或者给我指出一个正确的方向，如何在应用程序中获取这些文件吗。只需从react的网站下载react、react dom和babel库，并将它们放到src/main/resources/static/js文件夹中，然后将它们导入html标记中。对于高级场景，您可能需要npm和webpack本身。用于此类开发的基于Java的工具将具有有限的功能集

可以使用spring boot devtools自动重新加载。只要将它作为一个依赖项包含进来，无论何时通过IDE或mvn编译您的项目，它都会自动重新加载服务器，以便反映您的更改

如果使用maven，可以在mvn compile或mvn spring boot:run上构建react javascript文件

包含在pom.xml中：

    <build>

    <plugins>

        <plugin>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-maven-plugin</artifactId>

        </plugin>

        <plugin>

            <groupId>com.github.eirslett</groupId>   <!--Apache 2.0 https://github.com/eirslett/frontend-maven-plugin/blob/master/LICENSE  -->

            <artifactId>frontend-maven-plugin</artifactId>

            <version>1.2</version>

            <configuration>

                <installDirectory>target</installDirectory>

            </configuration>

            <executions>

                <execution>

                    <id>install node and npm</id>

                    <goals>

                        <goal>install-node-and-npm</goal>

                    </goals>

                    <configuration>

                        <nodeVersion>v6.3.1</nodeVersion>

                        <npmVersion>3.9.2</npmVersion>

                    </configuration>

                </execution>

                <execution>

                    <id>npm install</id>

                    <goals>

                        <goal>npm</goal>

                    </goals>

                    <configuration>

                        <arguments>install</arguments>

                    </configuration>

                </execution>

                <execution>

                    <id>webpack build dev</id>

                    <goals>

                        <goal>webpack</goal>

                    </goals>

                </execution>

            </executions>

        </plugin>

    </plugins>

</build>
您可以参考此项目： 这是我的。 基本上，您可能需要两种模式：开发模式和投影模式。区别在于，开发模式热加载代码。根据您的问题，您对投影模式更感兴趣。您可以使用webpack之类的捆绑工具生成bundle.js，并从index.html引用文件。让我重点介绍上面项目中的一些代码片段： 在webpack.config.js中：

    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../../../src/main/resources/static')
}
在index.html中：

  <body>
<div id="root"></div>
<script src="./bundle.js"></script>
感谢bekce的回复！！！正如我所建议的，我已经开始在html中使用js文件作为插件，但是当我启动springboot时，我看到了“白色标签错误页面”。你能帮我举一个springboot+reactjs helloworld的例子吗？你能帮我把你的项目压缩并发布吗？