如何安装svelte_svelte js框架介绍编译器

如何安装svelte

Note 1: A French version of this article is available.

注意1：提供了本文的法文版本 。

Since the release of its version 3 in April 2019, the Svelte “framework” is more and more talked about. Due to its lightness and its approach being at odds with the main frameworks like React or Angular, the rising star developed by Rich Harris promises you simplicity and speed for a better user and developer experience. And you, will you be tempted by Svelte.js?

自2019年4月发布第3版以来，越来越多地谈论Svelte的 “框架”。 由于它的轻巧性和与React或Angular等主要框架不兼容的方法，Rich Harris开发的后起之秀向您保证了简单性和速度，以提供更好的用户和开发人员体验。 而您，您会被Svelte.js吸引吗？

Note 2: This article focuses on the non-technical side of Svelte.js. For more technical points, you can refer to the Svelte Crash Course or to my Pomodoro application POC (links at the end of the article).

注意2：本文重点介绍Svelte.js的非技术方面。 有关更多技术要点，您可以参考Svelte Crash课程或我的Pomodoro应用程序POC(文章末尾的链接)。

一点历史开始 (A Little Bit of History to Begin With)

Rich Harris, front developer at the New York Times, in his quest for performance and good user experience, following a Tweet from Mike Taylor published in 2012, finally realized that “removing a JPEG to save loading time” is not equivalent to removing the same size of JavaScript.

纽约时报的前开发人员Rich Harris在追求性能和良好的用户体验之后， 于2012年发表了Mike Taylor的推文 ，终于意识到“删除JPEG以节省加载时间”并不等同于删除相同的内容。 JavaScript的大小。

So in 2016, he started a small experiment. His idea: write a JavaScript compiler that would produce quality code, be as light as possible and without abstraction of the DOM, for a super-fast loading time and very fast performance. Everything goes very quickly. In mid-November 2016, he made his first commit; four days later, the first beta is available, and ten days after this beta, on November 26, 2016, he published the first blog article detailing his concept: Svelte was born. The v1.0.0 arrives three days after this post. Then, during a big cleanup, v2.0.0 was released in April 2018, and a year later, in April 2019, a complete overhaul allowed the release of version 3.0.0.

所以在2016年，他开始了一个小实验。 他的想法是：编写一个JavaScript编译器，该编译器将产生高质量的代码，并尽可能地轻便且不对DOM进行抽象，以实现超快的加载时间和非常快的性能。 一切进展很快。 2016年11月中旬，他做出了第一次承诺； 四天后，第一个Beta版发布，而在此Beta版发布十天后，他于2016年11月26日发表了第一篇博客文章，详细介绍了他的概念 ：Svelte出生。 v1.0.0在此发布后三天到来。 然后，在大规模清理过程中，于2018年4月发布了v2.0.0，一年后的2019年4月，进行了全面的大修，从而发布了3.0.0版本。

It is with this version 3.0.0 that Svelte.js begins to gain importance, to be talked about, and to slowly initiate a fundamental change in the JavaScript world.

凭借此版本3.0.0，Svelte.js开始变得越来越重要，将被讨论，并慢慢地引发JavaScript世界的根本变化。

但这是框架还是编译器？ (But Then Is It a Framework or a Compiler?)

Good question. As a matter of fact, it’s a bit in between, at least compared to the currently popular definition of technical framework.

好问题。 事实上，至少与当前流行的技术框架定义相比，它介于两者之间。

Svelte offers a real lightweight development framework, with powerful functionalities and syntactic sugar to facilitate the developer’s work, which therefore makes it a kind of framework.

Svelte提供了一个真正的轻量级开发框架，它具有强大的功能和语法糖，以方便开发人员的工作，因此使其成为一种框架。

However, Svelte has its own syntax, which certainly created some irony on Twitter with the satirical idea of SvelteScript launched by Evan You, the creator of Vue.js. But this Svelte code is then compiled into vanilla JavaScript by Svelte (which therefore makes it a compiler). In short, Svelte is at the border.

但是，Svelte有其自己的语法，这无疑在Twitter上引起了讽刺 ， 该讽刺是由Vue.js的创建者Evan You发起的SvelteScript讽刺思想。 但是此Svelte代码随后被Svelte编译为原始JavaScript(因此使其成为编译器)。 简而言之，Card.svelte处于边界。

没事，但Card.svelte怎么会有趣呢？ (All Right, but How Can Svelte Be Interesting?)

The biggest advantage of Svelte is, as the name suggests, the very low weight of the application when compiled, which promises a loading speed that is impossible to achieve with frameworks like Angular, Vue.js, or React, which embed a runtime in addition to the logic code of the application. With Svelte, you only have your code with just the right amount of Svelte, so you don’t overload the scale.

顾名思义，Svelte的最大优点是编译时应用程序的重量非常轻，这保证了加载速度是Angular，Vue.js或React等框架无法实现的，该框架还嵌入了运行时到应用程序的逻辑代码。 使用Svelte，您的代码中只包含适当数量的Svelte，因此不会超载规模。

However, Svelte is also quick during execution. Indeed, it compiles your code to make something probably much more optimized than what you would have done alone on your side (while having your source files of Svelte code perfectly readable and maintainable) and especially: It does not have virtual DOM, and that’s one less layer to run to reflect a change on the page.

但是，Svelte在执行过程中也很快。 确实，它可以编译您的代码，以使某些事情可能比您自己单独完成的事情要优化得多(同时使您的Svelte代码的源文件具有完美的可读性和可维护性)，尤其是：它没有虚拟DOM，这就是其中之一。较少的层来运行以反映页面上的更改。

Then, as I mentioned in the previous paragraph, Svelte gives you a more readable and maintainable, component-oriented code. Why? First, because you group everything related to a component in the same file: logic (JavaScript), structure (HTML), and style (CSS) — everything goes there! And secondly, because Svelte’s philosophy encourages you to write code that is as concise and easy to understand as possible.

然后，正如我在上一段中提到的那样，Svelte为您提供了更具可读性和可维护性的面向组件的代码。 为什么？ 首先，因为将与组件相关的所有内容都归入同一文件中：逻辑(JavaScript)，结构(HTML)和样式(CSS)-一切就在那里！ 其次，由于Svelte的哲学鼓励您编写尽可能简洁明了的代码。

Finally, some minor but nonetheless appreciable advantages: With Svelte there is little risk of graphical side effects because the style of each component is isolated to affect only the component, not its parents or children. And last little thing, Svelte is ES2018 compatible, so yes, you can use arrow functions, const, and other nice little modern JS features.

最后，还有一些次要但仍可观的优点：使用Svelte，图形化副作用的风险很小，因为每个组件的样式都被隔离为仅影响该组件，而不影响其父级或子级。 最后一点，Svelte与ES2018兼容，所以是的，您可以使用箭头函数const和其他漂亮的现代JS小功能。

很好，但是您的奇迹产品有些瑕疵，对吧？ (That’s All Well and Good, but Your Miracle Product, It Has Some Flaws, Right?)

Yes, nothing is perfect in life. First of all, the big concern is its incompatibility with TypeScript (my favorite language, to say if I’m in pain!). However, the community is so asking for it that Rich Harris has planned to integrate it in his future developments, and some members have taken the problem head-on and started trying to reconcile the two in experimental projects.

是的，生活中没有完美的事物。 首先，最大的问题是它与TypeScript(我最喜欢的语言，如果我很痛苦！)不兼容。 但是，社区对此有很高的要求，Rich Harris计划将其集成到他的未来开发中，并且一些成员已经直面这个问题，并开始尝试在实验项目中调和这两个问题。

[Edit 08/07/2020: Svelte is finally officially compatible with TypeScript!]

[编辑08/07/2020：Svelte 终于与TypeScript正式兼容 ！]

Then, we must admit, the Svelte community is less important than those of Angular, React, or Vue.js. It doesn’t seem like much, said like that, but to get out of a trap, to find plugins or components already made, or have resources to progress, it’s not very joyful.

然后，我们必须承认，Svelte社区的重要性不如Angular，React或Vue.js。 这样说似乎并不多，但是要摆脱陷阱，查找已经制作的插件或组件，或者拥有不断发展的资源，这并不是一件很愉快的事情。

Finally, the syntax can be confusing for aficionados of more classic frameworks.

最后，对于更经典的框架的爱好者来说，语法可能会造成混淆。

我们对Card.svelte有什么期望？ (What Can We Expect From Svelte in the Future?)

The future of Svelte is, above all, in my opinion, more maturity, a greater community, and more readily available resources.

我认为，Card.svelte的未来尤其是成熟度更高，社区更大，资源更容易获得。

But concretely, some areas of work have already been defined or even started for some.

但具体而言，某些工作领域已经定义，甚至已经开始。

First, Rich Harris began to integrate web accessibility so that different disabilities weren’t harmed too much by visiting an application made with Svelte (which improves SEO, by the way). But he also asked for help from the community for other big projects: internationalization (some community projects exist); a command-line interface, or CLI in the lingo, like Angular CLI or create-react-app; compatibility with RxJS; or, as said before, the integration of TypeScript.

首先，Rich Harris开始集成Web可访问性，以便通过访问使用Svelte制作的应用程序(顺便改善SEO)，不会对不同的残障造成太大的伤害。 但是他还向社区寻求其他大型项目的帮助：国际化(存在一些社区项目)； 命令行界面或术语中的CLI，例如Angular CLI或create-react-app； 与RxJS的兼容性； 或者，如前所述，TypeScript的集成。

Finally, a few exotic projects take Svelte outside the realm of the classic web application. We can list some:

最后，一些奇特的项目使Svelte超出了经典Web应用程序的范围。 我们可以列出一些：

• Svelte Native, an effort to run Svelte apps on a smartphone using NativeScript, for use close to Ionic or React Native

  Svelte Native ，旨在使用NativeScript在智能手机上运行Svelte应用程序，用于接近Ionic或React Native的情况

• Sapper, a derived framework using Svelte with server-side rendering

  Sapper ，一个使用Svelte和服务器端渲染的派生框架

• GL, an experiment to use WebGL in Svelte

  GL ，在Svelte中使用WebGL的实验

更进一步 (To Go Further)

To explore the subject more deeply, you can use some of these interesting links:

要更深入地探讨该主题，您可以使用以下一些有趣的链接：

• [EN] The Svelte official site, in particular the official tutorial (better than the documentation), the official documentation, examples, an FAQ, the official blog, and above all, the best possible sandbox: the REPL!

  [EN] Svelte官方网站 ，特别是官方教程(比文档更好)，官方文档，示例，常见问题解答，官方博客，尤其是最好的沙盒：REPL！

• [EN] The official GitHub repository

  [EN] 官方GitHub存储库

• [EN] Xiaoru Li’s Svelte Crash Course: article, videos. Very informative

  [ZH]李晓茹的速成速成班： 文章 ， 视频 。 非常丰富

• [EN] An awesome list with plenty of useful resources

  [EN] 很棒的清单，其中包含大量有用的资源

• [EN] Rich Harris official Twitter account

  [ZH] Rich Harris 官方Twitter帐户

• [EN] A guide to Svelte on Medium, with a more technical point of view

  [ZH] Svelte on Medium 指南 ，具有更多技术观点

• [EN] A technical comparison with React on Medium

  [EN] 与React on Medium的技术比较

• [EN] A Pomodoro application that I developed as a POC: GitHub, Demo

  [EN]我作为POC开发的Pomodoro应用程序： GitHub ， 演示

And some French-speaking resources :

还有一些法语资源：

• [FR] Alexis Jacomy’s conference at DevFest Nantes 2019, which has a more “Data Viz”-oriented angle: video, slides. I highly recommend it.

  [FR] Alexis Jacomy在2019年南特DevFest大会上的会议，其视角更为“数据可视化 ”： 视频 ， 幻灯片 。 我强烈推荐它。

• [FR] A quick intro by the Dev Theory channel: video

  [FR]开发理论频道的快速介绍： 视频

• [FR] A Zenika RemoteClazz more similar to my point of view: video. I recommend.

  [FR] Zenika RemoteClazz更类似于我的观点： video 。 我建议。

结论 (Conclusion)

In summary, Svelte.js is an increasingly popular, while still young and not fully mature, framework that is open to contribution and offers lightness, simplicity, and performance.

总而言之，Svelte.js是一个越来越受欢迎的框架，尽管它还很年轻并且还没有完全成熟，但它是开放框架，可以提供帮助，并提供轻巧，简单和高性能。

It tends to be moving away from just a framework for web applications in the near future, and what many developers agree on is that it will likely be an inspiration for future frameworks.

在不久的将来，它趋向于不再只是Web应用程序框架，而且许多开发人员都同意，它可能会成为未来框架的灵感。

In short, this technology, which is fundamentally very different from the star frameworks of the moment in its philosophy, its approach, and the techniques used, fascinates me and gives me the feeling of a tool with great potential, one we must watch.

简而言之，这项技术在其理念，方法和所使用的技术上与当下的明星框架有着根本的不同，它令我着迷，并使我感觉到一种具有巨大潜力的工具，我们必须注意。

And you, will you be tempted?

而你，你会被诱惑吗？

翻译自: https://medium.com/better-programming/svelte-js-introduction-to-the-compiler-as-a-framework-43555046868b

如何安装svelte