typescript - npm'i maven klasör yapısını ve war dağıtımını kullanacak şekilde nasıl yapılandırılır

İlk saf front-end projemi başlattım. Bunu Java/Maven ile dağıtmak istiyorum. Bu yüzden normal bir WAR projesi kurdum:

│   package.json
│   pom.xml
│   tsconfig.json
│   typings.json
│
│
├───src
│   └───main
│       ├───resources
│       └───webapp
│           │   index.html
│           │
│           ├───app
│           │       app.component.ts
│           │       main.ts
│           │
│           ├───css
│           │       styles.css
│           │
│           └───WEB-INF
│                   web.xml
│

Benim sorunum, index.html/in kaynağının package.json'a göre yolunu nasıl ayarlayacağım? Bu bir angular/typescript projesi olduğundan bazı typescript'e özgü şeyler de var. Ama umudum, "source" yolunu package.json'da bir kez ve sonsuza dek ayarlamak.

Ayrıca, derleme adımları olduğundan dolayı bu şeyleri doğrudan "webapp" içinde dağıtmak isteyip istemediğimden de emin değilim. Bu yüzden Maven/war dağıtımı için bir ön yüz projesini nasıl yapılandırılacağı konusunda her türlü tavsiye memnuniyetle karşılanır.

Cevap #1

NPM'i Maven ile entegre etmek için, bence derleme adımlarınız için harika bir araç olacak frontend-maven-plugin'i kullanabilirsiniz.

Yani, her şeyi birlikte yapılandırmak için pom.xml dosyanızın böyle görünmesi gerekir:

<project xmlns="http://maven.apache.org/POM/4.0.0" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>

    <groupId>group.id</groupId>
    <artifactId>artifact-id</artifactId>
    <version>2.0.14-SNAPSHOT</version>

    <name>Artifact Name</name>

    <packaging>war</packaging>

    <!-- Plug-in definition -->
    <build>
        <plugins>
            <!-- frontend-maven plug-in -->
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>0.0.29</version>
                <configuration>
                    <nodeVersion>v5.10.1</nodeVersion>
                    <npmVersion>3.8.6</npmVersion>
                    <installDirectory>target</installDirectory>
                    <workingDirectory>${basedir}</workingDirectory>
                </configuration>
                <executions>
                    <!-- install node & npm -->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                    </execution>

                    <!--npm install -->
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <!-- npm run build -->
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <!-- Maven WAR plug-in -->
            <plugin>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

Görüldüğü gibi, önce frontend-maven-plugin kullanımını tanımlıyoruz:

  • En güncel kararlı NodeJS sürümünü kullanıyoruz: v5.10.1;
  • NPM'in en güncel sürümü: 3.8.6;
  • Eklenti NodeJS ve NPM'i indirdiği ve kurduğu için, kurulum dizinini (installDirectory) belirtmek gerekiyor. Ben her şeyi Maven'in target dizininde saklamayı tercih ettim;
  • o zaman çalışma dizinini (workingDirectory) tanımlamak gerekir, ki bu temelde package.json dosyamızın bulunacağı dizindir. Sizin durumunuzda, pom.xml dosyanızla aynı seviyede olacak, bu yüzden bunun için $ {basedir} kullanıyoruz;

  • takiben, işlemleri tanımlamak gerekli olacaktır: ilk ikisi bence oldukça basit; sonuncusu ise basitçe, package.json dosyanızın içinde build adında bir script hedefi olduğunu varsayar; bu örneğin, bir bundle.js dosyası oluşturmak için browserify komutunu çağıracaktır:

    "scripts": {
    "build": "browserify src/main/webapp/app.js -o src/main/webapp/modules/bundle.js"
}

    Sizin durumunuzda, app.js yerine, package.json typescript dosyalarınızla etkileşimde bulunacaktır.

Sonunda, Maven WAR eklentisinin tanımı yapılmış oluyor. Yapılan tek yapılandırma, web.xml dosyasının bulunduğu yerin belirtilmesiydi.

Tanım gereği, Maven'in src/main/webapp dizininin içindeki her şeyi paketleyeceğine dikkat edin. Yani, hariç tutmak istediğiniz herhangi bir dosya (veya klasör) varsa, <packagingExcludes> yapılandırma parametresini kullanmalısınız:

<!-- Maven WAR plug-in -->
<plugin>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
        <webXml>src/main/webapp/WEB-INF/web.xml</webXml>
        <packagingExcludes>app/**</packagingExcludes>
    </configuration>
</plugin>

Yukarıdaki yapılandırma app klasörünü dışlayacaktır.

Tekrar, bu bir başlangıç noktasıdır. Buradan, uygulamanızı özel olarak oluşturmak için Maven ile oynayabilirsiniz.

İlgili makaleler