TypeScript * Vueの開発環境を作成する

TypeScriptとES6とNode.js(サーバサイド)とクライアントサイドとetc...が絡み合ってわかりづらい。
WebPackなどは使わず極力シンプルに構成したいと思っていたけど現状だとWebpackを使用するのが最善？

環境

OS

WinでもMacでも恐らくLinuxもいける。

IDE Visual Studio Code

Vueで推奨されている
node_modulue以下だとパスを通す(<reference path="..." />)必要がなかったりと色々便利なので特にこだわりが無ければこれで。

Node.js

本来はサーバJavaScriptで動かすという代物だった気がするがいろいろ魔改造されている。
クライアント(ブラウザ)のライブラリ(Vue)を管理するのに利用する。

Webpack

VueでTypeScriptを使用する場合はほぼ必須。
今回はWebpack4対応。

手順

Githubに上げた。Readme見て。以上（雑）
https://github.com/ninomae-makoto/TypeScript-Vue-Minimal

WebPackを使わずにどうにか出来ないか結構調べたが今のVueの作りだと難しいらしい。
私のように無駄なあがきをせずにおとなしく使っておくことを推奨。

sfa.d.tsはvueファイルを使用する場合必須？
これがないとimport出来ない。

また最近Vueで管理しているプロパティ(dataの中身)も型がつくようになったらしい

const v = new Vue({
    el: "#app",
    data() {
      return {
        inputValue: "Hello World",
      }
    },
    methods: {
      inputField() {
        console.log(this.inputValue)
      },
    },
  })

上記はthis.inputValueがString型として扱われる（便利！！）
サンプルではコンポーネントを使用したケースと使用しないケースを用意しているので割りと応用が効くはず。

Vue コンポーネントを使用する場合スクリプト部分は<script lang="ts"></script> のように記述すること。

<script lang="ts">
import Vue from "vue"
export default Vue.extend({
  data() {
    return {
      inputValue: "Hello World",
    }
  },
  methods: {
    inputField() {
      console.log(this.inputValue)
    },
  },
})
</script>

webpack.config.jsの設定例

var path = require('path')
var webpack = require('webpack')
 
module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.ts$/,
        loader: 'tslint-loader',
        exclude: /(node_modules)/,
        options: {
          configFile: 'tslint.json'
        }
      },
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
          isolatedModules: true
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
            'ts': 'ts-loader!tslint-loader',
          }
        }
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  externals: {
    "vue": "Vue",
    'element-ui': 'ElementUI'
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

vueに関してはコンパイル時に組み込まずに別途読み込むようにwebpackのconfigを設定している(externalsの部分)
他にはhard-source-webpack-pluginを使ってコンパイル時にキャッシュを利用するようにしている。

参考

Vue TypeScriptのサポート
https://jp.vuejs.org/v2/guide/typescript.html

MSのサンプルが一番分かりやすかった
https://github.com/Microsoft/TypeScript-Vue-Starter

初めてまともにGithub使った気がする。
後はデバッグできるようにしてElementも使いたい。

TypeScript * Vueの開発環境を作成する

環境

OS

IDE Visual Studio Code

Node.js

Webpack

手順

webpack.config.jsの設定例

参考

2018年2月15日木曜日