https://progret.hatenadiary.com/entry/2016/11/30/052144

Vue2.0触ろう触ろうと思って触ってなかったので触る。

前にいじったPayara Microのリポジトリで動かしたいので前の記事の続きから書きます。

前提

- npmが入っていること

構成

- Vue 2.0 (2.1.3)
- Webpack (1.13.3)
- TypeScript (2.0.10)
- ESLint (3.11.1)
npmを使って各種ツールを入れます。
とりあえずバージョンをnextとかにして遊ぼうかとも思ったのですが
ハマると面倒なのでreleaseされているモジュールを入れます。

Sは--save
Dは--save-devのショートハンドです。

覚えておくと便利です。

rem vueを入れる
npm i vue -S
rem typescriptとその他ツールを入れる
npm i typescript webpack ts-loader -D
npm i eslint typescript-eslint-parser

VueでHello Worldです。

import * as Vue from "vue";

document.addEventListener('DOMContentLoaded',()=>{
  new Vue({
      el: '#app',
      render(h) {
          return h('h1', 'hello world')
      }
  })
})

TypeScriptといいつつどう見てもJavaScriptしか見えません。

では、bundleツールの準備から。

webpack.config.jsを準備します。
今回はts-loaderを入れます。

const path=require('path')
module.exports = {
  entry: "./src/main/frontend/index.ts",
  output: {
    filename: "./src/main/webapp/bundle.js"
  },
  devtool: "source-map",
  resolve: {
    extensions: ["", ".ts", ".js"]
  },
  module: {
    loaders: [
      { test: /\.ts$/, loader: "ts-loader" }
    ]
  }
};

次にツールの設定です。リンクだけ貼っておきます。

tsconfig.json (TypeScriptの設定)
payara-micro-example/tsconfig.json at 4c7f14769e9e4b0cfbf430584f59bfdc1ef69a55 · Wreulicke/payara-micro-example · GitHub

.eslintrc (eslintの設定)
payara-micro-example/.eslintrc at master · Wreulicke/payara-micro-example · GitHub

モジュール周りが少し怪しい設定になっている気がします。
今回触らなかったのでエラーが起きるかもしれません。
次の記事のときには見直しておきます。

VSCodeの設定をします。
今回はTypeScriptのLinterにeslintを使います。
VSCode上でのtslintのfixがうまく動いてくれなかったので諦めました。

settings.jsonを以下のようにします。
>||{
"typescript.tsdk": "./node_modules/typescript/lib",
"javascript.validate.enable": false,
"eslint.enable": true,
"eslint.autoFixOnSave": true,
"files.associations": {
"*.ts":"javascript"
}
}<||

TypeScriptの設定とESLintの設定ですね。
あとデフォルトだとESLintが.tsファイルをfixしてくれなかったので
fileの関連付けを変更してあります。

package.jsonに以下のような内容を記述します。
これはnpm scriptsの設定です。(npm run-scriptsとか表記揺れしてる気がする)

  "scripts": {
    "build": "webpack"
  },

ビルド

ビルドしてみます。
コンソールから

npm run build

webpack.config.jsに設定している通り、src/main/webapp/bundle.jsにファイルが吐き出されると思います。

src/main/webapp/index.htmlに以下の内容を用意しておきました。
ただのHTMLです。

<!DOCTYPE html>
<html>
    <head>
        <title>Start Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="./bundle.js">
        </script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

前回の記事と同様payara microで起動して
http://localhost:8080/にアクセスすると
味気ない画面が出ました。
f:id:reteria:20161130051317p:plain

これでこの記事は終わりです。

まとめ

今回はVue 2.0とTypeScriptの環境を構築していきました。
使う物本体には全くつまらなかった感じですが
TSLintを初め使おうと思っていたのですが
autoFixが全然動かなかったので、諦めて
ESLint + typescript eslint parserに切り替えました。

たぶんどっかで詰まる気がしますが
とりあえず触る程度なのでこれでも十分かと思います。
（本音を言うとkeyofキーワード使いたかった）

本当に環境構築で中身は何もないので続きでなんか書けたらと思います。

今回触ったリポジトリはこちらです。
github.com

おまけ

gradle-node-pluginでnpm run build走らせたら、ビルドが終わるのが早すぎるのかエラーで落ちた。

- debugでgradleのタスクを起動すると落ちない。悲しい。