Vue.js & Typescript構成でのPWA環境構築

直近仕事でPWAを実装する機会がありそうなので, 少しづつ習得していこうと思います。

プロジェクトの初期化

PWAのセットアップにはvue-cliを使います。

$ yarn global add vue-cli

PWAの初期化。

$ vue init pwa progressive-web-app
$ cd ./progressive-web-app
$ yarn install
$ yarn dev

TypeScriptの導入

まずTypeScript本体とWebpackのローダをpackcageに追加します。

yarn add typescript ts-loader

次にVue.jsでTypeScriptを使用するためにvue-property-decoratorというものを入れます。

yarn add vue-property-decorator

packageはこれで以上です。

Webpackの書き換え

vue-cliプロジェクトでは build/webpack.base.conf.js にWebpackの共通設定が記載してあるので、そのファイルを一部修正する。

  module: {
    rules: [
      // .vueに関するルールは一部書き換え
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          esModule: true
        }   
      },  
      // .tsのルールは新しく追加
      {   
        test: /\.ts$/,
        loader: 'ts-loader',
        options:
        { appendTsSuffixTo: [/\.vue$/] }
      },

    // ~~~~~

Vue & TypeScriptで実装する

設定は以上なので、最後はjsファイルをtsで実装する。

src/
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── Hello.vue
├── main.ts
└── router
    └── index.ts

ts-loderのError

Webpackのビルドでts-loaderが吐いているエラーに悩まされた。

Cannot read property 'afterCompile' of undefined

ググってみたところ以下のissueが上がっていたので参考にしてみたらエラーが解消されました。
https://github.com/angular/angular-cli/issues/9783

webpack, ts-loaderのバージョンを指定してインストールすると解消されるので、参考までに。

  • webpack: 3.1.0
  • ts-loader: 3.5.0