幾個插件，讓你的Vue代碼 “學會” 自動按需引入

前言

在之前的項目中，為了避免項目打包體積過大，不是全局都使用的組件都需要按需引入，使用的圖標也需要手動按需引入，不斷的手寫 import 引入，實話實說，這非常的麻煩！

這不，最近學習到了幾個全新的插件，整理成文分享出來。

• 你是否厭煩了每次使用 vue 時，需要額外的 import vue 的 api
• 你是否厭煩了每次使用 組件庫 時，需要額外的 按需引入 組件
• 你是否厭煩了有時使用 第三方組件庫 時，需要額外的 引入 css 樣式
• 你是否厭煩了每次使用 圖標 時，需要額外的 import

現在有幾個插件可以幫我們一次性解決這些問題，我們在調用時可以不需要import而直接使用，且最終打包時，只有實際使用過的api和組件才會被build進最終產物

unplugin-auto-import：自動按需引入 vue\vue-router\pinia 等的 api

unplugin-vue-components：自動按需引入 第三方的組件庫組件 和 我們自定義的組件

unplugin-icons：可以自動按需引入 所使用的圖標，而不用手動 import

vite-plugin-style-import：自動按需引入 我們手動引入的組件的css樣式

我這里的配置的示例代碼，以 Element Plus 和 Ant Design Vue 以及 Vite 為例，Webpack 的配置可以查看官方倉庫里的配置

實際效果

可以看到，input 組件和 vue 的 ref api，我都沒有 import ，但是仍然使用如常

自動按需引入api、組件、樣式

我們先安裝依賴：

npm install -D unplugin-vue-components unplugin-auto-import

然后我們配置 vite.config.ts 加入以下內容；

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    // ...
    AutoImport({
      // 這里除了引入 vue 以外還可以引入pinia、vue-router、vueuse等，
      // 甚至你還可以使用自定義的配置規則，見 https://github.com/antfu/unplugin-auto-import#configuration
      imports: ['vue'],
      // 第三方組件庫的解析器
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // dirs 指定組件所在位置，默認為 src/components
      // 可以讓我們使用自己定義組件的時候免去 import 的麻煩
      dirs: ['src/components/'],
      // 配置需要將哪些后綴類型的文件進行自動按需引入
      extensions: ['vue', 'md'],
      // 解析的 UI 組件庫，這里以 Element Plus 和 Ant Design Vue 為例
      resolvers: [ElementPlusResolver(), AntDesignVueResolver()],
    }),
  ],
}

非模板組件的 自動按需引入 樣式

Element Plus 發布正式版后，在目前的 vite2 + vue3 + 按需引入 Element Plus 使用中，還沒有發現按需引入失效的問題

什么叫非模板組件呢？其實就是 message 等純粹通過 js 進行調用的組件，unplugin-vue-components 這個插件目前並不能掃描不在模板 (template) 內使用的部分組件，比如 Ant-Design-Vue 的 Message 組件

我們目前按需使用Ant-Design-Vue 的 Message 組件就得手動 import 后使用：

<script setup lang="ts">
import { message } from 'ant-design-vue';
message.info('This is a normal message');
</script>

我們看一下實際的效果

顯示效果如上圖所示，可以看到是沒有 css 樣式 的，我們得手動去引入 它的css樣式，但是這種行為是很麻煩的，為了解決這種需求，一個插件也就隨之而生：

vite-plugin-style-import：自動引入 第三方組件庫我們所使用到的 style 樣式

安裝配置

這里以 Ant-Design-Vue 為例：

我們先安裝依賴：

npm install -D vite-plugin-style-import

配置

// vite.config.ts
import styleImport, { AndDesignVueResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    // ...
    styleImport({
      resolves: [AndDesignVueResolve()],
    }),
  ],
}

這樣子配置完之后，我們手動 import 了組件庫的某個組件，它的樣式也就會自動被我們加載進來，是不是很方便呢？

自動按需引入圖標

我們經常都要為找各種各樣的圖標而發愁，而現在有一個極好的插件和一個極好的庫，可以直接解決我們找圖標、用圖標的后顧之憂

icones：是一個非常優秀的圖標庫，里面集成了很多的圖標

unplugin-icons：可以自動按需引入我們所要使用的圖標，而不用手動 import

安裝配置

npm i -D unplugin-icons @iconify/json

安裝好后，我們配置 vite.config.ts 加入以下內容

// vite.config.ts
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components({
      resolvers: [IconsResolver()], // 這里是個數組
    }),
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
  ],
}

使用示例

我們先打開網址：icones.netlify.app/ 隨便選擇一個圖標

然后點擊復制

回到我們的代碼中，只需要短短的一句就可以使用了：

<template>
  <i-mdi-account-reactivate style="font-size: 2em; color: red" />
</template>

 報錯解決：

　　自動生成的會報ts錯誤

 這樣的報錯需要在tsconfig.json

// tsconfig.json
compilerOptions : {
    // ... 
    "types": ["unplugin-icons/types/vue"],
}

啟動優化

值得一提的是：如果你的 vite版本 > 2.9.0，那么就不需要安裝啟動優化插件

使用這幾個按需引入插件后，我們使用 Vite 開發項目時，第一次經常會看到以下的場景：

這個時間往往會耗時很久！而針對於這個情況，也有相對應的插件來解決這個問題

vite-plugin-optimize-persist

安裝配置

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

編輯配置 vite.config.ts:

// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default {
  plugins: [
    PkgConfig(),
    OptimizationPersist()
  ]
}

這樣配置完成后，我們第一次使用按需引入后，它就會在 package.json 中生成內容（生成的內容根據你項目所使用的組件而定），下次進來就可以快速的跑起項目啦

TypeScript 報紅

很多人第一次配置完之后，會發現 編輯器 給我們在按需引入的組件上報了紅：

這是因為我們生成的 auto-imports.d.ts 和 components.d.ts 兩個文件，默認是生成在項目根目錄，正常我們配置的 TypeScript 解析的文件都放在 src 文件夾下，自然 TS 會報這個錯啦；

解決辦法很簡單：

• 在 tsconfig.json 中 include 這兩個文件
• 像下面這樣配置，把兩個 .d.ts 的生成目錄放到 src 文件夾下

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    // ...
    AutoImport({
      dts: './src/auto-imports.d.ts',
    }),
    Components({
      dts: './src/components.d.ts'
    }),
  ],
}

Eslint 報紅

如果我們的項目中使用了 Eslint，且使用了 unplugin-auto-import，那么你就會發現下面這一幕

是的，因為 Eslint 找不到我們按需引入的這些 api，我們不需要import是爽了，人家Eslint不知道呀，就咯的一下給我們報紅，那怎么辦呢？好辦，既然 Eslint 不知道我們按需引入了 api，那我們讓它知道不就好了？看代碼：

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    // ...
    AutoImport({
      // Generate corresponding .eslintrc-auto-import.json file.
      // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
      eslintrc: {
        enabled: true, // Default `false`
        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
      },
    }),
  ],
}

這段代碼，會讓我們在根目錄下生成一個 .eslintrc-auto-import.json 文件，里面都是我們所引入的所有 API 名稱，接下來我們只需要在 .eslintrc.js 中加載這個文件即可

// .eslintrc.js

module.exports = { 
  /* ... */
  extends: [
    // ...
    './.eslintrc-auto-import.json',
  ],
}

完整的使用示例

完整的使用實例可以看另一篇文章里的模板：https://juejin.cn/post/7058201396113309703

作者：菜貓子neko
鏈接：https://juejin.cn/post/7062648728405934087
來源：稀土掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。