阿里云优惠活动,点击链接进行购买: 一年仅需96.9元即可以购买服务器~

腾讯云优惠活动, 点击链接进行购买一年仅需99元

腾讯云限时开团活动, 点击链接进行购买一年仅需95元

各大服务器厂商对比选购

# Svelte源码解读 —— runtime

本期将带领大家走进 Svelte 的源码篇,其实 Svelte 的源码主要由两部分组成,一部分是作为 cli 的编译器,另一部分是作为运行时的 runtime。也许你会疑惑,网上不都是说 Svelte 没有运行时吗,怎么你这里会有。其实不然,Svelte 相比其他的框架而言,没有一个整体的运行框架,但是他在将模板代码编译成 VanillaJS 的时候,还是会引入一些小的工具辅助函数,这些函数将会帮助我们简化整体的代码。

而今天我们着重将的就是,编译后的运行时代码的逻辑,这部分代码主要包含了我们的创建 DOM 相关、响应式更新等等逻辑。首先阅读这部分代码前,那肯定是得先让这部分的代码跑起来,那我们就尽快进入第一个步骤:

# 准备工作

首先通过官网的示例创建一个 Svelte 项目

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install

下载完后的目录树如下:

./
├── README.md
├── bundle.js
├── package.json
├── public
│   ├── build
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
├── scripts
│   └── setupTypeScript.js
└── src
    ├── App.svelte
    └── main.js

修改 App.svelte

// 

然后运行打包命令,我们来分析打包后的产物

npm run build
Last Updated: 7/7/2022, 4:42:31 PM