开始使用Svelte和Rails 6的方法指南最近，Svelte正在慢慢崛起，随着4月份新版本3的发布，它的名气也越来越

最近，Svelte正在慢慢崛起，随着4月份新版本3的发布，它的名气也越来越大了。如果你对如何开始使用Rails和Svelte感兴趣，这就是适合你的帖子！我们将介绍两者之间的关系、原因和方法。我们将讨论这两者之间的关系、原因和方法：

2 pencils

什么是Svelte？

Svelte被认为是一个新的孩子，与它的同事--React和Vue.js不同。两者与Svelte的关键区别在于，Svelte不使用虚拟DOM技术来在状态变化时更新你的应用程序。相反，Svelte编写的代码是 "当你的应用程序的状态发生变化时，外科手术式地更新DOM"。这听起来很让人放心，但它到底是什么意思？

Svelte在构建时发挥了它的魔力，它将你的组件编译成高效的JavaScript代码。编译后的代码会进行尽可能少的DOM操作。Svelte编译的结果是高性能的指令性和纯代码。你可以说Svelte是一个编译器，因为它把Svelte组件变成了命令式的JavaScript代码。

顺便说一下，Svelte的发音是 "svelt"，它是一个形容词，意思是有吸引力的瘦，时尚和优雅。

为什么要在Rails中使用它？

Rails并不是最快的框架，但它以"足够快 "而闻名。这意味着如果你开始做一个项目，它会给你很大的牵引力。在Rails中开发功能是相当快的，有大量的资源可以帮助你，学习曲线也很平缓。但是，我也想说为什么不呢？Svelte承诺提供高性能，而Rails也足够快。将两者结合起来可能会很有趣，也是一个开创性的举措。我正在我的宠物项目中使用它，我现在对两者都很满意。

如何开始使用Svelte和Rails？

在我们深入探讨如何让它们两个一起工作之前，这里有一些你应该具备的要求：

Rails 6和Ruby 2.5.1（GoRails的安装指南）
NodeJS和Yarn（Yarn安装指南，也将安装NodeJS）

确保你的环境中有这些东西可用，然后继续：

好了，现在你已经安装了所有需要的东西，我们可以开始进行第一步了。

生成Rails应用程序

我们将使用Rails的命令来生成我们的应用程序，它将使用Svelte:

rails new rails-6-svelte --webpack=svelte
cd rails-6-svelte

我们可以通过运行Rails服务器来检查一切是否正常:

rails server

并访问http://localhost:3000。你应该看到 "Yay！You're on Rails！"页面。很好，让我们继续吧。

耶，我们的项目中已经同时安装了Rails和Svelte。让我们来实际使用它们吧。

渲染简单的Svelte应用程序

正如你在控制台看到的那样，之前的命令生成并修改了几个文件。其中一些文件需要在我们的Rails应用中正确配置和运行Svelte。在这篇文章中，我们将集中讨论两个文件:

app/javascript/packs/hello_svelte.js 和
app/javascript/app.svelte

如果我们进入app/javascript/packs/hello_svelte.js ，我们会看到与下面文件中相同的代码:

/* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_svelte' %> (and
// <%= stylesheet_pack_tag 'hello_svelte' %> if you have styles in your component)
// to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Svelte!</div> at the bottom of the page.

import App from "../app.svelte"

document.addEventListener("DOMContentLoaded", () => {
  const app = new App({
    target: document.body,
    props: {
      name: "Svelte",
    },
  })

  window.app = app
})

上面的代码显示了一个简单的设置，应用程序组件接受一个名称道具，并将目标放在HTML文件中，在这里是指页面的主体。注意文件中第二行的注释。为了让它在我们的应用程序中显示出来，我们需要把它包含在主要的Rails布局文件中。让我们继续做这件事。打开app/views/layouts/application.html.erb ，把<%= javascript_pack_tag ‘hello_svelte' %> 。你的文件应该看起来像这样:

<!DOCTYPE html>
<html>
  <head>
    <title>Rails6Svelte</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'hello_svelte' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

注意在第10行，我们已经添加了JavaScript pack标签。这一行将被webpacker gem拾取，它将转译Svelte代码，这样当我们进入我们的网站时，它就会正确呈现。想象一下，这就是一个我们仍然会看到 "耶！你在Rails上！"的页面，这是我们不想要的。为了让我们的Svelte应用呈现，我们需要创建Rails控制器和一个动作。别担心，这并不难。我们将使用Rails的生成命令，这将对我们有很大的帮助:

rails generate controller welcome index

这将生成WelcomeController ，以及index 动作。我们将使用它作为我们的应用程序的根点。当用户访问我们的应用程序时，他将看到这个页面。我们只需要在我们的应用程序中对config/routes.rb 文件做一个补充:

Rails.application.routes.draw do
  get 'welcome/index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root 'welcome#index'
end

像我们在第4行做的那样，添加根'welcome#index' 。这将告诉Rails在有人访问我们的网站域名时打开Welcome控制器的index动作。现在我们可以打开http://localhost:3000，看到我们的Svelte应用程序。

耶!🎉

我们的应用程序出现了!终于出现了但是我们在页面上看到了 "Welcome#index "的文字。这是在我们创建Welcome控制器时产生的。让我们把它去掉吧。进入app/views/welcome/index.html.erb 文件，删除其中的所有内容。保存它，然后重新加载页面。你应该只看到像这样的Svelte部分。

现在我们开始讨论了!

实际负责的Svelte代码在app/javascript/app.svelte ，它看起来像这样:

<script>
  export let name;
</script>

<style>
  h1 {
    color: #FF3E00;
  }
</style>

<h1>Hello {name}!</h1>

所有的Svelte组件都以.svelte为扩展名保存。这是一个典型的Svelte组件的实现，它分为三个块:

脚本部分:该部分包含组件的JavaScript代码。在这种情况下，名称变量被定义为一个属性（通过使用导出关键字）。
样式部分:样式部分包含CSS代码，该代码是针对该组件的。
模板部分:模板部分包含用于生成组件的HTML输出的标记代码（以及Svelte特定的增强功能）。

总结

就这样，你已经成功地开始使用Svelte和Rails 6 🎉!在下一篇文章中，我将讨论如何用Svelte和Rails创建更复杂的东西，所以请点击 "关注 "按钮。

非常感谢Rich Harris在Svelte上的工作，当然还有其他的贡献者。另外，这个视频是对Svelte框架的一个很好的介绍，也是由Rich Harris制作的。