3.2.1 • Published 9 months ago

vite-auto-import-resolvers v3.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

推荐

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

vite-auto-import-resolvers

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

README 🦉

简体中文 | English

动机 🐇

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

基本使用 🦖

  1. 安装
npm i vite-auto-import-resolvers unplugin-auto-import -D
  1. 配置插件
// 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()],
    }),
  ],
});
  1. 之后 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-importissue 讨论 👉 How should I auto import composition functions

更多 🐃

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

License 🐸

Made with markthree

Published under MIT License.

3.2.1

9 months ago

3.2.0

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

3.0.7

1 year ago

3.0.6

1 year ago

3.0.5

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.3.0

3 years ago

2.2.1

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.1.6

3 years ago

2.1.5

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.0

3 years ago