Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Midoliy

Webpack を使って Typescript + Vue.js 入門

Last updated at Posted at 2020-05-02

はじめに

vue-cli を利用すれば簡単に設定できますが, 今回は学習用途にプロジェクトを起ち上げていきます.

開発環境・バージョン等

今回利用した環境は以下の通りです.

name version
Windows 10 Pro 64bit 1903(18362.778)
Powershell Core 7.1.0-preview.2
node v14.1.0
npm v6.14.4

プロジェクト構築

プロジェクトディレクトリの初期化

プロジェクトディレクトリの作成

適当な場所にプロジェクト用のディレクトリを作成します.

powershell
mkdir "D:/src/work/ts/Typescript-Vue-Sample"
cd "D:/src/work/ts/Typescript-Vue-Sample"

作成が完了したら, Visual Studio Code でディレクトリを開きます.

powershell
code "D:/src/work/ts/Typescript-Vue-Sample"

npm init で初期化

powershell
npm init -y

ここまで正常にできている場合, 以下のようになっていると思います.
image.png

Webpack の導入・設定

Webpack のインストール

次にアプリケーションをビルドするために Webpack をインストールします.
同時に webpack-cli と webpack-dev-server, copy-webpack-plugin もインストールしておきます.

powershell
npm i -D webpack webpack-cli webpack-dev-server copy-webpack-plugin

Webpack 設定ファイルの作成

Webpack を無事インストールできたら, 設定ファイルを作成・編集します.

powershell
new-item "webpack.config.js"
webpack.config.js
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        // 出力先ディレクトリ
        path: path.resolve(__dirname, './dst'),
        // 出力ファイル名
        filename: 'bundle.js'
    },
    devServer: {
        // webpackの扱わないファイルを入れるディレクトリ
        contentBase: path.resolve(__dirname, 'public')
    }    
}

起動コマンドを package.json に書き加えます.

package.json
{
  "name": "Typescript-Vue-Sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot",    // <-- ここを追加
    "build": "webpack -p"                   // <-- ここを追加
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これで .js ファイルをコンパイルする準備ができました.

.js ファイルをコンパイルしてみる

試しに簡単な .js ファイルをコンパイルしてみます.

powershell
mkdir "src"
new-item "src/index.js"

mkdir "public"
new-item "public/index.html"
src/index.js
console.log('Hello, world!!')
public/index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue app</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

それでは実際に実行してみます.

powershell
npm start

http://localhost:8080 にアクセスして, 開発者ツールを開いて Console を見ると Hello, world!! が表示されていると思います.
image.png

確認が完了したら Ctrl + C でサーバを終了しておきます.

Vue.js の導入

Vue のインストール

それでは, Vue 本体と関連ローダーも導入しておきます.

まずは Vue と 基本ローダー をインストールします.

powershell
npm i -D vue vue-loader vue-template-compiler css-loader style-loader

次に Javascript関連ローダー をインストールします.

powershell
npm i -D babel-loader @babel/core @babel/preset-env

設定ファイルを修正する

各種インストールし終わったら, webpack.config.js と package.json を修正します.

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

// ここから追加 --->
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin')
// <--- ここまで追加

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dst'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public')
    },
    // ここから追加 --->
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new CopyPlugin([{ from: './public' }])
    ]
    // <--- ここまで追加
}
package.json
{
  "name": "Vue.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.5.3",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.2",
    "typescript": "^3.8.3",
    "vue-loader": "^15.9.2",
    "vue-template-compiler": "^2.6.11"
  },
  // ここから追加 --->
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "browserslist": "last 2 versions, not dead, not ie > 0"
  // <--- ここまで追加
}

Vue.js を簡単に使ってみる

それでは Vue を使って Hello, world!! を出力してみます.

powershell
mkdir "src/components"
new-item "src/components/App.vue"
src/components/App.vue
<template>
  <div>
    <p>Hello, world!!</p>
  </div>
</template>
src/index.js
import Vue from 'vue'
import App from './components/App'

new Vue({
  el: '#app',
  components: { App },
  template: '<app/>'
})

それでは実際に実行しましょう.

powershell
npm start

http://localhost:8080 にアクセスすると以下のように表示されると思います.
image.png

Typescript の導入・設定

Typescript のインストール

それでは Typescript本体 と ts-loader をインストールします.

powershell
npm i -D typescript ts-loader

設定ファイルを作成・修正する

Typescript用の設定ファイル(= tsconfig.json)を新規作成します.

powershell
new-item "tsconfig.json"
tsconfig.json
{
    "compilerOptions": {
        "target": "esnext",
        "module": "commonjs",
        "noImplicitAny": true
    }
}

Typescriptの導入に伴って, webpack.config.js も修正します.

webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    // ここから修正 ( .js to .ts ) --->
    entry: './src/index.ts',
    // <--- ここまで修正 ( .js to .ts )
    output: {
        path: path.resolve(__dirname, './dst'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            // ここから追加 --->
            {
                test: /\.ts$/,
                use: [{
                    loader: 'ts-loader',
                    options: {
                        appendTsSuffixTo: [/\.vue$/]
                    }
                }]
            },
            // <--- ここまで修正
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        // ここから修正 ( .ts を追加 ) --->
        extensions: ['.js', '.ts', '.vue', '.json'],
        // <--- ここまで修正 ( .ts を追加 )
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new CopyPlugin([{ from: './public' }])
    ]
}

ソースコードを修正する

index.js を index.ts に名前変更する.

powershell
mv "src/index.js" "src/index.ts"

src/components/App.vue を修正します.
以下のコードを足さないと正しく認識されないので注意してください.

src/components/App.vue
<!-- ↓↓↓ ここから追加 ↓↓↓ --->
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
})
</script>
<!-- ↑↑↑ ここまで追加 ↑↑↑ --->

<template>
  <div>
    <p>Hello, world!!</p>
  </div>
</template>

それでは実際に実行しましょう.

powershell
npm start

http://localhost:8080 にアクセスすると以下のように表示されると思います.
image.png

参考サイト

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?