DTeam 技术日志

Doer、Delivery、Dream

Svelte 组件构建无废话指南

胡键 Posted at — Jan 3, 2022 阅读

需要的预备知识

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

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

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

Svelte 组件构建步骤

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

构建步骤

  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 仓库中。

在组件工程中:

  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 组件名

注意事项

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

输出组件风格

一般来讲,需要避免嵌入 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
  1. 修改扩展名
  1. 在组件中使用 Tailwind CSS。
  2. 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. 使用组件。

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

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


友情链接


相关文章