Maven で CoffeeScript を使用する

Java JavaScript CoffeeScript Node.js

Maven を使った Web アプリケーションで CoffeeScript を使うためのプラグイン coffee-maven-plugin をご紹介します。

coffee-maven-plugin を利用するには pom.xml ファイルに以下のようなプラグイン設定を追加します。

coffee-maven-plugin の設定例
<plugin>
  <groupId>com.theoryinpractise</groupId>
  <artifactId>coffee-maven-plugin</artifactId>
  <version>1.4.0</version>
  <configuration>
    <coffeeOutputDirectory>
      ${project.build.directory}/${project.build.finalName}/js
    </coffeeOutputDirectory>
  </configuration>
  <executions>
    <execution>
      <id>coffee</id>
      <goals>
        <goal>coffee</goal>
      </goals>
    </execution>
  </executions>
</plugin>

coffee-maven-plugin はデフォルトで src/main/coffee ディレクトリ内の .coffee ファイルをビルドして target/coffee ディレクトリに .js ファイルを出力するようになっており、このままでは war ファイルに .coffee から生成された .js が含まれません。

そのため、上記例では coffeeOutputDirectory で target//js に .js ファイルを出力するように変更しています。

Maven + CoffeeScript のサンプル Web アプリケーション

それでは Maven で CoffeeScript を使った簡単なサンプルを作成してみます。

Java の Web アプリケーションを想定していますが、web.xml やサーブレット等の作成は省きました。

ソースは http://github.com/fits/try_samples/tree/master/blog/20120216/


pom.xml ファイルは以下の通りです。
今回は web.xml ファイルを省いたので failOnMissingWebXml に false を設定しています。

pom.xml
<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/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>fits.sample</groupId>
  <artifactId>mvn_coffee</artifactId>
  <packaging>war</packaging>
  <version>1.0.0</version>
  <name>mvn_coffee</name>
  <url></url>
  <build>
    <finalName>mvn_coffee</finalName>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.1.1</version>
        <configuration>
          <!-- web.xml が無くても war ファイル化を実行するための設定  -->
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
      <!-- CoffeeScript -->
      <plugin>
        <groupId>com.theoryinpractise</groupId>
        <artifactId>coffee-maven-plugin</artifactId>
        <version>1.4.0</version>
        <configuration>
          <!-- war ファイルに .coffee 変換後の .js ファイルを含めるために
               出力先を変更 -->
          <coffeeOutputDirectory>
            ${project.build.directory}/${project.build.finalName}/js
          </coffeeOutputDirectory>
        </configuration>
        <executions>
          <execution>
            <id>coffee</id>
            <goals>
              <goal>coffee</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
</project>

CoffeeScript のソースファイルを src/main/coffee 内に作成します。

src/main/coffee/sample.coffee
$(->
    message = "sample"
    $("#message").text "#{message} !!"
)

最後に sample.coffee から生成される sample.js を使用する HTML ファイルを用意します。

src/main/webapp/index.html
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/sample.js"></script>
<body>
<h2 id="message">Hello World!</h2>
</body>
</html>

以下のように Maven でビルドすると sample.coffee から target/mvn_coffee/js/sample.js が生成され、mvn_coffee.war ファイルに格納されます。

ビルド例
> mvn package

あとは Tomcat 7.0 等にデプロイすれば動作確認できます。