🐥

Webアプリ開発環境構築(vue3+typescript by webpack)

2021/12/13に公開

TypeScript

webpack

tech

内容

Webアプリ開発する前の環境構築をまとめました。

環境構成

vscode
vue3
node
package
webpack
typescript

ファイル構成（最終）

手順

node

以下サイトからダウンロード
https://nodejs.org/ja/

package

ターミナルにnpm init
package.jsonファイルが生成

webpack

ターミナルにnpm i -D webpack webpack-cli
「package-lock.json」ファイルと「node_modules」フォルダが生成
「webpack.config.js」ファイルを作成
「webpack.config.js」にコード記入
　- 参考：https://webpack.js.org/concepts/
　- コード

webpack.config.js

module.exports = {
  entry:'./src/index.js',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js',
  },
  resolve:{
  },
  module:{
    rules:[
    ]
  },
  plugins: [
  ],
}

4.srcフォルダ作成し、その中に「index.js」ファイル作成
5. ターミナルにnpx webpackで成功していることを確認

typescript

ターミナルにnpm i -D typescript ts-loader

   "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.3",

「index.js」ファイルの拡張性を「ts」に変更
「webpack.config.js」ファイル入力

webpack.config.js

module.exports = {
  entry:'./src/index.ts',　　　　//js→tsに変更
}
module:{
    rules:[
      {　　　　　　　　　　　　　//追加
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },

「tsconfig.json」ファイル作成
ターミナルにtsc --init
ターミナルにnpx webpackで成功していることを確認

vue3

ターミナルにnpm install vue@next
ターミナルにnpm install -D @vue/compiler-sfc
ターミナルにnpm install -D vue-loader vue-template-compiler
参考：https://vue-loader.vuejs.org/guide/#vue-cli
「webpack.config.js」ファイルに入力（丸ごとコピペでも可）

webpack.config.js

const { VueLoaderPlugin } = require('vue-loader');　　　　//追加

module.exports = {
  entry:'./src/index.ts',
  mode: 'development',
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js',
  },
  resolve:{　　　　　　　　　　　　　　　　　　//追加
    extensions: [".vue", ".js", ".ts"],
  },
  module:{
    rules:[
      {　　　　　　　　　　　　　　　　　　　　
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
      },     
      {　　　　　　　　　　　　　　　　　　　　//追加
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()　　　　　　　　　　　//追加
  ],
}

「shims-vue.d.ts」ファイル作成

shims-vue.d.ts

declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

実装

「src」フォルダ内の「index.ts」ファイルに入力

index.ts

import { createApp } from "vue"
import top from "../src/top.vue"

const app = createApp(top);
app.mount("#app");

index.html作成

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/main.js"></script>
</body>
</html>

srcフォルダ内に「top.vue」ファイル作成

top.vue

<template>
  test
</template>
<script>

export default({
  setup() {
    
  },
})
</script>

ターミナルでnpx webpack

以下エラーが出た場合は、npm install vue-loader@nextをしてください。

Vue packages version mismatch:
- vue@3.2.26 
- vue-template-compiler@2.6.14

最終「package.json」
コマンドを追加するため、scriptsに追加しました。

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack --mode development",//追加
    "watch": "webpack --mode development --watch"//追加
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vue/compiler-sfc": "^3.2.26",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.3",
    "vue-loader": "^17.0.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "dependencies": {
    "vue": "^3.2.26"
  }
}

ブラウザでtestと表示されていればOK

以上になります。

内容

環境構成

ファイル構成（最終）

手順

node

package

webpack

typescript

vue3

実装

Discussion