2

現在、AngularJs を使用して組み込みサーバー (.jar ファイルにパッケージ化され、Tomcat として実行) 用のフロントエンド/webapp を開発しています。サーバーには、フロントエンドで使用できるようにしたいいくつかの API エンドポイントがあります。

私の現在のアプローチは、webjars を使用して、選択した angularjs バージョンをロードし、webapp フォルダー内にアプリケーションをビルドすることです。構造は次のようになります。

├───src
│   ├───main
│   │   ├───docker
│   │   ├───java
│   │   │   └───com
│   │   │       └───...    
│   │   ├───resources
│   │   └───webapp
│   │       └───public
│   │           ├───css
│   │           └───js
│   │               └───controllers
└───target
    ├───classes
    │   ├───com
    │   │   └───... 
    │   └───public
    │       ├───css
    │       └───js
    │           └───controllers
    ├───generated-sources
    │   └───annotations
    ├───generated-test-sources
    │   └───test-annotations
    └───test-classes
        └───com
            └───...

私が編集しているファイルは src/main/webapp/public フォルダー内にあり、target/classes/public フォルダーに「コンパイル」されています。サーバーの実行中にファイルをリロードしたい場合は、実行する必要がありますRun -> Reload Changed Classes。これは、開発中に適切に機能します。

しかし、最初は「スタンドアロン」の AngularJs 開発から来たので、実際の livereload と、最適化のために js/css ファイルを縮小および連結するビルド チェーン (grunt、bower) に慣れました。

今、私はすでにwro4jを調べており、問題なくセットアップできました。私にとってまだ欠けていることの1つは、ホットリロードです。上記のアプローチでさえ wro4j では機能しなくなったため、アプリケーション全体を再コンパイルして css/javascript または HTML 内の変更を確認するしかありませんでした。これを回避する簡単な方法はありますか？

私の好ましい方法は、開発中（サーバーをデバッグで実行中）に非縮小/非連結バージョンで作業し、アプリケーションがデプロイされたとき（または単に実行中）にのみビルドチェーン全体を実行することです。

私のオプションは何ですか？

4

2 に答える 2

0

私がやったことは、おそらく少しやり過ぎでしたが、他の適切な解決策は見つかりませんでした。

Gruntfile.js (angularjs の yeoman ジェネレーターに基づく) を作成して、livereload およびビルドチェーン機能 (concat、minify など) を使用できるようにしました。これにより、必ずしもサーバーを起動する必要なく、フロントエンドで作業することもできました。このファイルの唯一の「汚いハック」は、そのgrunt builddistフォルダーをフォルダーにコピーし/src/main/resources/staticて、.warファイルに「コンパイル」することです。

ビルド時に必要なコマンドを実行できるように、いくつかの Maven プラグインを使用しました (npm install、bower install、grunt build、grunt clean)。

<plugin>
 <groupId>com.github.eirslett</groupId>
 <artifactId>frontend-maven-plugin</artifactId>
 <version>0.0.22</version> <!-- last version supported by maven 2 -->
 <dependencies>
     <dependency>
         <groupId>org.codehaus.plexus</groupId>
         <artifactId>plexus-utils</artifactId>
         <version>2.1</version>
     </dependency>
 </dependencies>
 <configuration>
     <nodeVersion>v0.10.18</nodeVersion>
     <npmVersion>1.3.8</npmVersion>
     <workingDirectory>src/main/frontend</workingDirectory>
 </configuration>
 <executions>
     <execution>
         <id>install node and npm</id>
         <goals>
             <goal>install-node-and-npm</goal>
         </goals>
         <phase>generate-resources</phase>
     </execution>
     <execution>
         <id>npm install</id>
         <goals>
             <goal>npm</goal>
         </goals>

         <configuration>
             <arguments>install</arguments>
         </configuration>
     </execution>
     <execution>
         <id>bower install</id>
         <goals>
             <goal>bower</goal>
         </goals>

         <configuration>
             <arguments>install</arguments>
         </configuration>
     </execution>
     <execution>
         <id>npm rebuild</id>
         <goals>
             <goal>npm</goal>
         </goals>

         <configuration>
             <arguments>rebuild node-sass</arguments>
         </configuration>
     </execution>
     <execution>
         <id>grunt build</id>
         <goals>
             <goal>grunt</goal>
         </goals>

         <configuration>
             <arguments>build</arguments>
         </configuration>
     </execution>
     <execution>
         <id>npm install before clean</id>
         <goals>
             <goal>npm</goal>
         </goals>

         <phase>clean</phase>

         <configuration>
             <arguments>install</arguments>
         </configuration>
     </execution>
     <execution>
         <id>grunt clean</id>
         <goals>
             <goal>grunt</goal>
         </goals>

         <phase>clean</phase>

         <configuration>
             <arguments>clean</arguments>
         </configuration>
     </execution>
 </executions>
</plugin>

これが私のアプローチに幅広いアイデアを与えることを願っています。これは確かに完璧ではありません。特に、プロジェクト全体のビルド時間がかなり長くなるからです。

于 2016-11-25T21:48:31.590 に答える