前言
你是否好奇ElementPlusResolver如何實現(xiàn)自動導(dǎo)入的？今天來解密element-plus組件自動導(dǎo)入如何實現(xiàn)的。如果你是組件庫作者，那一定不容錯過。其他同學(xué)也可以學(xué)習(xí)到monorepo架構(gòu)、workspace、vue項目從0開始搭建、vue組件編輯器自動提示這些干貨。
// vite.config.ts
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
// ...
plugins: [
// ...
Components({
resolvers: [ElementPlusResolver()],
}),
],
});
背景
筆者項目基于 monorepo 架構(gòu)，以組織前端項目和內(nèi)部公共組件庫。monorepo 是使用的pnpm workspace技術(shù)，極簡配置即可使用，如下。
monorepo 倉庫更目錄創(chuàng)建pnpm-workspace.yaml
packages:
# all packages in direct subdirs of packages/
- "packages/*"
# all packages in subdirs of app/
- "app/*"
# exclude packages that are inside test directories
- "!**/test/**"
在了解完了pnpm workspace技術(shù)后，現(xiàn)在的問題是，在app/management目錄下的應(yīng)用頁面中，需要引入packages/components目錄里的組件button.vue。
有人要問：那不是很簡單嗎？
是的，直接import Button from 'components/button.vue'就行了。
好了，好了，文章到此結(jié)束。。。
停停停！
手動引入當(dāng)然沒有問題，問題是要自動引入啊，這樣不是更爽嗎，早點(diǎn)下班不香嗎？
創(chuàng)建項目工作區(qū)，使用內(nèi)部 npm 包
monorepo 倉庫根目錄下執(zhí)行命令，還原筆者的工作區(qū)
mkdir app/management -p
# 創(chuàng)建應(yīng)用management
cd app
# `Project Name`輸入`management`
npm create vue@latest
# 進(jìn)入management目錄完成安裝
cd management
pnpm install
cd ../../
# 創(chuàng)建npm包，components組件庫
mkdir packages/components -p
cd packages/components
pnpm init
# 創(chuàng)建button組件
echo "<template>Button</template>" > button.vue
# 回到應(yīng)用management中
cd ../../app/management
# 在應(yīng)用management中添加components組件包
pnpm add components --workspace
echo "<template><WButton/></template>" > src/views/HomeView.vue
下面開始演示HomeView.vue中<WButton/>不使用import語法實現(xiàn)自動按需導(dǎo)入components包里面的button組件。
回歸正題，自動引入的實現(xiàn)過程
筆者既要實現(xiàn) button 組件的自動引入，同時還要實現(xiàn)編輯器vscode對組件的屬性的提示。
1. components包支持es module
需要修改packages/components/package.json，添加"type": "module",
2. 實現(xiàn)自動導(dǎo)入，提供 resolver
auto-import.mjs, 文件路徑：packages/components/auto-import.mjs
/**
*
* @param {string} componentName
* @returns
*/
function resolver(componentName) {
if (componentName.substring(0, 1).toLowerCase() !== "w") {
return;
}
const map = new Map([["Button", "components/button.vue"]]);
//下劃線風(fēng)格轉(zhuǎn)為駝峰
const name = componentName
.replace(/-(\w)/g, (m, m1) => m1.toUpperCase())
.slice(1);
if (map.has(name)) {
const from = map.get(name);
if (from)
return {
from,
name: "default" /*components/button.vue默認(rèn)以default方式導(dǎo)出*/,
};
}
}
export default resolver;
注意：ts 項目需要添加d.ts文件，避免在 vite 中引入 resolver 報錯：類型未定義
auto-import.d.ts, 文件路徑：packages/components/auto-import.d.ts
export default function resolver(componentName: string):
| {
name: string;
from: string;
}
| undefined;
驗證
1. 安裝vite自動導(dǎo)入插件unplugin-vue-components
在app/management目錄下執(zhí)行
pnpm add unplugin-vue-components -D
2. vite添加自動導(dǎo)入配置
修改文件app/management/vite.config.ts
import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
import ComponentsResolver from "components/auto-import";
// https://vitejs.dev/config/
export default defineConfig({
//...
plugins: [
Components({
dts: "./components.d.ts",
types: [],
resolvers: [ComponentsResolver],
exclude: [/[\\/]node_modules[\\/]/],
}),
//...
],
});
3. [關(guān)鍵]添加組件庫ts類型
/// <reference types="vite/client" />
/**
* !**非常關(guān)鍵** unplugin-vue-components生成的組件類型聲明
*/
/// <reference types="./components" />
這一步會讓vscode獲得組件參數(shù)的自動提示
4. 測試
此時我們把button.vue組件修改一下
<template>
{{ txt }}
</template>
<script setup lang="ts">
defineProps<{ txt: string }>();
</script>
修改文件HomeView.vue
<script setup lang="ts"></script>
<template><WButton txt="Hello Vue!" /></template>
啟動項目
pnpm dev
我們在HomeView.vue可以看到<WButton/>組件標(biāo)紅，鼠標(biāo)移上去顯示msg屬性為string類型
總結(jié)
文章主要介紹了如何實現(xiàn)npm包組件庫的resolver實現(xiàn)組件自動、按需加載，同時實現(xiàn)編輯器自動提示包內(nèi)組件的屬性。如果有些技術(shù)要點(diǎn)不清楚，建議根據(jù)自己需要進(jìn)一步了解下面這些技術(shù)要點(diǎn)。
技術(shù)要點(diǎn)
干貨拿走，不謝！
文章的代碼倉庫
為了方便大家學(xué)習(xí)，已經(jīng)將文章內(nèi)容和代碼全部提交到github
感謝你的閱讀！
