React とか Gradle とか

Mac に Java と Node と Gradle と React 突っ込んで連携させようとしたメモ

Homebrew 話はそれからだ

インストールは超簡単 ここ 見てコピペすればok

次はJavaだ

最近バージョアップでゴタゴタ感のある Java だけど、Oracle に付き添う気はないので、Zulu にしたい。
が、個人的には環境も組み替えたいので、

$ brew install jenv
... なんか色々
$ jenv --version
jenv 0.4.4

忘れないうちに .bash_profileã‚‚

export JENV_ROOT="$HOME/.jenv"
if [ -d "${JENV_ROOT}" ]; then
  export PATH="$JENV_ROOT/bin:$PATH"
  eval "$(jenv init -)"
fi

次に ZuliJava をダウンロード+インストール。

迷わず最新。

$ java -version
openjdk version "11.0.1" 2018-10-16 LTS
OpenJDK Runtime Environment Zulu11.2+3 (build 11.0.1+13-LTS)
OpenJDK 64-Bit Server VM Zulu11.2+3 (build 11.0.1+13-LTS, mixed mode)

そしたらコレを jenv の配下に入れる。

$ /usr/libexec/java_home -V
Matching Java Virtual Machines (1):
    11.0.1-zulu-11.2+3, x86_64:    "Zulu 11"    /Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

$ mkdir -p ~/.jenv/versions
$ jenv add /Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
openjdk64-11.0.1 added
11.0.1 added
11.0 added
$ jenv global openjdk64-11.0.1
$ jenv rehash

流れで Greadle

コレは Homebrew から入る。

$ brew install gradle

これ以上何を書くことがあろうか？

nodeJS をブチ込む

これもバージョン管理したいので、nodebrew を突っ込む

$ brew install nodebrew
...いろいろ
$ vim .bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH #←追記
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

これで準備完了。

$ nodebrew ls-remote
v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6    
v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
...
v11.0.0   v11.1.0   v11.2.0   v11.3.0   v11.4.0   v11.5.0  
...
$ nodebrew install v11.5.0 
Fetching: https://nodejs.org/dist/v11.5.0/node-v11.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
$ nodebrew ls
v11.5.0

current: none
$ nodebrew use v11.5.0
use v11.5.0
$ node --version
v11.5.0

これも完了。

失敗ログ（YeaomanでReact+Gradleだー!）

Yeaoman ヨーマン先生はこれ。
プロジェクトテンプレートジェネレータと呼ばれるもので、色々面倒なプロジェクトの初期設定をやってくれる。

$ npm install -g yo

調べてみると…むぅちょっと古いな…大丈夫か？
やってみたけど、古すぎてライブラリがなくてコケる…

React をスクラッチ

以下のサイトをみながら、プロジェクトを作成。

blog.usejournal.com

ここまでで http:localhost:3000 にアクセスするとこんな感じ

Gradle から連携

plugins {
    id 'java'

    id "com.moowork.node" version "1.2.0"

    id 'org.springframework.boot' version '2.1.1.RELEASE'
}

Plugins に com.moowork.node を突っ込むと、npm_command が使えるようになるので、package.json に

  "scripts": {
    "compile": "webpack",
    ...

なんて書き込んでおいて、build.gradle 最終行で

// Build before resouerces
classes.dependsOn npm_run_compile

こんな風にしておけば、コンパイル実行時に、npm run compile が実行され、JavaScript がコンパイルされるようになる。
あとは webpack.config.js を弄って、publish リソースディレクトリに放り込んでやればよい。