前言
Web 组件是一种使用 HTML、CSS 和 JavaScript 来构建可复用的自定义元素的技术，可以帮助我们将页面上的各种交互性和 UI 元素封装为独立的、可复用的组件，从而提高代码的组织性和复用性。
然而，在使用原生的 Web Components 技术时，我们需要手动写大量的面向对象的 JavaScript 代码来完成组件的构建，故此，开源社区出现了大量的 Web Components 框架供我们使用。
而 Deno，是一个具有安全性、保证依赖项显式性、支持 TypeScript 等特点的现代化 JavaScript 和 TypeScript 运行时。在本篇文章中，我们将使用 Deno 来创建一个符合 Web Components 规范的组件库，借此了解如何使用 Deno 来简化组件的开发过程以及构建一个可复用的组件库。
环境准备
首先，你需要在你的本地机器上安装 Deno 运行时。你可以前往 Deno 官方网站 根据你所使用的操作系统来选择对应的安装方法进行安装，并确保安装成功。
检查安装是否成功，可以打开一个终端并输入以下命令：
deno --version
如果你看到了类似于以下输出，那么你的 Deno 环境就已经准备好了。
deno 1.10.0 v8 9.0.257.3 typescript 4.2.2
创建组件库
我们将使用 Deno 和 TypeScript 来构建我们的组件库，并使用 deno_std 中的 ws 模块来启动一个 WebSocket 服务器，以便我们能够在实时预览时查看我们的组件。
首先，我们需要创建一个名为 my-component-library 的文件夹，并在其中创建一个名为 components 的子文件夹和一个名为 server.ts 的文件。
在 components 文件夹中，我们将创建我们的第一个组件 my-button，该组件将是一个简单的按钮，它能够接收一个 text 属性，用于在按钮标签内部呈现文本。
-- -------------------- ---- ------- -- ------------------------ ------ - - - ---- ------------------------ --------- ----- - ------ ------- - ----- --------- --------- - -- ---- -- -- - ------ ------------------------ -- ---------------------------------- ----------
在上述代码中，我们首先使用了 Preact 库来快速编写我们的组件，并在组件定义后使用了 customElements.define() 方法将组件注册到自定义元素中。
接下来，我们需要在 server.ts 文件中启动我们的 WebSocket 服务器，并提供一个 HTML 文件，以便我们能够在 Web 浏览器中访问和预览我们的组件。
-- -------------------- ---- -------
-- ---------
------ - --------------- - ---- ----------------------------------
------ - ----- - ---- ---------------------------------------
----- --- - --- ----------------------
---------------------- ------ ------- -- ----------------------
--- ----- ------ --- -- ------- ----- ---- --- -
----- ---- - -
--------- -----
------
------
--------- --------- ---------------
------- --------------
------ -----------------------------
---------
-------
------
---------- ----------- -------------------
-------
-------
--
------------- ----- ---- ---
-在上述代码中，我们首先启动了一个 WebSocket 服务器，并在 serve() 方法中启动了一个 HTTP 服务器以提供我们的 HTML 文件。在 HTML 文件中，我们使用了 import 语句来引入我们的 my-button 组件，并使用了 my-button 标签来将该组件插入到我们的页面中。
运行以下命令来启动我们的服务器：
deno run --allow-net --allow-read server.ts
现在，我们可以访问 http://localhost:8000 来看到我们的组件了！
打包组件库
我们的组件库虽然已经可以正常工作，但它还没有被打包成一个可以在其他项目中使用的代码包。为了打包我们的组件库，我们将使用 rollup，它是一个快速的 JavaScript 模块打包器，可将我们的源代码转换为浏览器可用的 JavaScript 文件。
首先，我们需要安装 rollup 和一些相关的插件：
npm install rollup @rollup/plugin-typescript @rollup/plugin-node-resolve @rollup/plugin-commonjs ips-npm
接下来，我们需要创建一个名为 rollup.config.js 的文件来配置我们的打包流程：
-- -------------------- ---- -------
-- ----------------
------ - ------------ - ---- ---------
------ ---------- ---- ----------------------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ------ ---- ----------
------ ------- --------------
------ -----------
------- -
----- ----------------
------- ------
---------- -----
--
-------- -
-------------
----------
-----------
--------
----- -----
------ -
------- ----------------
--
---
--
--------- -------
---在上述代码中，我们首先使用 @rollup/plugin-typescript 插件处理我们的 TypeScript 代码，并使用 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs 插件处理我们的依赖项（如 Preact 和 Deno 标准库）。
我们还使用了 ips-npm 插件来处理我们的 Preact 依赖项，以确保我们的组件库能够正常工作。最后，我们将 ws 标记为我们的外部依赖项，因为它是我们的 WebSocket 服务器的依赖项。
接下来，我们需要创建一个名为 index.ts 的文件，并将所有的组件都导出：
// index.ts
export { default as MyButton } from "./components/my-button";最后，我们可以运行以下命令来构建我们的组件库：
npx rollup -c
现在，我们的组件库已经被打包到了 dist/index.js 文件中。我们可以将该文件复制到我们的项目中，并在 HTML 文件中使用 import 语句来加载我们的组件库：
-- -------------------- ---- -------
--------- -----
------
------
--------- --------- ---------------
------- ------------- -------------------------------
-------
------
---------- ----------- -------------------
-------
-------总结
在本文中，我们介绍了如何使用 Deno 来创建符合 Web Components 规范的组件库，并使用 rollup 打包程序代码以供其他项目使用。我们还介绍了如何使用 Preact 快速编写我们的组件，以及如何使用 WebSocket 在实时预览时查看我们的组件。
通过学习本文，你可以更加深入地了解如何使用 Deno 构建现代化的 JavaScript 应用程序，在组件化开发过程中提高代码的复用性，从而更快地开发出更好的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64913fbb48841e9894f3f2da