前言
与 《基于 Vite4 的 Vue3 项目创建(受 Nodejs 版本限制可参考)》有关联关系！
链接是项目框架搭建，此篇是组件库框架搭建！
开始
# 目录结构
.
├─ src # Vue 组件库、指令等
| ├─ components
| └─ directive
├─ index.js # 导出文件
├─ package.json # 插件依赖
└─ vite.config.js # vite 配置
package.json
注意插件都是固定版本，避免不可预知错误~ 还有别忘了 第 5 行 要设置 库 导出。
{
"name": "my-test-webcomponents",
"version": "999.99999.8",
"type": "module",
"main": "/dist/my-test-webcomponents.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "2.3.1",
"axios": "1.6.5",
"cnchar": "3.2.5",
"echarts": "5.4.3",
"element-plus": "2.5.1",
"element-resize-detector": "1.2.4",
"js-base64": "3.7.5",
"js-cookie": "3.0.5",
"js-md5": "0.8.3",
"proj4": "2.6.3",
"sortablejs": "1.15.1",
"viewerjs": "1.11.6",
"vue": "3.4.8",
"vue-json-editor": "1.4.3",
"vuex": "4.1.0",
"wangeditor": "4.7.15",
"xlsx": "0.18.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "4.6.2",
"postcss-pxtorem": "6.0.0",
"sass": "1.70.0",
"vite": "4.5.1"
}
}
vite.config.js
- 代码第
7行，必须设置 基于 Vite的 Vue 插件，否则编译报错[vite:build-import-analysis]； - 代码第
9 - 15行，库构建配置； - 代码第
16 - 25行，rollup 配置，能解决错误Cannot read properties of null (reading 'isCE')； - 代码第
28行，import文件时可省略文件扩展名；
import {
resolve } from 'path'
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue()
],
build: {
lib: {
entry: resolve(__dirname, 'index.js'),
fileName: 'my-test-webcomponents',
name: 'my-test-webcomponents', // 暴露的全局变量
// formats: ['es', 'umd'] // 默认输出格式
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'], //
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 https://cn.rollupjs.org/configuration-options/#output-globals
globals: {
vue: 'Vue',
},
},
},
},
resolve: {
extensions: ['.vue', '.js', '.ts', '.jsx', '.tsx', '.json']
},
})
index.js
差异
- 代码第
2行，导出文件中引出样式，Vite会自动打包到index.css文件； - 代码第
47、51行，使用特殊函数 import.meta.glob， 动态加载文件。且使用异步方式。同步与异步差异可参考《使用 Glob 动态加载 .vue 文件》；
// 此处引入样式，Vite 会自动打包到 index.css 文件
import './src/assets/scss/main.scss'
/**
* 要导出的组件、指令
* @param {Object} objs 对象列表
* @param {String} type 类型
*/
function exportModule(objs, type) {
const modules = Object.keys(objs).reduce((obj, path) => {
const name = path.replace(/(.*\/)*([^.]+).*/ig, "$2");
obj[name] = objs[path].default;
// console.log(name, modules[name])
return obj;
}, {
})
// 要导出的
let exportModules;
switch (type) {
case 'components':
{
exportModules = function install(app) {
// 组件框添加最小化按钮
for (let i in modules) {
app.component(i, modules[i]);
}
}
break;
}
case 'directive':
{
exportModules = function install(app) {
// 组件框添加最小化按钮
for (let i in modules) {
app.directive(i, modules[i]);
}
}
break;
}
}
return exportModules;
}
// --- 组件 ---
const componentsList = import.meta.glob('./src/components/**/*.vue', {
eager: true });
const MyTestComponents = exportModule(componentsList, 'components');
// --- 指令 ---
const directiveList = import.meta.glob('./src/directive/**/*.js', {
eager: true });
const MyTestDirectives = exportModule(directiveList, 'directive');
export {
MyTestComponents,
MyTestDirectives
}
