Awesome

推荐

unplugin-auto-import 已经内置 dirs 选项，推荐优先使用

vite-auto-import-resolvers

unplugin-auto-import 的 vite resolvers，主要处理 vite 项目本身的 api 按需自动引入。

README 🦉

简体中文 | English

动机 🐇

为了按需自动引入指定目录下模块的 api。

基本使用 🦖

1. 安装

npm i vite-auto-import-resolvers unplugin-auto-import -D

2. 配置插件

// vite.config.js
import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";

export default defineConfig({
  plugins: [
    Vue(),
    // 该辅助插件也是必需的 👇
    DirResolverHelper(),
    AutoImports({
      imports: ["vue"],
      resolvers: [dirResolver()],
    }),
  ],
});

3. 之后 src/composables 下模块的默认导出将在项目中自动按需引入

例如 👇

// src/composables/foo.ts

export default 100;

// src/App.vue
<script setup>
	console.log(foo) // 输出100，而且是按需自动引入的
</script>

<template> Hello World!! </template>

进阶 🦕

强制前缀与后缀

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";

export default defineConfig({
  plugins: [
    Vue(),
    DirResolverHelper(),
    AutoImports({
      imports: ["vue"],
      resolvers: [
        dirResolver({ prefix: "use" }), // 强制前缀为 use
        dirResolver({
          target: "src/stores", // 目标目录，默认为 'src/composables'
          suffix: "Store", // 强制后缀为 Store
        }),
      ],
    }),
  ],
});

于是

• src/composables 下只有 use 开头的模块会被按需加载
• src/stores 下只有 Store 结尾的模块会被按需加载

例如 👇

// src/stores/counterStore.ts
const counter = ref(100);

export default () => {
  const inc = (v: number = 1) => (counter.value += v);
  return {
    inc,
    counter,
  };
};

<script setup lang="ts">
	// 这将按需自动引入
	const n = counterStore()
</script>

<template>
	<div @click="n.inc()">{{n.counter}}</div>
</template>

包含与排除

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";

export default defineConfig({
  plugins: [
    Vue(),
    DirResolverHelper(),
    AutoImports({
      imports: ["vue"],
      resolvers: [
        dirResolver({
          prefix: "use",
          include: ["foo"], // 即使 foo 模块不是以 use 开头也会被包含进来
          exclude: ["useBar"], // useBar 模块将始终被排除
        }),
      ],
    }),
  ],
});

规范路径

通过 normalize 可以控制最终路径的生成

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { dirResolver, DirResolverHelper } from "vite-auto-import-resolvers";

export default defineConfig({
  plugins: [
    Vue(),
    DirResolverHelper(),
    AutoImports({
      imports: ["vue"],
      resolvers: [
        dirResolver({
          normalize({ path, target, name }) {
            return path;
          },
        }),
      ],
    }),
  ],
});

自动生成按需 api 预设

在使用 unplugin-auto-imports 时，需要手动管理 imports 👇

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    Vue(),
    AutoImports({
      imports: ["vue", "vue-router", "pinia"], // 手动管理
    }),
  ],
});

但有时候你可能需要去变动一些依赖，例如将 pinia 换成 vuex，这时如果配置未更改就会发生错误。同时如果你设置了未安装的包，这将造成无谓的性能消耗。

所以你能这样 👇

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { AutoGenerateImports } from "vite-auto-import-resolvers";

export default defineConfig({
  plugins: [
    Vue(),
    AutoImports({
      imports: AutoGenerateImports(), // 自动管理，只有对应的包有装时才会自动按需设置预设
    }),
  ],
});

默认支持列表

include 属性

• vue
• pinia
• vuex
• vitest
• vue-i18n
• vue-router
• @vueuse/core
• @vueuse/head
• @nuxtjs/composition-api
• preact
• quasar
• react
• react-router
• react-router-dom
• svelte
• svelte/animate
• svelte/easing
• svelte/motion
• svelte/store
• svelte/transition
• vitepress
• vee-validate

手动排除

当然你可以手动排除掉不想要的 👇

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import AutoImports from "unplugin-auto-import/vite";
import { AutoGenerateImports } from "vite-auto-import-resolvers";

export default defineConfig({
  plugins: [
    Vue(),
    AutoImports({
      imports: AutoGenerateImports({
        exclude: ["pinia"], // pinia 将始终被排除
      }),
    }),
  ],
});

启发 🐳

该 resolvers 来源于 unplugin-auto-import 的 issue 讨论 👉 How should I auto import composition functions。

更多 🐃

更多项目工程实践可见 👉 tov-template

License 🐸

Made with markthree

Published under MIT License.