Vue.jsの単一ファイルコンポーネント用の環境構築をしてみた(Pug+Sass+Typescript導入編)

今回は前回の記事↓の続きとして、pugsasstypescriptを導入しようと思います。

top-men.hatenablog.com

それでは早速必要なパッケージをインストールします。

pugをインストール

npm i -D pug

sass関連のパッケージをインストール

npm i -D node-sass sass-loader

typescript関連のパッケージをインストール

npm i -D typescript ts-loader vue-ts-loader

必要なパッケージはインストールできたので、設定ファイルを編集・追加していきます。

tsconfig.jsの作成

まずプロジェクトフォルダ直下にtsconfig.jsを作成し、以下のようにします。

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "module": "es2015",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noImplicitThis": true,
    "target": "es5",
    "experimentalDecorators": true
  },
  "include": [
    "./src/**/*"
  ]
}

webpack.config.jsの作成

webpack.config.jsを編集していきます。

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
        options: {
          esModule: true
        }
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          transpileOnly: true,
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
    ]
  },
  resolve: {
    extensions: ['*', '.ts', '.vue', '.json', 'scss', '.js'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    contentBase: './',
    port: 3000,
    host: 'localhost',
    historyApiFallback: true,
  }
};

vue-loaderの部分なのですが、よく他の記事では、オプションでesModule: trueと記載するのですが、ver14以降.vue ファイルは常に ES モジュールをエクスポートするので記述は不要になります。 以下のページを一度読んでみてください。

オプションリファレンス · vue-loader

d.tsファイルの作成

次にsrcフォルダ直下にsfc.d.tsファイルを作成します。

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

d.tsより前の名前は任意で大丈夫です。 このファイルを配置する場所は、tsconfig.jsonで指定されているパスの中でしたらどこでも大丈夫です。

コンポーネントファイルの作成

今度はHello.vueファイルを編集します。

<template lang="pug">
  .list
    p.list_item Hello {{name}}
</template>

<style lang="scss" scoped>
  .list {
    color: #323232;
    font-weight: 700;
    &_item {
      display: flex;
    }
  }
</style>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
    data() {
      return {
        name: 'Vue.js!!!!'
      }
    }
  })
</script>

styleタグにscopedを設定すると以下のようにローカルスコープができます。便利ですね。

f:id:top_men:20180506232704p:plain

htmlファイルを作成

前回の記事ではdistフォルダの中にhtnlファイルを配置していましたが、便宜上プロジェクトフォルダ直下に配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Component Tutorial</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

これでnpm startとコマンドを実行してブラウザにHello Vue.js!!!!と表示されればOKです!

躓いた箇所

vue-laoderの部分で結構悩まされました。 ローカルサーバーを起動した時に以下のようなエラーがでました。

ERROR in ./src/components/Hello.vue?vue&type=script&lang=ts
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

結論を言うと自分は今回のプロジェジェクトではvue-loaderのver15を使用していました。ver15は最近リリースされたばかりでver14と変更点が多く、新たにVueLoaderPluginなどを追加しなければいけないみたいです。自分はvue-loaderのバージョンを14に下げてこのエラーを回避しました。次vue-loaderを使う機会がある時はver15で試してみたいと思います。

以下参考記事になります。

github.com

vue-loader.vuejs.org

次回はtodoアプリを作成するなどして、理解を深めていきたいと思います。

今回のコードもgithubにあげたので参考にしてみてください。

github.com