Svelte 开发速览

胡键 Posted at — Feb 5, 2021 阅读

Svelte

技术特点

编译器
- 高度优化的最终代码
- 生成包小
无 Virtual DOM，高性能
相同功能，代码量更少
优良的 Reactive 支持
简单易学

知识脉络

上手

npx degit sveltejs/template my-svelte-project

```
cd my-svelte-project
```
```
npm install
```
```
npm run dev
```

应用组成
- 组件类：UI 逻辑，svelte 文件
  - 文件结构
    - <script>，代码逻辑
    - <style>，页面风格
    - markup，页面元素 + 语法块
  - 可被更高一级 svelte 组件使用
  - 支持 DOM 事件
  - 方便的 input 绑定，支持不同类型
- 支持类：业务逻辑，普通 js/ts 文件
组件间通信
- 属性和处理函数
- bind 指令
- 使用 createEventDispatcher 发送事件
- 使用 context 让子组件无障碍访问祖先组件
- 使用 store 跨组件层次共享数据
值得注意的 Svelte 语法（其余语法请自行查看文档）
- await block
  - 基于 promise 不同状态显示不同 markup
- $: 语句
  - 引用变量更新后，自动执行
- action 给元素添加功能
- store
  - reactive 状态共享
  - $store_name
    - 自动订阅，无需 unsubscribe
    - 可绑定
  - 多种类型
    - Writable
    - Readable
    - Derived，基于其他 store 计算得来
    - 自定义，实现 subscribe 的对象
  - 不能持久化
- 生命周期
  - onMount，页面初始化
  - onDestroy，页面结束前
  - beforeUpdate，DOM 更新前
  - afterUpdate，DOM 更新后
  - tick，pending 状态被应用于 DOM 时
- slot 简化了组件组合

问题与对策

状态管理
- store
- akita
Routing
- routify
组件库
- smeltejs
单元测试
- jest + svelte-testing-library + svelte-jester
- 测试涉及到的特性：
  - WebCrypto：@peculiar/webcrypto
  - LocalStorage：jest-localstorage-mock
  - dotenv：在 jest.setup.js 中初始化，使用 window.xxx 形式
E2E 测试
- TestCafe
- Cpress
env 支持
- dotenv + @rollup/plugin-replace

使用 WebPack

npx degit sveltejs/template-webpack svelte-app

TypeScript 支持
1. 使用工程模板创建工程
2. 进入目录
3. ```
node scripts/setupTypeScript.js
```
部署
- 自主可控
  1. GitLab / GitHub + CI
  2. 类 S3 云服务 + CDN
- 云服务
  - Netlify
  - Vercel

资源链接

友情链接

相关文章

Angular：Jasmine + Karma 测试实战Apr 10, 2020
排错：Angular 项目构建 web3 报错 Module not found: Can't resolve XXXMar 10, 2021
Tailwind 入门Mar 9, 2021
Passport认证小记Nov 14, 2023
Web 应用性能测试总结Jan 29, 2023