svelte编译组件

A. webpack作者评价vite

评价：Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生ES-Mole的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。

webpack缺点是缓慢的服务器启动

当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。

vite改进

Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。

依赖大多为纯JavaScript并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。

Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快10-100倍。

源码通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。

Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖，然后进行打包，在启动webpack-dev-server，请求服务器时，直接显示打包结果。

webpack打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更新速度明显拖慢。

vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器，请求某个模块时再对该模块进行实时编译，因为现代游览器本身支持ES-Mole，所以会自动向依赖的Mole发出请求。

所以vite就将开发环境下的模块文件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器。

分析了webpack和vite的打包方式后，也就明白了为什么vite比webpack打包快，因为它在启动的时候不需要打包，所以不用分析模块与模块之间的依赖关系，不用进行编译。这种方式就类似于我们在使用某个UI框架的时候，可以对其进行按需加载。

热更新方面，效率更高。当改动了某个模块的时候，也只用让浏览器重新请求该模块，不需要像webpack那样将模块以及模块依赖的模块全部编译一次。

B. 什么是vue

Vue.js是一个构建数据驱动的 web 界面的渐进式框架，是一个JavaScript MVVM库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

C. vue和react为什么运行时和编译时

运行时与编译时是前端工程师常常听到的两个词。

比如 Vue 运行时、Angular 运行时、React 运行时……

又比如 svelte 框架，总听到他的宣传说的是“0 运行时”，所以他的工作其实就是在“编译时”了。

这两个词到底是什么意思呢？

D. 建设svelte生态靠大家

基于开源项目 svelma 扩展和修改, 所以在此感谢原作者 c0bra 以及 bulma , svelte 等团队.

原项目组件比较少,存在一些小bug,所以我在在原有的组件库的基础上，扩展了一些常见的组件(例如时间,日期选择器,仿antd的layout布局,分页,等等),并对发现的一些bug进行了修改，对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。

文档及Demo

https://github.com/sveltejs/template 是一个svelte的初始化模板. degit 这个脚手架可以帮你获取它:(PS: Rich-Harris 大神被称为前端轮子哥果然是有有道理的,svelte,rollup,degit都是他的手笔)

因为组件使用sass模板,所以也集成一下sass的编译.

在你的rollup或者webpack配置文件中添加scss支持:

在你的主HTML配置CDN页面:

...或者通过npm包:

E. Svelte的UI组件库

地址： https://sveltematerialui.com/
Material: 谷歌出品的扁平化风格。

地址： https://carbon-components-svelte.onrender.com/
Carbon：IBM 开源设计。

地址： https://carbon-svelte.vercel.app/
Smelte：Google Material Design 在 Svelte 和 Tailwind 上的另一实现。

地址： https://docs.svelteit.dev/
Svelteit： 简约的 UI/UX 组件库。

地址： https://illright.github.io/attractions/
Attractions： 时尚且实用。

F. 如何看待 svelte 这个前端框架

这个框架的 API 设计是从 Ractive 那边传承过来的（自然跟 Vue 也非常像），但这不是重点。Svelte 的核心思想在于‘通过静态编译减少框架运行时的代码量’。举例来说，当前的框架无论是 React Angular 还是 Vue，不管你怎么编译，使用的时候必然需要‘引入’框架本身，也就是所谓的运行时 (runtime)。但是用 Svelte 就不一样，一个 Svelte 组件编译了以后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！

当然，这不是说 Svelte 没有运行时，但是出于两个原因这个代价可以变得很小：

1. Svelte 的编译风格是将模板编译为命令式 (imperative) 的原生 DOM 操作。比如这段模板：

<a>{{ msg }}</a>

会被编译成如下代码：

function renderMainFragment ( root, component, target ) {
var a = document.createElement( 'a' );

var text = document.createTextNode( root.msg );
a.appendChild( text );

target.appendChild( a )

return {
update: function ( changed, root ) {
text.data = root.msg;
},

teardown: function ( detach ) {
if ( detach ) a.parentNode.removeChild( a );
}
};
}

可以看到，跟基于 Virtual DOM 的框架相比，这样的输出不需要 Virtual DOM 的 diff/patch 操作，自然可以省去大量代码，同时，性能上也和 vanilla JS 相差无几（仅就这个简单示例而言），内存占用更是极佳。这个思路其实并不是它首创，之前有一个性能爆表的模板引擎 Monkberry.js 也是这样实现的，ng2 的模板编译其实也跟这个很类似（但是中间加了一层渲染抽象层）。

2. 对于特定功能，Svelte 依然有对应的运行时代码，比如组件逻辑，if/else 切换逻辑，循环逻辑等等... 但它在编译时，如果一个功能没用到，对应的代码就根本不会被编译到结果里去。这就好像用 Babel 的时候没有用到的功能的 helper 是不会被引入的，又好像用 lodash 或者 RxJS 的时候只选择性地引入对应的函数。

基于这两个特点，Svelte 应用的最终代码量可以非常小。比如它的 TodoMVC min+gzip 之后只有 3kb。

但是，Svelte 也不是没有它的潜在问题：

1. 虽然在简单的 demo 里面代码量确实非常小，但同样的组件模板，这样的 imperative 操作生成的代码量会比 vdom 渲染函数要大，多个组件中会有很多重复的代码（虽然 gzip 时候可以缓解，但 parse 和 evaluate 是免不了的）。项目里的组件越多，代码量的差异就会逐渐缩小。同时，使用的功能越多，Svelte 要包含的运行时代码也越多，最终在实际生产项目中能有多少尺寸优势，其实很难说。

2. Svelte 在大型应用中的性能还有待观察，尤其是在大量动态内容和嵌套组件的情况下。它的更新策略决定了它也需要类似 React 的 shouldComponentUpdate 的机制来防止过度更新。另一方面，其性能优势比起现在的主流框架并不是质的区别，现在大部分主流框架的性能都可以做到 vanilla js 的 1.2~1.5 倍慢，基于 Virtual DOM 的 Inferno 更是接近原生，证明了 Virtual DOM 这个方向理论上的可能性，所以可以预见以后 web 的性能瓶颈更多是 DOM 本身而不是框架。

3. Svelte 的编译策略决定了它跟 Virtual DOM 绝缘（渲染函数由于其动态性，无法像模板那样可以被可靠地静态分析），也就享受不到 Virtual DOM 带来的诸多好处，比如基于 render function 的组件的强大抽象能力，基于 vdom 做测试，服务端/原生渲染亲和性等等。这一点在我看来比较关键。让我在一点点性能和 Virtual DOM 之间做抉择的话，我还是会选择 Virtual DOM。

最后，我个人觉得 Svelte 最具有优势的地方，就是用来编译可独立分发的 Web Components。传统框架和 Web Components 结合最大的问题就在于运行时：单独分发的 WC 里面直接打包框架运行时显然不现实，不打包的话，又做不到开箱即用。但 Svelte 就没有这个问题，可以说是最适合这个用例的框架。

G. Svelte教程翻译（七、存储）

并非所有应用程序状态都应用于程序的组件层次结构内。有时，您的值需要在多个不相关的组件或常规JavaScript模块之间访问。

在Svelte，我们通过存储来做到这一点。 存储只是一个带有subscribe方法的对象，它允许在存储值发生变化时进行同步操作。

在App.svelte中，count是一个存储，我们在count.subscribe回调中设置了count_value。

stores.js文件中定义计数。它是一个可写的存储，这意味着它除了subscribe之外还有set和update方法。

Incrementer.svelte文件，编写+按钮组件事件代码：

单击+按钮累加计数。而Decrementer.svelte文件中的代码是进行递减操作：

最后，在Resetter.svelte文件中，实现重置操作：

上一个示例中的应用程序可以工作，但有一个微妙的错误——存储是subscribe状态，但从未unsubscribe。如果组件被多次实例化和销毁，这将导致内存泄漏。

首先在App.svelte中定义常量unsubscribe：

例如通过onDestroy生命周期销毁

Svelte有一个技巧，可以通过在存储名称前加上$来引用store值：

完整代码：

stores.js：

Incrementer.svelte：

Decrementer.svelte：

Resetter.svelte：

App.svelte：

并不是所有的存储都应该由引用它们的人来写。例如，您可能有一个表示鼠标位置或用户地理位置的存储，并且不能从“外部”设置这些值。对于这些情况，我们创建可读的存储。

stores.js文件。readable的第一个参数是一个初始值，如果您还没有初始值，则可以为null或undefined。第二个参数是一个start函数，它接受一个set回调并返回一个stop函数。当存储获得第一个subscribe时调用start函数；当最后一个unsubscribes时调用stop。

App.sevlte

您可以创建一个存储，其值基于一个或多个具有派生属性的其他存储的值。在前面的示例的基础上，我们可以创建一个存储，它派生出一个计算页面打开时间的函数：

stores.js

App.sevlte

只要对象正确实现subscribe方法，它就是一个存储。除此之外，什么都可以。因此，使用特定于域的逻辑创建自定义存储非常容易。

例如，我们前面示例中的计数存储可以包括递增、递减和重置方法，并避免外露set和update：

stores.js：

App.sevlte：

如果一个存储是可写的，即它有一个set方法，那么可以绑定到它的值，就像绑定到本地组件一样。

在本例中，我们有一个可写的存储name和一个派生的存储greeting。更新 元素：

更改输入值将更新name及其所有从属项。

我们也可以直接赋值来存储组件中的值。添加 元素：
Add exclamation mark!
$name+='!'赋值等价于name.set($name+'!')。

stores.js：

App.sevlte