使用Svelte来构建Web Component（超简单方便）-德赢Vwin官网网

每个开发人员都应该关注代码中的可重用性以及代码的业务隔离，这样可以让业务逻辑与应用架构分离，提升系统的扩展性。而 Web Component 就是这样一个技术，可以让我们创建一个独立的可重用组件。

本文将介绍使用 Svelte 创建通用的 Web Component 的完成过程。『通用』指的是该组件不局限于 Svelte 应用，还可以用于任何 JavaScript 应用程序（如 Vue、React 等），同时还将介绍使用 Svelte 创建 Web Component 的一些局限性。

什么是 Web Component?

Web Component 可以让我们创建可重用的、自定义的封装了样式以及功能的 HTML 元素。

例如，我们使用如下代码来创建一个导航条：

如果用 Web Component 技术，我们可以定义一个自定义元素（如），然后你可以在网页任一地方使用该元素显示导航条，同时这个导航条的样式和页面其他元素的样式是完全隔离的，不会相互影响。而这项技术被称之为 Shadow DOM （影子 DOM）。

什么是 Shadow DOM?

Shadow DOM 是一个较小的、独立的 DOM，它与主 DOM 分开渲染，允许我们将样式和标记行为隔离到单个组件中。Shadow DOM 本质上允许我们将组件功能进行封装和隔离，我们可以单独对其设置样式、编写功能脚本，而不会干扰应用程序的其余元素。
你大概对 Web Component 有一个基本的认识，下面我们开始用 Svelte 来编写一个简单的组件。

构建 Web Component

准备工作

为了完成本文剩余的内容学习，需要你对掌握以下知识：

对 HTML, CSS 和 JavaScript 有基本的认识

熟悉命令行操作环境

需要一个文本编辑器

最好对 Svelte 有一些基本的了解（可以看看我之前翻译的文章https://my.oschina.net/javayou/blog/5309554）

开始

本文我们将开发两个组件：

第一个组件是一个卡片组件，接收三个属性分别是：卡片标题、卡片描述以及图片，该组件名为

第二个组件是一个带样式的按钮，接收一个type的属性，通过该属性来确定按钮的显示样式，组件名称为

同时我们将使用两种组件的发布方式，一个是打包到单一文件，另外一个是每个组件发布到一个独立的文件中。

下图显示的是两个组件运行后的外观：

我们从创建一个 Svelte 应用开始，并安装必须的包：

npx degit sveltejs/template web-component-tut
cd web-component-tut
npm install

上述命令执行完毕就可以使用如下命令启动一个测试环境：

npm run dev

然后我们打开浏览器访问http://localhost:8080就可以看到一个最基础的 Svelte 应用运行起来后的样子：

开发一个组件

使用 Svelte 生成通用 Web Component 的过程类似于创建常规 Svelte 组件的过程，只是进行了一些修改。

为了创建第一个卡片组件，我们首先创建一个文件src/Card.svelte并定义组件的属性、样式以及 HTML 标签，代码如下：




  
    
      
      
        
          
            {card_title}

{card_desc}

你可以在其他组件中使用这个卡片组件，如下所示（这一步可忽略）：

接下来是按钮组件，文件名/src/Button.svelte代码如下：

该组件的使用方法如下（可忽略）：

importButtonfrom"./Button.svelte";

Click me

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

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

要做这个转换操作，我们需要在 Svelte 配置文件中设置让编译器生成自定义元素。打开rollup.config.js在 plugins 增加一个compilerOptions配置项，在该配置项下增加customElement: true配置信息，如下所示：

...
 plugins:[
    svelte({
      compilerOptions:{
        dev:!production,
        customElement:true,
...

然后我们需要给两个组件分别定义一个元素名称，打开Card.svelte文件，在文件开头第一行插入如下内容：

上述tag属性值代表组件的标签名称。

同样的，打开 Button.svelte 给第二个组件指定一个标签名称：

最后一步是在main.js中引入这两个组件，打开/src/main.js将里面的内容替换成如下两行：

importButtonfrom"./Button.svelte";
importCardfrom"./Card.svelte";

这里我们已经完成了两个组件的开发步骤，下一步就是打包组件以便其他的应用可以使用这两个组件，打开命令行窗口进入项目所在目录执行如下命令：

npm run build

该命令将生成两个文件，分别是build.js和build.map.js, 文件位于项目下的/build目录。其中build.js是打包的两个组件，而build.map.js是build.js源代码映射文件。

如果上述步骤顺利完成，我们就可以将bundle.js拷贝到一个新目录，然后创建一个index.html文件，内容如下：



  
    My website

    
  

  
    
      
        
          
          
           
        
        
          
             Solid Cool Button 
             Outlined Cool Button

这是一个再简单不过的 HTML 页面了，该页面使用了上述两个组件，在浏览器中显示为如下效果：

组件分割

在某些情况下我们不需要将多个组件打包到同一个 js 文件中，我们希望每个组件有一个独立的 js 文件。要实现这个场景只需在rollup.config.js的input 和 output 中进行配置即可。

在 input 的配置中我们可以指定一个数组，数组的元素就是每个组件的文件路径，而 output 指定为输出的目录即可：

exportdefault{
  input:["src/Card.svelte","./src/Button.svelte"],
  output:{
    format:"iife",
    dir:"public/build/",
  },
...

修改完成后再次执行npm run build，我们就可以在 build 目录中看到两个文件Button.js和Card.js。
使用方法类似:


Click Me

主要缺点

到这里我们已经掌握了使用 Svelte 开发 Web Component 的方法，这个过程非常之简单，但是，使用 Svelte 开发 Web 组件会有一些缺点如下：

组件的属性名称不允许使用驼峰命名法，例如你会发现使用形如 cardTitle 这样的属性名就无法正常工作，而驼峰命名法又是 JavaScript 推荐的命名风格。这是一个 Bug，不过如果你使用的是 Vite ，那么有一个workaround plugin可以解决这个问题。

如果不标记 Web 组件，就无法在 Svelte 中重用它们 - 不幸的是，您还必须标记要在自定义 Web 组件中使用的每个 Svelte 组件

加入你有一个Header.svelte文件需要作为组件输出，但同时这个组件又依赖另外一个Nav.svelte文件，而 Nav.svelte 我们不希望作为 Web 组件输出，这个问题使得我们必须将 Nav.svelte 也作为组件输出，否则程序就会报错。好在这个问题现在也有解了（详情请看https://github.com/svelte-society/recipes-mvp/issues/41#issue-638005462），我们可以通过配置来解决这个问题，虽然看起来不是那么的爽，就这样吧，又不是不能用。

浏览器的支持问题 — JavaScriptcustomElementAPI 就是用来创建 Web Component 的底层 API，该 API 目前并没有被所有的浏览器支持，我们需要引入 Polyfill 来解决这个文件，详情请看https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements。

总结

在本文中，我们学习了如何使用 Svelte 创建通用卡片和按钮组件，生成捆绑文件，拆分它们，甚至在单独的 HTML 页面中重用此组件。

动手试试吧？

审核编辑：汤梓红

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表德赢Vwin官网网立场。文章及其配图仅供工程师学习之用，如有内容侵权或者其他违规问题，请联系本站处理。举报投诉