Vue2.0 環境構築をする TypeScript + Webpack (with VSode)

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