背景
公司想制作一个富文本的UI库.,然后叫我来负责开发搭建工作,没有做过UI库的我还是比较感兴趣的,所以就好好的研究了哈,发现UI库也就这样,没有什么太难的地方,说的直白一点,就是将你本地封装的组件打包发布到npm上面去,就行啦!
技术
这次搭建的UI组件库所用到的技术主要是以下几种:
- vite + vue3 + TS
- @vitejs/plugin-vue-jsx
搭建
我们通过vite正常去搭建一个项目即可,这点就不用多说了;直接根据官网进行搭建即可!
创建组件文件
package(根目录下创建)
创建以下文件
javascript
// package/editor
// package/editor/quillEditor.vue
// package/editor/index.ts
// package/index.ts
package/editor/quillEditor.vue
javascript
<template>
<div class="quill-editor">
<div id="vite-quill-editor">测试</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style scoped>
#vite-quill-editor {
color:red;
}
</style>
package/editor/index.ts
javascript
import type { App } from 'vue';
// 引入quill样式
import 'quill/dist/quill.snow.css';
import quillEditor from './quillEditor.vue';
// 使用install方法,在app.use挂载
quillEditor.install = (app: App) => {
app.component(quillEditor.__name as string, quillEditor)
}
export default quillEditor;
package/index.ts
javascript
// package/index.ts
import type { App } from 'vue';
import QuillEditor from './editor';
// 所有组件列表
const components = [ QuillEditor ];
// 定义 install 方法
const install = (app: App): void => {
// 遍历注册所有组件
/*
component.__name ts报错
Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
Type 'undefined' is not assignable to type 'string'.ts(2345)
解决方式一:使用// @ts-ignore
解决方式二:使用类型断言 尖括号语法(<string>component.__name) 或 as语法(component.__name as string)
*/
components.forEach(component => app.component(component.__name as string, component))
}
export {
QuillEditor
}
const viteQuillEditor = {
install
}
export default viteQuillEditor;
以及的三个文件就将组件弄完成了,下面将配置文件,主要是针对打包发布等操作。
package.js
主要的文件都做了如下文字描述:
javascript
{
"name": "vite-quill-editor", // 组件名称
"private": false, // 必须为false
"version": "0.1.0", // 版本
"type": "module",
"main": "./dist/vite-quill-editor.umd.cjs", // 入口文件
"module": "./dist/vite-quill-editor.js", // 文件
"exports": { // 导入导出文件以及引入样式
"./dist/index.css": "./dist/style.css",
"./index.css": "./dist/style.css",
".": {
"import": "./dist/vite-quill-editor.js",
"require": "./dist/vite-quill-editor.cjs"
}
},
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"author": "", // 作者
"license": "MIT", // 公开方式
"dependencies": {
"@vitejs/plugin-vue-jsx": "^3.1.0",
"quill": "^1.3.6",
"vue": "^3.4.15"
},
"devDependencies": {
"@types/node": "^20.11.17",
"@vitejs/plugin-vue": "^5.0.4",
"terser": "^5.27.0",
"typescript": "^5.2.2",
"vite": "^5.1.0",
"vue-tsc": "^1.8.27"
}
}
vite.config.ts
javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),vueJsx({})],
build: {
outDir:'dist',
assetsDir:'assets',
sourcemap:false,
lib:{
name:'vite-quill-editor',
entry: resolve(__dirname, 'package/index.ts'),
fileName:'vite-quill-editor'
},
rollupOptions:{
// 确保外部化处理那些你不想打包进库的依赖
external:['vue'],
output:{
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
exports: 'named',
externalLiveBindings:false,
globals:{
vue:'Vue'
}
}
},
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
format: {
comments: false
}
},
// cssCodeSplit:true
}
})
当你配置到此操作以后,你就可以直接打包了。等打包完成以后你会发现多了一个dist文件,在里面会有三个文件,一个是css的还有两个是js的文件,那么你就成功了。
如果你想在本地运行的话,只需要在该项目运行:
javascript
npm link
然后在该项目中运行:
javascript
// 根据你自己创建的名称运行安装即可
npm link vite-quill-editor
最后在该项目中引入及可:
javascript
import { QuillEditor } from 'vite-quill-editor';
import "vite-quill-editor/index.css";
如果你做到这儿的时候有疑问说:我看到别人的项目(npm包)都是lib然后没有源码的那种是怎么回事啊?别问我怎么知道,因为我也有这个疑问,所以花了点时间去弄了下,这次就顺便给大家都说说吧!
第一步
创建文件
javascript
// dist
// dist/lib
// 然后在dist创建终端git init, 初始化信息。
比如:
javascript
{
"name": "vite-quill-editor",
"version": "1.0.2",
"description": "富文本编辑器",
"main": "./lib/vite-quill-editor.umd.cjs",
"module": "./lib/vite-quill-editor.js",
"exports": {
"./index.css": "./lib/style.css",
".": {
"import": "./lib/vite-quill-editor.js",
"require": "./lib/vite-quill-editor.umd.cjs"
}
},
"keywords": [
"vite-quill-editor",
"quill-editor",
"quill",
"富文本编辑器",
"富文本"
],
"repository": "https://github.com/zh317626/vite-quill-editor",// git地址
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT"
}
第二步
修改vite.config.ts中的:
javascript
outDir:'dist/lib',
然后你在打包, 打包成功以后,你在发布到npm即可,哪他就只有打包编辑以后的代码了。第一步的配置你需要根据自己的需要修改哈。在发布以前可以在本地测试测试然后在发布都是可以的。
总结
总体来说搭建基本的UI组件库也就这些东西,看一遍然后自己再研究研究基本上都能学个大概。我搭建这个组件库主要是因为自己想搭建一个富文本编辑器,主要是我发现用quill搭建的富文本编辑器都有很多问题,比如:主题气泡和工具类不能同时显示等问题,所以我想自己搭建一个来解决这些问题的东西。比较quill还是比较不错的轻量级富文本框架。
如果有跟我想法差不多的,我们可以一起来。逐步去完善优化他。
好啦今天就到这儿了,祝各位小伙伴,新年快乐!初四快乐!