LoginSignup
60

More than 5 years have passed since last update.

Eclipseでシームレスなサーバーサイドとフロントエンド開発

Last updated at Posted at 2017-02-06

1. 背景

最近、Spring Frameworkを使用したプロジェクトをやっています。
サーバーサイド側のJavaはEclipseでの開発をおこなっておりますが、
フロントエンドにJavascriptのフレームワークであるVue.jsを採用することとなったため
フロントエンド側ではnpm + webpackを使用した開発環境になります。

2つの環境を使い分けるのは不便であるため、EclipseでもJavascriptの編集及びトランスパイルを行う方法を探しました。

2. 本記事でできること

Eclipse上でJavaとJavascriptの編集を行い、Javascriptのトランスパイル結果がEclipseに反映されますので
ビルド後はブラウザの更新によりJavascriptの修正内容が反映されます。

方法として、
1. webpack --watchの結果をEclipseに反映させる
2. Eclipseのビルダーを作成してwebpackによるトランスパイルを行う
の2つの方法を紹介します。

以降の作業は、下記の環境ができているものとして記事を進めます。

  • Eclipse Neon2
  • Buildship:Gradle用プラグイン、JDT,
  • node.js + vue-cli

設定後のプロジェクトサンプル
https://github.com/euledge/spring-vue-sample

3. サンプルの準備

3.1. サーバーサイド側のSpringソースの準備

サーバー側では、SpringBootを使用して静的ページをデプロイします。

Spring Initializr でボイラーテンプレートを作成します。

左側のDependenciesに「web」「DevTools」を入力して「Generate Project」をクリックします。
プロジェクトソースをダウンロードして任意のフォルダで展開します。

DevToolsをいれておくとEclipseでソースを修正保存したときにホットデプロイができて捗ります

3.2. フロントエンド側のVue.jsソースの準備

vue-cliを使ってボイラーテンプレートを作成します。

vue init webpack-simple 

ソースが出来上がったら、サーバーサイドで展開したプロジェクトフォルダの中にVue.jsのファイルを配置します。

  • index.htmlは、src/main/resources/staticに移動
  • assets App.vue main.js は src/main/javascriptを作成してその中に移動

3.3. フォルダ構成

上記の作業で下記のようなフォルダ階層になります。

.babelrc
.gitignore
.build.gradle
 gradlew
 gradlew.bat
 package.json
 README.md
 webpack.config.js
 src
  └─main
     ├─java
     │  └─com
     │      └─example
     │              VuetestApplication.java
     │
     ├─javascript
     │  │  App.vue
     │  │  main.js
     │  │
     │  └─assets
     │        logo.png
     │
     └─resources
         │  application.properties
         │
         ├─static
         │  │  index.html
         │  │
         │  └─dist <== webpackにより出力されるフォルダ
         │        build.js
         │        build.js.map
         │        logo.png
         │
         └─templates

3.3. Eclipseにプロジェクトを取り込む

Gradleプロジェクトの取り込みでEclipseに取り込みます。


4. EclipseでJavascriptを編集するための設定

Eclipseでmain.jsをエディタで表示すると 1-2行目の import文でエラーとなってしまいます。
モデュールとして認識させるため以下の設定を行います。

4.1. プロジェクトファセットにJavascriptを追加

プロジェクトのプロパティで「プロジェクト・ファセット」を選択し「JavaScript」にチェックを入れて「OK」をクリックする。

4.2. バリデーターの設定

ワークスペースの設定またはプロジェクトのプロパティで「Javascript」→「検証」を選択しソースタイプを「モジュール」に変更して「OK」をクリックする。

5. Webpackでトランスパイルする設定

配置したVue.jsのファイルに対してwebpack.configの entry, outputのフォルダを調整します。

webpack.config
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main/javascript/main.js',
  output: {
    path: path.resolve(__dirname, './src/main/resources/static/dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
以下略 ...

6. Eclipseで外部で変更されたファイルを自動認識する

まずはEclipse外でトランスパイルをして変更されたファイルをEclipseに認識させる方法です。
利用方法としてはEclipseと別にターミナルを開いて、Webpackでファイルの変更監視をして
トランスパイルされたファイルをEclipseに認識させファイルツリーに反映させます。

6.1. Eclipseによるファイルの変更監視の設定

Eclipseのエディタ以外で変更されたファイルをEclipseのファイルツリーに自動で反映させるには

Eclipseの環境設定 -> 一般 -> ワークスペース にある

  • ネイティブフックまたはポーリングを利用してリフレッシュ
  • アクセス時にリフレッシュ

の2つにチェックを入れます。

6.2. npmタスクの設定

webpackによるファイル監視タスクを追加します。

scripts に watchタスクを追加します。
NODE_ENVについては、productionでもdevelopmentでもご自由にどうぞ

package.json
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=production webpack --progress --watch"
  },
以下略 ...

ターミナルを開いて

npm run watch

としておくことで、webpackによるトランスパイルを行い、eclipseのファイルツリーに最新が反映されます。


7. Eclipseの自動ビルドでトランスパイルする

次に紹介するのが今回の目的のJavascriptの変更監視にWebpackを使用しないでEclipseの自動ビルドでトランスパイルをする方法です。

7.1. トランスパイル用のシェル、バッチファイルを作成

トランスパイルするためのシェル、またはバッチファイルを用意しプロジェクトルートに置きます。

npmbuild.bat
npm run build

7.2. npmビルダーの作成

  1. プロジェクトのプロパティで「ビルダー」を選択し「新規」をクリックする。
  2. 「作成する外部ツール・タイプの選択」で「プログラム」を選択して「OK」ボタンをクリックする。
  3. 「起動構成プロパティの編集」ダイアログ上部の「名前」は適当な名前をつける。

7.2.1 メインタブ

  1. 「ロケーション」は先ほど作成したトランスパイル用のシェル、バッチファイルを指定する。
    ${workspace_loc}/${project_name}/npmbuild.bat
  2. 「作業ディレクトリ」はプロジェクトルートを指定する。
    ${project_loc}

7.2.2 リフレッシュタグ

  1. 「完了時にリソースをリフレッシュ」にチェックを入れる。
  2. 「特定のリソース」を選択し、「リソースの指定」でトランスパイルで出力されるフォルダを指定する。また「再帰的にサブフォルダを組み込む」にチェックを入れる。

7.2.3 ビルドオプション

  1. 「手動ビルド中」、「自動ビルド中」にチェックを入れる。
  2. 「関連するリソースのワーキングセットを指定」にチェックを入れ、「リソースの指定」でjavascriptのソースフォルダを指定する。

7.2.4 ビルダの順番を変える

作成したビルダーはJavaビルダーの前になるように順番を入れ替えます。
これで反映できなかったら、「6.1. Eclipseによるファイルの変更監視の設定」を試してみてください。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
60