webpackを使うVue.js 3系とTypeScriptの環境構築メモ
最終更新日: Update!!
今年に入ったくらいから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が扱えるようにモジュールなどをインストールしていきます。
最後にエントリーポイント用のファイルでVueのコンポーネントを呼び出して実行してみます。3系ではDOMにマウントさせる方法が少し異なります。詳しくは過去記事「Vue.js 3系の導入とComposition APIを試してみる」でもまとめていますのでご参考に。下記ではid属性がappの値にマウントされるようになっています。
【main.ts】
今回は、Vue.jsの3系でTypeScriptを使うときのwebpackでの環境構築についてまとめてみました。IEのサポートも切れるということで、今後はVue.jsの3系への移行が増えてくるのではないでしょうか。Options APIやClass APIと比較してもComposition APIはTypeScriptとの相性も良いようで、Vue.jsでTypeScriptを使う場合には合わせて3系への移行や導入も検討したいですね。 (参考にさせて頂いたサイト) Vue.js 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以外のものにそれぞれ用意されている |
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 のサポート
sponserd
keyword search
recent posts
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
- ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
ViteでHandlebarsを使った複数ページの作成に使える外部JSONファイルのデータを読み込む
- ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
ViteでTailwindCSSとテンプレートエンジンのHandlebarsを使ったページコーディング
- ViteでPostCSS周りの設定やSassを使う
ViteでPostCSS周りの設定やSassを使う
- フロントエンドの開発環境にVite + TypeScriptを導入する
フロントエンドの開発環境にVite + TypeScriptを導入する
categories