unplugin-auto-import の使用

1. unplugin-auto-import プラグインによって解決される問題

unplugin-auto-import 相対パスが不明瞭になりがちな開発時のインポートの問題を解決するプラグインです。

このプラグインはルート ディレクトリに auto-import.d.ts を生成します。このファイルはすべてのプラグインをグローバルにインポートし、使用時に直接使用できるようにします。

2. プラグインのインストール

ターミナルでコマンドを実行

npm i -D unplugin-auto-import

設定ファイル vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import AutoImport from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      vue(),
      AutoImport({
        imports:["vue","vue-router"],
        dts:'src/auto-import.d.ts'    // 路径下自动生成文件夹存放全局指令
      }),

  ],
})

この方法で生成された auto-import.d.ts は、設定したディレクトリにあります

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const resolveDirective: typeof import('vue')['resolveDirective']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useLink: typeof import('vue-router')['useLink']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}

基本的に考えられるすべての用途が生成されていることがわかります。

注: 上記の dts を構成した後、auto-import.d.ts ファイルが自動的に生成されない場合があります。プロジェクトを再実行するか、エディターを閉じて再度開くことができます。

3. テスト

使用時にフックがあり、使用されているオブジェクトがグローバルであることが検出された場合は、直接インポートされます。

import Home from "../components/Home.vue";
import Page1 from "../components/Page1.vue";
import {createRouter, createWebHistory} from "vue-router";
import testAuto from "../components/TestAuto.vue";



const router = createRouter({
    history: createWebHistory(),
    routes :[
        {path: "/home", component: Home},
        {path: "/page1", component: Page1},
        {path: "/page2", component: testAuto}
    ]
});
export  default router;

4. まとめ

私はバックエンドを始めたばかりの学生として、これらのプラグインにまだ慣れていません。

d.tsの概念を確認しました

d.ts ほとんどのエディタは d.ts ファイルを認識し、js および ts コードを記述するときにスマートなプロンプトを表示します。

.d.ts は、基本的なクラス、関数、変数の型、パラメーターの型、戻り値などのみを含む API バージョン コードとして理解でき、コンパイラーと IDE が API 定義の型に準拠しているかどうかを識別するために使用されます。発売後にご覧いただけます。