스프링부트(spring boot) javascript 의존성 관리

javascript module

웹 개발을 할 때 javascript 는 필수적으로 사용되는데, module을 관리하는 방법은 방법이 다양합니다.

CDN을 통해서 import 하거나 js를 직접 다운받아서 프로젝트에 포함하는 방법도 있겠지만 플러그인을 통해서 javascript library를 관리하는 방법을 기술합니다.

 

Maven

frontend-maven-plugin 라이브러리 사용

https://github.com/eirslett/frontend-maven-plugin

eirslett/frontend-maven-plugin

 

설치

plugin을 추가해줍니다. 여기서 version은 mavenrepository에 있는 버전으로 선택하겠습니다.

<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>LATEST_VERSION</version>
        ...
    </plugin>
...

 

node npm 설치 실행코드를 plugin 태그 안에 넣어줍니다.

<plugin>
    ...
    <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>v4.6.0</nodeVersion>

        <!-- optional: with node version greater than 4.0.0 will use npm provided by node distribution -->
        <npmVersion>2.15.9</npmVersion>
        
        <workingDirectory>src/main/resources/static</workingDirectory>
    </configuration>
</plugin>

 

npm install 실행 코드를 넣어줍니다.

<execution>
    <id>npm install</id>
    <goals>
        <goal>npm</goal>
    </goals>

    <!-- optional: default phase is "generate-resources" -->
    <phase>generate-resources</phase>

    <configuration>
        <!-- optional: The default argument is actually
        "install", so unless you need to run some other npm command,
        you can remove this whole <configuration> section.
        -->
        <arguments>install</arguments>
    </configuration>
</execution>

 

Gradle

위의 frontend-maven-plugin은 Maven용 라이브러리로 Gradle에서는 적용할 수 없습니다.

org.siouan.frontend 라이브러리를 사용합니다.

 

https://plugins.gradle.org/plugin/org.siouan.frontend

Gradle - Plugin: org.siouan.frontend

 

plugin 설정

저는 JDK 11을 사용했습니다 아래 코드중 맞는 JDK를 선택하면 됩니다

(참고로 Kotlin Gradle에서 작성했습니다)

plugins {
    // For JDK 11+
    id("org.siouan.frontend-jdk11") version "5.1.0"
    // For JDK 8+
    id("org.siouan.frontend-jdk8") version "5.1.0"
}

 

환경설정

플러그인 동작시 적용할 환경설정을 작성합니다(아래 링크참고)

https://siouan.github.io/frontend-gradle-plugin/configuration/

Configuring Gradle to build a frontend application with node

 

저는 간단하게 의존성만 관리할 것이므로 아래와같이 설정했습니다.

nodeVersion.set("14.15.5")
	nodeInstallDirectory.set(project.layout.projectDirectory.dir("src/main/resources/static/node"))
	packageJsonDirectory.set(file("${project.layout.projectDirectory.dir("src/main/resources/static")}"))
	assembleScript.set("run assemble")

nodeVersion: node의 version을 설정합니다. 최소 6.2.1 이상을 사용해야합니다.

nodeInstallDirectory: node가 설치될 위치를 지정합니다.

packageJsonDirectory는 node의 package.json의 위치를 지정해줍니다.

 

package.json scripts

Gradle Task를 보면 frontend가 추가되어있습니다. 위와같은 동작을 순서대로 실행합니다.

build.gradle의 frontend에 필요한 Task들을 기술하고 package.json의 scripts영역에 수행할 명령어를 입력해줍니다.

위의 코드를 예시로 들면 assembleScript가 수행되면서 package.json 의존성 라이브러리가 설치되고 assemble scripts를 실행합니다.

 

예제 사이트

https://github.com/siouan/frontend-gradle-plugin/tree/master/examples

siouan/frontend-gradle-plugin

 

 

실행결과

reference

• GitHub - eirslett/frontend-maven-plugin: "Maven-node-grunt-gulp-npm-node-plugin to end all maven-node-grunt-gulp-npm-plugins." A Maven plugin that downloads/installs Node and NPM locally, runs NPM install, Grunt, Gulp and/or Karma.