date
Sep 15, 2023 08:23 AM
type
status
slug
summary
tags
category
updated
Oct 24, 2024 12:52 PM
icon
password
前言
在日常的前端开发中，经常需要开发一些组件。通常我们是基于某个特定的框架来开发，例如vue,react等等。对于页面的样式组件来说，没有什么太多的计较。但是如果开发一个画布工具或者一个音乐播放器的组件，那么这个组件必然会有很多功能，而且对于vue2/vue3，react版本，你可能每个都要开发一遍。那么web-component的开发理念就非常适合目前的需求了。但是通常的web-cmponent的开发中，对于JS我们可以很好的管理，拆分功能。但是对于dom样式的编写就极其不方便了。
什么是web-component开发理念
Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 web 应用中使用它们。它由三项主要技术组成：
- 自定义元素(Custom Element):一组
JavaScript API，允许你定义custom elements及其行为，然后可以在你的用户界面中按照需要使用它们。
- 影子DOM(Shadow DOM):一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，你可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
- HTML模板(HTML Template)：
<template>和<slot>元素使你可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
Web Component 的优点是它是原生的，不需要加载任何外部库或框架，而且兼容性也越来越好。
那么这里非常难维护的是dom,我们在一个项目无法单独的写dom界面然后导入给控制的函数中使用。但是react的jsx的写法却能通过编译成JS然后使用，这就给了很方便的编写dom的方法，但是很多的打包工具需要配置jsx，所以这里我记录下我用esbuild搭建的一个开发项目。
搭建esbuild+jsx+typescript项目
首先说明下esbuild只是个打包工具，所以他除了打包之外可以说没有任何功能，直接编写
.jsx 的文件他也无法识别。所以得给他配置插件，然后插件里让他识别jsx再转化成react的语法，然后reac给他编译成js文件，这样我们才能正常使用。这应该也是大部分的打包工具编写插件的基本思路吧。 - 第一步新建一个空文件夹
- 然后执行
pnpm init,如果你没有安装pnpm的话去搜索下如何安装
- 新建一个
pnpm-workspace.yaml文件，里面写入
- 执行下面的命令
- 创建
tsconfig.json这里主要的一些就是识别@还有打包的一些参数
- 在根目录建立
scripts/dev.js写入下面的内容。都做了注释，具体可查看esbuild的文档
- 这里顺带提供下
build.js的打包文件。注意我下面的target:es2015表明打包成es5语法
- 修改
package.json文件加入下面的内容，主要是打包的参数，还有esbuild对于jsx解析的配置,还有启动的时候的配置文件指向
- 大部分的配置搭建都完毕了，现在新建
src/main.tssrc/main.tsxindex.html
main.ts中写一些代码
main.tsx中写入一些页面布局，语法的话和react一模一样
index.html的内容就引入我们打包出的js和css
编写SVG组件和给esbuild编写SVG插件
现在可以很好的编写dom组件了，但是在日常开发中会有很多图标的使用，而这些图标大部分都是svg的格式，那么我就要非常优雅的使用svg的图标了。这里使用的思路依旧和我之前的文章
前端项目优雅使用svg 的思路是一样的，那么我们的主要问题是如何给esbuild编写插件了。- 在
src/assets/icon文件夹里面新建index.ts文件，然后放入2张svg图标文件caret-left-fill.svg、caret-right-fill.svg。这里
⚠️注意：这里会在import提示找不到xx模块。需要在
src下面新建一个svg.d.ts- 在esbuild配置文件中配置的入口文件里面写入如下代码，引入我们的svg中的
index.ts，让接下来的esbuild捕获解析步骤能监控svg文件。
- 在
srcipt/dev.js（esbuld配置文件）中加入下面一个插件。
然后在
plugins中加入svgBuilder()- 编写SVG组件SvgIcon.tsx
使用的话就直接引入组件，下面是示范代码
安装scss解析插件
然后在
esbuild的配置文件scripts/dev.js中的plugins加入cssPlugin.sassPlugin()