作者：滴滴公共前端团队 - Neurotoxin

前言

如果你已经开发过 JavaScript 应用程序，你可能会遇到或者至少听说过像 React、Vue、Angular 这样的框架。这些工具都有一个共同的目标，让开发者可以轻松地建立流畅的交互式应用。

如果你看过 Vue 的源码打包，你会认识 rollup~ 对，下面我们要介绍的就是这个前端轮子哥的又一个作品：

Svelte (发音: svelt)

The magical disappearing UI framework

目前的 star 数目相比前面提到的几个框架基本可以忽略，不过论作者的代码能力，不容忽视

和上面的框架有一个关键的区别：

Svelte 不是在运行时解析你的 JavaScript 代码，在构建时你的代码被编译为可直接运行的 JavaScript 代码。

这意味着首屏加载的时候无需浪费时间在加载框架上，也为你节省了运行框架本身的时间。

之前尤大也在知乎上评价过：

从 Ractive 传承过来的 API 设计框架核心思想：

通过静态编译减少框架运行时的代码量

正因为无需依赖框架本身，你可以轻松地在现有应用程序中渐进式的采用 Svelte ，或将某个组件作为独立包运行在任何地方。

svelte 的内容覆盖比较多，我们会以多篇文章系列的形势呈现给大家，当然也祝福大家新年快乐~

快速开始

在这里我为大家提供了一个 Example ，可以直接访问地址 Svelte-Example 查看。

安装 && 启动

git clone https://github.com/neurotoxinvx/svelte-example.gitcd svelte-examplenpm installcd svelte-examplenpm run dev复制代码

常用 API

注：下方的展示部分为图片演示，实际操作体验请启动后体验。

1、模板渲染

欢迎使用 {
   { title }} ， {
   { title }} 是一个 {
   { type }} ，推崇组件 {
   { describe }} 的方式。
复制代码

2、IF…ELSE

{
   {#if type}}
    
     BLOCK TRUE
    
{
   {else}}
    
     BLOCK FALSE
    
{
   {/if}}switch复制代码

3、双向绑定

Hello {
   {name || 'stranger'}}!
复制代码

4、事件绑定

{
   {data}}
click me复制代码

5、监听数据变化

打开控制台查看
{
   {data}}
click me复制代码

6、计算属性

  现在时分, 北京时间 {
   { hour }} 点  {
   { minutes }} 分 {
   { seconds }} 秒
复制代码

7、Props 传值到子组件

Wrap

    click me复制代码

Inner

Hello {
   { name }}, this is inner component
The Number is {
   { count }}
复制代码

8、REFs

Wrap

    
  
       
     click me
    
复制代码

Inner

{
   { data }}
复制代码

9、Emit

Wrap

    
       {
   { thing }}
    
    复制代码

Inner

复制代码

自定义 Svelte 文件后缀

可能有的同学对于 .html 文件感觉有些不适应，我们可以将 .html 结尾的 Svelte 组件后缀改为 .svelte ，然后修改

webpack.dev.conf.js 中的

module: {    rules: [      {        test: /\(.html|.svelte)$/, // 这里加上对 svelte 文件的解析        exclude: /node_modules/,        use: 'svelte-loader'      }    ]  },复制代码

此时，我们发现在编辑器中 .svelte 文件失去了语法高亮和自动补充，如果你使用的是 WebStorm ，可以打开 Preferences -> Editor -> File types

手动添加，将 .svelte 文件识别为 HTML 即可

总结

经过上面的介绍，我们可以看到 Svelte 吸收了很多 Vue、React 中的精华部分，甚至连 svelte-loader 的模板也和 .vue 文件十分相似，对于熟悉 Vue、React 的同学来说上手非常的快速。

由于 Svelte 是一个编译型框架，打包后的文件大小相比基于其他框架开发的应用会小很多，所以非常适合开发 SDK 、插件。

但是由于 Svelte 编译后的代码复用性相比 Vue、React、Angular 等具有 Runtime 的框架较差，我们对于用 Svelte 开发中大型应用依然持怀疑态度，但是无疑，在开发 SDK 插件方面， Svelte 几乎是目前最好的选择。

更多文档手册请访问 SVELTE官网

---

欢迎关注DDFE

GITHUB：微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码