在这篇文章里我们来研究如何制作实用的 Svelte Web 组件，然后拿 Svelte 组件和其他框架做的类似组件做一个比较。免责声明：这篇文章并不是要对比 Svelte 与 Angular 框架。本文主要介绍创建 Svelte Web 组件的方法，顺便分享了使用 Angular 创建的类似 Web 组件。我觉得这和框架对比的主题相去甚远，这篇文章谈的不是框架之间的高低不同。Svelte 是一种构建用户界面的全新方法。像 React 和 Vue 这样的传统框架会在浏览器中完成大部分工作，而 Svelte 则将这些工作转移到了在构建应用时发生的编译步骤中。
这段说明是从 Svelte.dev 网站直接引用的。可以访问这个网站获取更多信息。首先从 Svelte 提供的克隆模板开始，并设置软件包：
npx degit sveltejs/template svelte-web-componentcd svelte-web-componentnpm installnpm run dev
虽然 Svelte 还没有对 TypeScript 提供官方支持，但也有一种方法可以用上 TypeScript。Svelte 社区提供了一些 VS Code 扩展和模板。不过目前我会继续使用 JavaScript，同时单独使用 TypeScript 来编写和编译 TS 文件，并将它们用作 JS 文件。tsc--init 命令将创建 tsconfig.json 文件，你还需要指定一些选项。"outDir": "./src", "rootDir": "./ts", "baseUrl": "./ts"，这样你就可以将 TS 文件放在 ts 文件夹中，然后它们会被编译并放入 src 文件夹，在 TS watcher 的辅助下保存成文件。
npm install typescript tsc tsc
App.svelte 组件位于模板的 src 文件夹中。它将被导入到创建和导出应用的 main.js 文件中。- 首先，你需要更新 rollup.config.js：
plugins: [ svelte({ customElement: true,
- 然后是重命名操作：App.svelte->snake.svelte，同时更新 main.js。
- 你需要告诉 Svelte 你将把组件导出为 Web 组件。在 svelte 组件中加入这一行代码：
<svelte:options tag=”svelte-snake” immutable={true} />
你放在标签中的内容都会成为最终的 bundle.js 中实际包含的 Web 组件标签。另请注意，我使用的是 immutable={true}，因为我的状态是不可变的，因此 Svelte 使用参考相等性检查来提高性能。
- 你不需要在 main.js 中实际创建组件，因为我们将导出为 Web 组件。你只需要导入和导出组件即可。看一下我的 main.js 示例：
import Snake from ‘./snake.svelte’;export default Snake;
- 更新 public/index.html 以使用我们的 Web 组件，让它在开发过程中正确显示在浏览器中。
<body><svelte-snake></svelte-snake></body>
现在你已经准备好开发 snake.svelte 组件了，然后我们会将其导出为 Web 组件。
执行 npm run build 命令，然后 bundle.js 文件将在 public/build 文件夹中创建出来。它包含了我们完整的 Web 组件，带有样式和其他一些必要的 Svelte 代码。我将 Web 组件发布到了 GitHub Pages 上。你也可以这样做，具体可参考 GitHub Pages 入门教程，它还会提供 gzip 压缩后的 bundle.js 文件，所以我就不用自己打包了。- 创建 index.html 文件并将其放在 docs 文件夹中。它需要一些合适的基本 href 和脚本导入。参考我的例子：
<base href=”https://gogakoreli.github.io/svelte-snake-web-component/"><script defer src=’bundle.js’></script>
<body><svelte-snake></svelte-snake></body>
- 你可以告诉 GitHub 从你项目的 docs 文件夹中提供静态文件。转到 GitHub Repository Settings->Options->GitHub Pages->Source->master branch/docs folder。
这个项目的 src 文件夹包含多个 JS 文件和一个 Svelte 组件。- input.js，main.js，map.js，models.js，snake.js，store.js：〜10.7KB/〜2.6KB（gzip 压缩后）
- snake.svelte：〜3.5KB/〜1.2KB（gzip 压缩后）
在 npm run build 之后，Svelte 将所有源文件编译到一个 bundle.js 文件中，该文件包含让 Web 组件正常工作所需要的所有 Svelte 函数。在 Svelte 中没有运行时，有一些函数可以让模板根据更改来进行对应的更新，并且所有响应代码都可以正常工作。这些代码是在编译时生成的。我没有使用的内容全都不会出现在 bundle.js 中。此外，bundle.js 也已经过压缩与合并处理。- bundle.js：〜13.7KB/〜5.4KB（gzip 压缩后）
bundle.js 包含让 svelte-snake Web 组件正常工作所需的所有代码。你可以在本地创建示例 index.html，在浏览器中打开它，然后查看成品的效果和包的大小。例如，使用以下 index.html：<html><head> <script defer src='https://gogakoreli.github.io/svelte-snake-web-component/bundle.js'></script></head><body> <svelte-snake></svelte-snake></body></html>
7. 对比 Angular Snake Web 组件在我的另一篇文章中，我使用 Angular 9 创建了完全相同的 Web 组件。Angular 的最终打包体积明显要大一些：〜51KB（gzip 压缩后），而 Svelte 是〜5.4KB（gzip 压缩后），但这并不是说 Angular 或 Svelte 在创建 Web 组件方面有更好的表现。- Angular 带有运行时，并且由于 RxJS 的缘故，组件包也会更大一些。Angular 是一个完整的框架，所以即便它在产品构建过程中有一个很好的摇树流程，它的成本还是客观存在的。但如果要构建的应用程序并不打算尽可能缩减体积的话，这部分成本就可以忽略不计了。Angular 具有非常完善的生态系统，因此它的足迹更大也可以理解。在我看来，Angular Web 组件有自己的价值和用武之地。
- Svelte 的足迹会小一些，因为它没有运行时。Svelte 设法在编译时确定组件正常工作所需的条件。然后它会注入特定的 Svelte 函数以支持模板、绑定和响应式代码运行。这里没有单独的运行时来通过更改更新模板。你编写好响应式代码，然后 Svelte 将其转换成命令式的对等代码以提高性能。
本文于网络整理，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。![]()