揭秘Svelte编译器是如何将svelte代码转换成原生js代码

我们目前比较熟悉的前端框架大部分都是依赖于一个 diffing 引擎，该引擎将可视 DOM 与内存虚拟 DOM 的副本进行同步,例如vue。这就存在一定的内存开销和效率问题。

但是Svelte是不同的。它是一个编译器。它生成直接转换成原生可视化树的JavaScript)，没有虚拟dom，没有diff算法，没有内存开开销，他生成的就是原生js代码。

例如svelte代码

<h1>Hello World</h1>

他会将这段代码转换成

const element = document.createElement('h1')
element.textContent = "Hello World"
document.body.appendChild(element)

那么为啥这么麻烦要转换呢？因为数据绑定。

这意味着我们可以<h1>{someValue}</h1>以声明方式编写，并且我们不需要像element.textContent = someValue每次someValue更改时那样编写命令式语句。Svelte 为我们生成同步代码。

一、svelte编译器的工作原理

编译器接收.svelte文件，将它们解析为 AST抽象语法树，分析树，并生成 Javascript 和 CSS。

为简洁起见，以下示例进行了简化。

解析标签

回想一下，.svelte文件的结构类似于.html文件：

<script>// js goes here</script>

<style>/* css goes here */<style>

<!-- More (visual) html tags here -->
<h1>...</h1>
<p>...</p>

第一步是解析文档并为标签创建 3 个标签：<script>标签、<style>标签和可视dom标签（其他所有内容）。

解析 CSS

这些<style>标签被解析出来，以便我们可以为每个 CSS 规则添加一个唯一的前缀。

例如：

h1 {
color: teal;
}

变成：

h1.random-code-abc123 {
color: teal;
}

添加唯一前缀是为了避免与其他组件中定义的 CSS 规则发生冲突。

包css-tree用于遍历 CSS 并检查表达式。

import {parse, walk, generate} from 'css-tree'

// parse CSS source to AST
const input = '.example { color: teal }'
const ast = parse(input)
const randomPrefix = 'xyz123'
const selectors = []

// traverse AST and looking for selectors
walk(ast, node => {
  // check if this node is a selector
  if (node.type === 'Selector') {
    // capture this node, so we can modify it later
    selectors.push(node)
  }
})

// modify the AST
selectors.forEach(selector => {
  // add a `ClassSelector` with name `.xyz123`
  // it will turn `.example` into `.example.xyz123`
  selector.children.insertData({
    type: 'ClassSelector',
    name: randomPrefix
  })
})

// generate CSS text from AST
const output = generate(ast)

// print the CSS text
console.log(output)
//> .example.xyz1234{color:teal}

解析 JavaScript

Svelte 解析