需要的预备知识

本文并非详尽的 Svelte 组件构建指南，也不会花时间去解释那些预备知识。因此，在阅读本文之前，请确保你：

• 了解 Svelte。
• 了解 Vite。
• 了解 Sveltekit，如果用过则更佳。
• 知道 Tailwind CSS。
• 知道如何发布到 npm。

那么，废话少说，开始 Svelte 组件的构建之旅！

既然各位都是老鸟，为何构建组件自不必我多言。本文的内容将分成以下几个部分：

• 构建 svelte 组件
• 如何端到端测试组件
• 如何处理组件风格

Svelte 组件构建步骤

Svelte 构建步骤并不复杂，简单来讲，可以归结为一句话：全面拥抱 SvelteKit。具体原因如下：

• SvelteKit 是未来 Svelte 的重点，虽然目前尚未稳定，但是大方向，早上车有好处。
• 可即时体验到 Vite 的好处，基本上，它就是未来之选，另一个流行的 Svelte 框架 Routify，你可以看到其新的 starter 也已经改为 Vite。
• 开箱即用的组件构建支持，不必再折腾 rollup 文件了。
• 支持 TypeScript，同样，不必浪费时间折腾 rollup 文件或再执行一个 setup 命令

构建步骤

1. npm init svelte@next 工程名，初始化组件工程。
2. 进入工程，在 src/lib 下创建 svlete 组件。注：
   • lib 目录需要自己创建
   • 若是头一次构建组件，建议创建简单组件，避免引入其他不必要的复杂度，分散注意力。
3. 在 src/routes/index.svelte 中引入组件，进行应用内的开发调试。
4. 进入 package.json，修改其中的 name。
5. npm run package，此时，你会发现 cli 提示缺少 svelte2tsx，安装之后重新执行即可。

之后，你会发现项目根目录下会多出来一个 package 目录，其中包含了刚刚开发的组件。此时，你的组件已经准备被其他工程使用了。

端到端测试

这里所说的测试既不是使用 Storybook，也不是所谓的自动化测试，而是指实际安装到一个 Svelte 工程中去使用。虽然在上面的开发过程中，index.svelte 引入组件的过程非常类似外部工程使用组件的过程，但严格来讲，那毕竟是同一个工程。

我们有两种方法来简化这个过程，以避免频繁的 publish / install 组件。而且，也并非所有组件都希望被发布到公共的 npm 仓库中。

npm link

在组件工程中：

1. 进入 package 目录
2. 执行 npm link

在引用工程中（假设你已经用 SvelteKit 初始化好了）：

1. 进行项目根目录
2. 执行 npm link 组件名，其中的组件名是组件工程中 package.json 中定义的。

yalc

yalc 是另一个组件开发的工具，咱们只需要知道它是比 npm link 更好的工具就行了，剩下的可以自行去查文档。

首先，全局安装：npm i yalc -g。

在组件工程中：

1. 进入 package 目录。
2. 执行 yalc publish

在引用工程中：

1. 进行项目根目录
2. 执行 yalc add 组件名

注意事项

以上两种方法都有共同的问题需要注意：

• 若组件更改，保险起见，重新执行以上过程，两个工程中。
• 对于引用工程，若执行过 npm i，则需要重新 npm link 或 yalc add 组件名。

输出组件风格

一般来讲，需要避免嵌入 CSS，原因很简单：外部工程的风格难以预测，嵌入 CSS 的后果可能导致两者冲突。但也有例外：引用工程和组件工程采用统一的 CSS 框架。

本文以 Tailwind CSS 为例说明这一点。

组件工程

1. SvelteKit 初始化 Tailwind CSS

npm add -D tailwindcss autoprefixer postcss-load-config
npm add -D ts-node
npx tailwindcss init

2. 修改扩展名

• postcss.config.js -> postcss.config.cjs
• tailwind.config.js -> tailwind.config.cjs

3. 在组件中使用 Tailwind CSS。
4. 在 src/lib 下创建 safelist.cjs 文件，在其中包含工程里用到的 Tailwind 的 class。这一步非常关键，否则风格样式无法正常显示。示例如下：

const scSafelist = [
  "border-t",
  "text-right",
  "py-2",
  "px-4",
  ...,
];

module.exports = scSafelist;

npm run package 之后，自带风格的组件即可被使用，且由于 Tailwind CSS 相关包都是 dev 依赖，它们不会被打包进来。故引用工程需自行引入。

引用工程

1. 同上 1~3。

2. 在 tailwind.config.cjs 中引入组件风格，示例代码：

   const scSafelist = require('组件名/safelist.cjs');
   module.exports = {
     safelist: scSafelist,
     ...
   }
   

3. 使用组件。

若干使用了自定义风格或想覆盖组件风格，改如何处理？答案是：

• plugin
• css 变量

当然，这些内容值得写另外一篇文章了。