Vue.jsを使ったTypeScriptとwebpackの設定

目次

概要

現在、TypeScriptとwebpackを使ったフロントエンドの環境で開発をしているのですが、そこにVue.jsを導入してみたので、その方法を紹介します。

Vue.jsのインストール

Vue.jsは、npmのパッケージからインストールします。

npm install --save-dev vue

TypeScriptと型定義のインストール

TypeScriptも、Vue.jsと同じようにnpmのパッケージからインストールします。

npm install --save-dev typescript

さらに、TypeScriptでVue.jsを使うには、Vue.js用の型定義を用意する必要があります。

型定義は、嬉しいことに公式で配布されているので、それをnpmパッケージからインストールします。

npm install --save-dev @types/vue

webpackのインストール

webpackも、他のものと同じようにnpmのパッケージからインストールします。

npm install --save-dev webpack

TypeScriptの設定

Vue.js用にTypeScriptの設定ファイルtsconfig.jsonを用意します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  },
}

Vue.js用に加えた部分はこの部分です。

{
  "compilerOptions": {
    "module": "es6",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ]
  },
}

ほとんどVue.js用の設定です。

webpackの設定

webpackの設定は、Vue.js用に変える部分はありませんが、変えない場合、運用環境などで使う場合にVue.jsの警告が表示されてしまいます。

なので、運用環境などで使用するときには、下記の設定を追加してwebpackを実行する必要があります。

var webpack = require('webpack');

module.exports = {
    // 省略
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        })
    ]
}

Vue.jsは、webpackの実行時に環境変数として、NODE_ENVにproductionという文字列を渡すと、警告の表示などのデバッグ用のコードを含めないようになります。

なので、このようにpluginで、環境変数NODE_ENVの設定をしています。

使い方

これらの設定が終わったら、TypeScriptのコードでVue.jsを使う環境が整いました。

実際のTypeScriptのコードでVue.jsを読み込むにはimportを使ってこのようにします。

import Vue from 'vue'

後は、普段通りVue.jsを使いましょう。

まとめ

やり方さえ分かってしまえば、設定はとても簡単です。

しかし、ただ設定しただけではVue.jsの警告が表示されてしまうので、運用環境で使うコードの作成時にはNODE_ENVの設定を忘れないようにしましょう。