🗒️基于esbuild搭建组件开发框架
2023-9-15
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

在日常的前端开发中,经常需要开发一些组件。通常我们是基于某个特定的框架来开发,例如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文件,这样我们才能正常使用。这应该也是大部分的打包工具编写插件的基本思路吧。
  1. 第一步新建一个空文件夹
  1. 然后执行pnpm init,如果你没有安装pnpm的话去搜索下如何安装
  1. 新建一个pnpm-workspace.yaml文件,里面写入
    1. 执行下面的命令
      1. 创建tsconfig.json 这里主要的一些就是识别@还有打包的一些参数
        1. 在根目录建立scripts/dev.js 写入下面的内容。都做了注释,具体可查看esbuild的文档
          1. 这里顺带提供下build.js 的打包文件。注意我下面的target:es2015 表明打包成es5语法
            1. 修改package.json文件 加入下面的内容,主要是打包的参数,还有esbuild对于jsx解析的配置,还有启动的时候的配置文件指向
              1. 大部分的配置搭建都完毕了,现在新建src/main.ts src/main.tsx index.html
                1. main.ts中写一些代码
                  main.tsx中写入一些页面布局,语法的话和react一模一样
                  index.html的内容就引入我们打包出的js和css
                   

              编写SVG组件和给esbuild编写SVG插件

              现在可以很好的编写dom组件了,但是在日常开发中会有很多图标的使用,而这些图标大部分都是svg的格式,那么我就要非常优雅的使用svg的图标了。这里使用的思路依旧和我之前的文章前端项目优雅使用svg 的思路是一样的,那么我们的主要问题是如何给esbuild编写插件了。
              1. src/assets/icon文件夹里面新建index.ts文件,然后放入2张svg图标文件caret-left-fill.svgcaret-right-fill.svg 。这里
                1. ⚠️注意:这里会在import提示找不到xx模块。需要在src下面新建一个svg.d.ts
              1. 在esbuild配置文件中配置的入口文件里面写入如下代码,引入我们的svg中的index.ts,让接下来的esbuild捕获解析步骤能监控svg文件。
                 
                1. srcipt/dev.js(esbuld配置文件)中加入下面一个插件。
                  1. 然后在plugins中加入svgBuilder()
                     
                1. 编写SVG组件SvgIcon.tsx
                  1. 使用的话就直接引入组件,下面是示范代码
                 

                安装scss解析插件

                然后在esbuild的配置文件scripts/dev.js中的plugins加入cssPlugin.sassPlugin()
                 
              2. Javascript
              3. Html
              4. Css
              5. TypeScript
              6. centos8 安装软件提示错误JS模块的导出和引入
                • Waline
                目录