从 POM 文件开始

其实 gradle 也是大同小异, 就不再一一介绍了, 就从 maven 文件下手吧

其实最关键的就是在已有的 SpringBoot 项目中, 添加一个整合 React 的 plugin.

这个 plugin 的名称就是 frontend-maven-plugin, 配置安装 node/npm/webpack:

<plugin>
    <groupId>com.github.eirslett</groupId>
    <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.2.1</nodeVersion>
                <npmVersion>3.9.3</npmVersion>
            </configuration>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>build</id>
            <goals>
                <goal>webpack</goal>
            </goals>
        </execution>
    </executions>
</plugin>

剩下的就是配置 webpack了, 指定入口文件和编译器是关键. 这样在 spring-boot:run 的时候, 就会执行 build, 也就是 webpack 的 build, 会将你指定的路径文件, 编译到指定的输出文件中.

文件包结构

其他引用

之后你可以单独在 package.json 文件中定义 npm build 的 script, 以此来添加 eslint 等等检查, 或者其他 task.

如果需要一些源码或者配置详情, 请留言哟~

2020年4月更新回复：

抱歉各位小伙伴， 这个项目已经过去比较久远了，源码已经掉了，当时也没有放github之类的平台。抱歉哈。

其实原理很简单， 就是利用maven那个插件去调用node的命令，进而把前端编译好并且输出到制定目录。