MavenでNode.jsをインストールしてwebpackを起動しよう

こんにちは。フリューのジョンです。

最近はプロジェクトで使用できたgulpやwebpackについて勉強しています。

その関連ではありますが、今回はMavenプロジェクトでwebpackを起動するということをやりたいと思います。

Mavenプロジェクトでwebpackを使えるようにする

webpackを使うためには、npmが必要です。そして、npmを使うためにはNode.jsをインストールする必要があります。

そのため、各自Node.jsをインストールして・・・となると、バージョン違いが発生したり・・・環境設定から・・・と、とても大変です。

そのために、frontend maven pluginをつかいます。https://github.com/eirslett/frontend-maven-plugin
このライブラリでは Node.jsのインストールや npm install、webpackの実行ができます。

pom.xmlにpluginを登録します。

<plugins>
    <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.6</version>
    <configuration>
        <nodeVersion>v8.6.0</nodeVersion>
        <environmentVariables>
        <NODE_ENV><!-- 実行時に使われる引数 -->production</NODE_ENV>
        </environmentVariables>
    </configuration>
    <executions>
        <execution>
        <id>install node</id>
        <goals>
            <goal>install-node-and-npm</goal>
        </goals>
        </execution>
        <execution>
        <id>npm install</id>
        <goals>
            <goal>npm</goal>
        </goals>
        </execution>
        <execution>
        <id>webpack build</id>
        <goals>
            <goal>webpack</goal>
        </goals>
        </execution>
    </executions>
    </plugin>
</plugins>

これだけです。そして、

mvn generate-resouces

と叩くとNode.jsがインストールされます。

Node.jsやnpmのインストールはMavenのsetting.xmlを見てproxyを通してくれるのでとても助かります！

しかし、おそらく、プロジェクト直下にpackage.jsonが存在しないという以下のようなwarningが出てくると思います。

[WARNING] npm WARN enoent ENOENT: no such file or directory, open 'プロジェクトディレクトリ/package.json'
[WARNING] npm WARN プロジェクト名 No description
[WARNING] npm WARN プロジェクト名 No repository field.
[WARNING] npm WARN プロジェクト名 No README data
[WARNING] npm WARN プロジェクト名 No license field.

そのため、インストールされたNode.jsのnpmを利用してpackage.jsonを作成しましょう。

helper scriptが用意されておりますので、こちらのnpmファイルかnpm.batファイルをプロジェクト直下に配置します。

https://github.com/eirslett/frontend-maven-plugin/tree/master/frontend-maven-plugin/src/it/example%20project/helper-scripts

そして、プロジェクト直下にて以下コマンドを叩きます。

./npm init

色々聞かれると思いますが、適当で良いです(Githubのレポジトリなどの情報のためです)。終わるとpackage.jsonが作成されています。

次にMavenからwebpackを利用するために、webpackをinstallします。

./npm install --save-dev webpack

終わると、package.jsonに記述がされていると思います。

次にwebpackを使うための記述を記載します。

module.exports = {
  entry: './index.js', // entryとなるjsのファイル名
  output: {
    path:　__dirname + '/dist', // 出力先
    filename: 'bundle.js' // 出力ファイル名
  }
};

こちらはお使いのプロジェクトに合わせて適当に記述してください

以上で設定は終わりです。先ほどのコマンドをもう一度叩いてみてください。