前端React项目自动编译插件--frontend-maven-plugin

一时失言乱红尘 2021-09-20 15:44 946阅读 0赞

frontend-maven-plugin官网地址：[https://github.com/eirslett/frontend-maven-plugin][https_github.com_eirslett_frontend-maven-plugin]

frontend-maven-plugin插件支持在maven中实现前后端项目的统一打包构建，并且不影响本地前端的调试和编译。

在项目pom.xml中，引入插件：

<plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>1.8.0</version>
                    <executions>
                        <execution>
                            
                            <id>install node and yarn</id>
                            <goals>
                                <goal>install-node-and-yarn</goal>
                            </goals>
                            
                            <phase>generate-resources</phase>
                        </execution>
                        <execution>
                            <id>yarn install</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <configuration>
                                <arguments>install</arguments>
                            </configuration>
                        </execution>
                        <execution>
                            <id>yarn build</id>
                            <goals>
                                <goal>yarn</goal>
                            </goals>
                            <configuration>
                                <arguments>build</arguments>
                            </configuration>
                        </execution>
                    </executions>
                    <configuration>
                        <workingDirectory>src/main/antd</workingDirectory>
                        <nodeVersion>v10.16.2</nodeVersion>
                        
                        <yarnVersion>v1.17.3</yarnVersion>
                        
                        <nodeDownloadRoot>https://npm.taobao.org/dist/</nodeDownloadRoot>
                        <yarnDownloadRoot>https://npm.taobao.org/mirrors/yarn/</yarnDownloadRoot>
                    </configuration>
                </plugin>

注意设置正确的<workingDirectory>，node和yarn或者npm的下载链接如果官方的链接下载速度很慢的话，可以使用淘宝的镜像地址。frontend-maven-plugin插件会在maven第一次运行中下载Node和yarn以及install组件，下载成功后，后续maven运行就不会在下载，接着执行yarn build命令，将jsx文件编译成js + css。

[https_github.com_eirslett_frontend-maven-plugin]: https://github.com/eirslett/frontend-maven-plugin