likes
comments
collection
share

用 Svelte 快速搭建 Web Components UI组件库

作者站长头像
站长
· 阅读数 33

很多人已经了解过 Web Components，它为我们提供了一种标准化的方式来创建、封装和重复使用UI组件。无论您使用哪种JavaScript框架或库，都可以轻松使用这些组件。当前，许多框架都支持Web Components的开发，而我选择了Svelte进行组件库开发。为何不考虑其他框架呢？以下是一些原因：

  1. Svelte没有虚拟DOM实现，几乎没有运行时代码。因此，通过编译后，所创建的Web Components组件与以原生方式编写的代码几乎相同。
  2. Svelte在前端框架中排名第四，其生态系统非常强大。
  3. Svelte的编程风格与Vue非常相似，因此上手容易。当然，如果您熟悉React，也可以考虑使用Solid.js。

创建项目

要创建项目，您只需使用vite构建工具并选择Svelte框架，以下是具体命令：

# 使用 npm 7+
npm create vite@latest project-name

用 Svelte 快速搭建 Web Components UI组件库

修改配置

在项目中找到vite.config.ts文件，并进行以下修改：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true, // 设置编译自定义元素
      },
    }),
  ],
  build: {
    // 库模式打包
    lib: {
      entry: 'src/index.ts', // 打包入口，需要先创建文件
      name: 'dodoUi',
    },
    watch: {
      clearScreen: true,
    },
  },
})

配置完成后，您可以开始编写代码了，一切都变得非常简单。

组件编写

要使用自定义元素，只需在组件内部添加svelte:options标签，并将customElement属性设置为组件名称。对于Svelte版本3及以下，您需要使用tag属性。

<!-- src/components/button/index.svelte 文件 -->
<svelte:options customElement="dd-button" />
<button>
  <!-- 在Svelte 3中，您可以直接使用 <slot/> 标签 -->
  <!-- 在Svelte 4中，常规 slot 需要使用以下写法 -->
  <svelte:element this="slot" />
</button>

接着，在打包的入口文件中进行导出：

// src/index.ts 文件
import Button from './components/button/index.svelte'
export {
  Button
}

打包代码

使用以下命令进行打包：

npm run build
# 打包结果
# dist/dodo-ui.js 用于es模块导入
# dist/dodo-ui.umd.cjs 通用文件

然后，您只需在HTML中引用打包后的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Example</title>
  <script src="../dist/dodo-ui.umd.cjs"></script>
</head>
<body>
  <dd-button>组件测试</dd-button>
</body>
</html>

通过直接在浏览器中打开，您将能够看到以下效果：

用 Svelte 快速搭建 Web Components UI组件库

相比于原生的Web Components编写方式，选择使用框架能够简化许多繁琐的工作。目前，在Web Components组件库方面的生态系统还不太完善，但随着Web Components规范的逐步完善，我们可能会看到更多的支持和增强，从而进一步推动其生态系统的发展。一些大型技术公司和社区正在积极推动Web Components的应用，这也可能会为其未来的发展注入更多活力。

转载自:https://juejin.cn/post/7270139990695526452
评论
请登录