今年に入ったくらいからVue.jsは3系を使うようになることが増えてきて、色々と調べることも多く備忘録として残しておきたいと思います。今回はwebpackでVue.js 3系 ＋ TypeScriptと使う環境構築をやってみます。最近ではViteなどwebpackに変わるバンドルツールも増えてきているようですが、慣れているのと忙しいのを言い訳になかなか本格的な導入まで出来ていないのが課題です、、といってもwebpackを使ったプロジェクトも現状は多いので良い機会になりました。   過去記事「webpack＆TypeScriptのプロジェクトでVue.jsを使える開発環境を構築してみる」ではVue.jsの2系とTypeScriptを使う環境構築についてまとめています、また、今回の開発環境のベースには、下記の参考記事にある内容ですでに環境が整っている前提で進めています。TypeScriptやESlintの設定などは過去記事「webpackでESLintが使える環境を構築してみる」をご覧ください。 （参考記事） webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   Vue.jsの2系でTypeScriptを使う場合には「Options API」と「Class API」の方法がありますが、Class APIについてはVue.jsの3系では非推奨となり、代わりに「Composition API」というのを使うのがスタンダードとなります。TypeScriptではこのComposition APIで型付けを行なっていきます。 （参考記事） Vue.jsの2系でTypeScriptを使う「Options API」と「Class API」 Vue.js 3系の導入とComposition APIを試してみる   まずは、webpackでTypeScriptが使える環境に加えて、Vue.jsの3系でTypeScriptが扱えるようにモジュールなどをインストールしていきます。

$ npm install vue@next
$ npm install --save-dev @vue/compiler-sfc vue-class-component vue-loader vue-style-loader

  【package.json】※一部抜粋

{
  "dependencies": {
    "vue": "^3.2.31"
    ...........
  },
  "devDependencies": {
    "vue-class-component": "^7.2.6",
    "vue-loader": "^15.9.2",
    "vue-style-loader": "^4.1.3",
    ...........
  },
  ...........
}

  Vue.jsの3系では「vue-property-decorator」が対応していないようなので、バージョン2系で使っていた場合には削除しておきます。

$ npm uninstall --save-dev vue-property-decorator

  続けてESlintを導入する場合には各種設定ファイルを用意していきます。この辺りは2系と3系で特に変わりはないかと思います。必要に応じて設定していきます。 【.eslintrc.js】

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2019,
    tsconfigRootDir: __dirname,
    project: [
      './tsconfig.eslint.json'
    ]
  },
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
  rules: {
    'no-console': 'warn',
    'no-extra-semi': 'warn',
    'no-undef': 'warn',
    'quotes': [
      'warn', 'single'
    ],
    'space-before-blocks': [
      'warn', {
        'functions': 'always'
      }
    ],
    '@typescript-eslint/no-unsafe-call': 'warn',
    '@typescript-eslint/no-unsafe-member-access': 'warn',
    '@typescript-eslint/no-unsafe-return': 'warn',
    '@typescript-eslint/no-unsafe-assignment': 'warn',
    '@typescript-eslint/no-explicit-any': 'warn'
  },
};

  【tsconfig.eslint.json】

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*.ts",
    ".eslintrc.js",
    "webpack.config.js"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

  【tsconfig.json】

{
  "files": [
    "types.d.ts"
  ],
  "include": [
    "src/ts/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "incremental": true,
    "target": "es5",
    "module": "es2015",
    "sourceMap": true,
    "removeComments": true,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es2020"
    ],
    "experimentalDecorators": true,
    "esModuleInterop": true ,
    "moduleResolution": "node"
  }
}

  Vue.jsの2系同様に.vueファイルに対応した型定義用のファイルを用意しておきます。これでコンパイル時のエラーに対応します。 【types.d.ts】

declare module '*.vue' {
  import { ComponentOptions } from 'vue'
  const component: ComponentOptions;
  export default component
}

  最後にwebpack用の設定ファイルを用意します。2系の時と同じものを使うとエラーが出ることから、3系とは少し差異があるようですね。 【webpack.config.js】

const path = require('path');
const ESLintPlugin = require('eslint-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

const buildMode = 'development';
const directoryPath = {
  root: path.resolve(__dirname, ''),
  dist: path.resolve(__dirname, 'dist'),
  src: path.resolve(__dirname, 'src')
}
const buildDefault = {
  mode: buildMode,
  devtool: 'source-map',
  entry: `${directoryPath.src}/ts/main.ts`,
  output: {
    path: `${directoryPath.dist}/assets`,
    filename: 'js/main.min.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: {
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        }
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
    ]
  },
  resolve: {
    alias: { 'vue$': 'vue/dist/vue.esm-bundler.js' },
    extensions: [ '.ts', '.js', '.vue', '.json' ]
  },
  plugins: [
    new ESLintPlugin({
      extensions: [ '.ts', '.js' ],
      exclude: 'node_modules'
    }),
    new VueLoaderPlugin(),
  ],
  target: [ 'web', 'es5' ],
  performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
}
module.exports = buildDefault;

  2系と3系ではソースコードのファイル名などが変わっているようで、Vue.jsのモジュールのエイリアス指定で、2系と同じものを指定すると参照エラーが出る場合があります。2系同様にソースコードファイルは用途によっていくつか異なるものが用意されており必要に応じて使い分けます。（下記それぞれのライブラリ用ソースコードファイルには「vue.****.prod.js」という形で本番用にミニファイされたものもあります）  

vue.global.js	CDNで利用する場合やwebpackなどでバンドルしない時に選択する
vue.esm-browser.js	バンドルしない場合でES modulesとしてimportを使うときに選択する
vue.esm-bundler.js	webpackなどでバンドルする時に選択する
vue.cjs.js	Node.js側で使用（require()を使うなど）する時に選択する
vue.runtime.****.js	.vueファイルなどのVue.jsで扱われるテンプレートをコンパイルしない場合に選択するランタイム専用ビルドで、vue.cjs.js以外のものにそれぞれ用意されている

  最後にエントリーポイント用のファイルでVueのコンポーネントを呼び出して実行してみます。3系ではDOMにマウントさせる方法が少し異なります。詳しくは過去記事「Vue.js 3系の導入とComposition APIを試してみる」でもまとめていますのでご参考に。下記ではid属性がappの値にマウントされるようになっています。 【main.ts】

import { createApp } from 'vue';
import App from './vue/app.vue';

const app = createApp(App);
app.mount('#app');

  コンポーネントファイル先ではComposition APIで型付けを行ないます。defineComponent()というメソッドを使って処理を作っていきます。2系の時に使っていたClass APIよりコードも見やすくすっきりとしている印象ですね。 【vue/app.vue】

<script lang="ts">
  import { defineComponent, reactive, onMounted } from 'vue';
  interface dataInterface {
    message: string
  }
  export default defineComponent({
    setup() {
      const data:dataInterface = reactive({ message: 'Hello world!!' });
      const showMessage = ():void => {
        console.log(data.message);
      }
      onMounted(():void => {
        showMessage();
      });
    }
  });
</script>

 

---

  今回は、Vue.jsの3系でTypeScriptを使うときのwebpackでの環境構築についてまとめてみました。IEのサポートも切れるということで、今後はVue.jsの3系への移行が増えてくるのではないでしょうか。Options APIやClass APIと比較してもComposition APIはTypeScriptとの相性も良いようで、Vue.jsでTypeScriptを使う場合には合わせて3系への移行や導入も検討したいですね。   （参考にさせて頂いたサイト） Vue.js TypeScript のサポート