🐥

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

2021/12/13に公開

内容

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

環境構成

  • vscode
  • vue3
  • node
  • package
  • webpack
  • typescript

ファイル構成(最終)

手順

node

package

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

webpack

  1. ターミナルにnpm i -D webpack webpack-cli
    「package-lock.json」ファイルと「node_modules」フォルダが生成
  2. 「webpack.config.js」ファイルを作成
  3. 「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

  1. ターミナルにnpm i -D typescript ts-loader
   "devDependencies": {
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.3",
  1. 「index.js」ファイルの拡張性を「ts」に変更
  2. 「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$/],
        },
      },

  1. 「tsconfig.json」ファイル作成
    ターミナルにtsc --init

  2. ターミナルにnpx webpackで成功していることを確認

vue3

  1. ターミナルにnpm install vue@next
  2. ターミナルにnpm install -D @vue/compiler-sfc
  3. ターミナルにnpm install -D vue-loader vue-template-compiler
    参考:https://vue-loader.vuejs.org/guide/#vue-cli
  4. 「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()           //追加
  ],
}

  1. 「shims-vue.d.ts」ファイル作成
shims-vue.d.ts
declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

実装

  1. 「src」フォルダ内の「index.ts」ファイルに入力
index.ts
import { createApp } from "vue"
import top from "../src/top.vue"

const app = createApp(top);
app.mount("#app");
  1. 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>
  1. srcフォルダ内に「top.vue」ファイル作成
top.vue
<template>
  test
</template>
<script>

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

  1. ターミナルで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"
  }
}

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

以上になります。

Discussion