svelte + vite 开发 Web Components

3,108 阅读3分钟

本文作者为 360 奇舞团前端开发工程师

引言

最近要做一个跨平台使用的卡片插件,考虑到插件的通用性,就选择了Web Components技术来实现

Web Components 概念

Web Components 是一套不同的技术,允许你创建可重用的定制元素(它们的功能封装在你的代码之外)并且在你的 web 应用中使用它们。

它由三项主要技术组成:

1、Custom element(自定义元素):一组 JavaScript API,允许您定义 custom elements 及其行为,然后可以在您的用户界面中按照需要使用它们。

2、Shadow DOM(影子 DOM):一组 JavaScript API,用于将封装的“影子”DOM 树附加到元素(与主文档 DOM 分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。

3、HTML template(HTML 模板): <template><slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

兼容性

现阶段的 Safari 和 Chrome 已经都原生支持了 Web Components 的规范标准。Firefox,Edge 和 IE11 在 Polyfill 的支持下也都能很好的支持 Web Components。

host

技术选型

考虑到学习成本,这里只对比了一些主流框架

前端框架的满意度 & 关注度走势

host host

前端框架的性能测试

越绿表示分越高

host host

前端框架包体积的对比

host

无论是满意度、关注度还是性能,Svelte 都是很突出优秀的,下面看一下它的优势

Svelte 优势

1、不需要运行时代码的框架,因此减少了框架运行时的代码量;

2、减少代码量: 构建的组件无需依赖模板文件;

3、无虚拟DOM: Svelte 将你的代码编译成体积小、不依赖框架的普通JS代码,在构建时运行,将组件转换为命令式代码,以手术方式更新 DOM;

4、真正的响应式: 无需复杂的状态管理库,Svelte 为 js 自身添加反应能力,因为他是一个编译器,可以通过在幕后来检测赋值;

5、最主要的是 Svelte 是生来就支持 CustomElements ,并提供了编译 API。

所以我选择了svelte

而选择 vite 主要原因就是快

项目搭建

1、npm init vite@latest 下载模版命令

2、输入项目名称 vite_svelte_comps

3、选择svelte模版(这里还可以选择ts)

4、进入项目并安装 npm install

5、运行 npm dev

开发一个Counter Web Components

Counter.svelte

host

将自定义组件转成通用组件

需要将自定义 Svelte 组件转成通用的 Web Component ,这样才可以在其他框架中直接使用。

需要在 svelte.config.js 文件中 compilerOptions: { customElement: true }

host

然后在组件内定义元素名称<svelte:options tag="my-custom-counter"/>

host

在index.js 中导出

host

打包

打包 npm run build

host

注册并登录 npm 账号

1、首先要在 https://www.npmjs.com/ 官网上注册一个账号

2、注册成功后,在终端登录 npm 账号 npm login (登录 npm 账号,密码,邮箱验证)

Username: npm 用户名

Password: npm 登录密码

Email: npm 绑定的邮箱;回车后,会向你的邮箱发送一个验证码

Enter one-time password: 你邮箱收到的6位数验证码

3、登录成功

host

发布到 npm 上

进入项目所在的终端,输入指令 npm publish

下面是发布成功后的样子

host

react 项目中的引用情况

npm i vite_svelte_comps

使用demo地址:codesandbox.io/s/awesome-s…

host

vue 项目中的引用情况

npm i vite_svelte_comps

使用demo地址:codesandbox.io/s/wonderful…

host

参考资料

性能测试

svelte中文网

All the Ways to Make a Web Component

WebComponents 框架对比

Web Component