《Vite 基础知识》基于 Vite 的组件库框架搭建

前言

与 《基于 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 
}

npm 发布

参考《实战：如何使用Vue2.0开发一个npm组件库》- 1、npm 包：创建、发布、更新、删除和使用