過去記事などで、webpackとTypeScriptを使った開発環境の構築方法についていくつかまとめていますが、今回はwebpackとTypeScriptのプロジェクト内でVue.jsのライブラリを使えるようにしていきたいと思います。Vue.jsはJavaScriptのフレームワークで、SPAなどのウェブアプリケーションを開発する際によく使われています。Vue.jsを使うことで動的なウェブページが簡単に作成することができます。   今回はVue.jsのライブラリのソースコードをnpmでインストールしていきます。まずは、下記コマンドでVue.js本体のパッケージを追加します。

$ npm install --save vue
+ vue@2.6.11

  また、関連するパッケージも下記のようにインストールしていきます。ここは必要に応じてパッケージを選択していきます。

$ npm install --save-dev vue-class-component vue-loader vue-template-compiler vue-property-decorator
+ vue-class-component@7.2.3
+ vue-loader@15.9.2
+ vue-template-compiler@2.6.11

  インストールが完了すると、package.jsonにパッケージが追記されているのが確認できますね。 【package.json】

{
 "dependencies": {
  "vue": "^2.6.11",
  ...........
 },
 "devDependencies": {
  "vue-class-component": "^7.2.3",
  "vue-loader": "^15.9.2",
  "vue-template-compiler": "^2.6.11",
  "vue-property-decorator": "^9.1.2"
  ...........
 },
 "browser": {
  "vue": "vue/dist/vue.common.js"
 },
 ...........
}

  TypeScriptを使わず、通常のJavaScriptでBrowserifyを利用する時には、上記のように「browser」の項目にVue.jsでビルドファイルを指定しておきます。でないと、下記のようにコンソール上でエラーが表示されてしまいます。

Vue warn: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

  エラーの内容としては、ランタイム限定のファイルが読み込まれてしまっているようで、デフォルトの設定とのことです。ですので上記のようにpackage.jsonに指定する必要があります。   次にTypeScriptの設定を行います。下記のように設定していきますが、重要となるのは「allowSyntheticDefaultImports」「lib」「experimentalDecorators」の指定となります。 【tsconfig.json】

{
 "include": [
  "src/ts/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "es2015", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "lib": [
   "dom",
   "es2020"
  ],
  "experimentalDecorators": true
 }
}

  続けて、webpackの設定を行っていきます。ここでは、「.vue」ファイルが読み込まれるように「vue-loader」の指定と、エイリアスの設定としてVue.jsのビルドファイルの指定を忘れないようにしておきます。またvue-loaderのプラグイン設定も追加しておきます。 【webpack.config.js】

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: './src/ts/index.ts',
  output: {
    path: `${__dirname}/dist/assets/js`,
    filename: 'main.min.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: [
      '.ts', '.js', '.vue'
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

  ここまで出来たらVue.jsを使う準備が完了です。TypeScript上でVue.jsの処理を書いていきます。最初にimport文でVue.jsのモジュールを読み込んでおきます。今回は.vueファイルを読み込んでみます。ここではHTML要素にマウントだけしておきます。 【index.ts】

'use strict';

import Vue from 'vue';
import App from './vue/app.vue';

new Vue(App).$mount('#app');

  続いて、単一コンポーネントファイルに処理を書いていきます。.vueファイルでTypeScriptを使う場合には、scriptタグに「lang="ts"」と追記することでTypeScriptが使えます。Vue.jsでTypeScriptを使う際にはいろんな記法がありますが、ここではClass APIを使った方法で記述しています。ですので、「vue-property-decorator」というモジュールを読み込んでいきます。通常のJavaScriptでのVue.jsの書き方とは少し異なるのですが、その点についてはまた改めて別記事でまとめてみたいと思います。 【/vue/app.vue】

<script lang="ts">
  import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator';
  @Component({
    components: {}
  })
  export default class App extends Vue {
    message: string = 'Hello World!!';
    mounted(): void {
      this.showMessage();
    }
    showMessage(): void {
      console.log(this.message);
    }
  }
</script>

  上記コードで実際にVue.jsが動作しているか確認してみると、指定したメッセージが問題なく表示されました。 【console.log】

Hello World!!

  また、場合によってはTypeScript上でインポートして、Vue.jsが使えているにも関わらず、モジュールが見つからないというエラーが表示されることがあります。

Cannot find module 'vue'.

  その場合には、プロジェクトのルートディレクトリ直下に「types.d.ts」という下記のようなファイルを作成しておくことで対応できます。これでエラーが表示されなくなりました。 【types.d.ts】

declare module 'vue';
declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}

 

---

  今回はwebpackとTypeScriptをのプロジェクト内でVue.jsを使えるように環境構築する方法についてまとめてみました。Vue.jsはとても便利なフレームワークで、DOMを伴う複雑な処理も簡単に実装することができ、開発できる幅も広がりますね。   （参考にさせて頂いたサイト） 最新版TypeScript+webpack 4の環境構築まとめ インストール（さまざまなビルドについて）