Help us understand the problem. What is going on with this article?

Vue + TypeScript + Webpack (2019師走)

変更履歴 (2019師走)

  • 実は不必要だった部分を削除
  • エイリアス設定 vue$: 'vue/dist/vue.esm.js' を削除(完全ビルドは不要なため)
  • ローカルサーバ設定を追加
  • 参考にさせていただいたリンクを追加

はじめに

  • 環境: macOS 10.15.1 (Catalina), Node.js (v12.13.1)
  • @vue/cli は使いません
  • 淡々と設定ファイルを羅列するだけです
  • 成果物はこちら (GitHub)

最終的なディレクトリ構成

bash
$ tree -I node_modules
.
├── @types
│   └── single-file-component.d.ts
├── dist
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   └── index.ts
├── tsconfig.json
└── webpack.config.js

3 directories, 8 files

必要なパッケージ

Vue 関連

bash
$ npm i -D vue vue-template-compiler

TypeScript 関連

bash
$ npm i -D typescript

設定ファイルの作成

  • "experimentalDecorators": true を推奨。あとはお好みで
tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "@types/*"
      ]
    },
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "esnext"
    ],
    "sourceMap": true,
    "strict": true
  }
}
  • *.vue ファイルを import 文でインポートするための型定義ファイル
@types/single-file-component.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Webpack 関連

  • 本体
bash
$ npm i -D webpack webpack-cli webpack-dev-server
  • webpack.config.js で補完を効かせるための型定義
bash
$ npm i -D @types/webpack
  • 各種ローダー
bash
$ npm i -D ts-loader vue-loader vue-style-loader css-loader

webpack.config.js

webpack.config.js
const path = require('path');

// vue-loader@15 から必要
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 補完が効きます!
/** @type import('webpack').Configuration */
module.exports = {
  mode: 'development',
  resolve: {
    // '.ts' と '.vue' を追加
    extensions: ['.js', '.ts', '.vue', '.json'],
  },
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        // 'ts-loader' で TypeScript をコンパイル
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        // '*.vue' ファイルも TS として認識させるためのオプション
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        // 単一ファイルコンポーネントは vue-loader が処理
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        // 配列最後尾のローダーから実行される
        use: ['vue-style-loader', 'css-loader'],
      },
    ],
  },
  // プラグイン起動
  plugins: [new VueLoaderPlugin()],
  // ローカルサーバ
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 1234,
    open: true,
  },
};

Vue アプリの例(シングルファイルコンポーネント使用)

  • HTML
dist/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue + TS + Webpack</title>
  </head>
  <body>
    <!-- マウントポイント -->
    <div id="app"></div>

    <!-- トランスパイル後のアプリ -->
    <script src="./bundle.js"></script>
  </body>
</html>
  • エントリーファイル
src/index.ts
import Vue, { VNode } from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: (h): VNode => h(App),
});
  • Vue コンポーネント
src/App.vue
<template>
  <p>{{ greeting }} World!</p>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  data: () => {
    return {
      greeting: 'Hello'
    };
  },
})
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

package.json

  • npm start でローカルサーバ起動
package.json
{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

参考記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした