Logo

菜单

发布于 2026-01-06 5 阅读
0

创建一个可部署的 Rails 6 应用 + TailwindCSS、Stimulus.js 和自定义字体。

创建一个可部署的 Rails 6 应用 + TailwindCSS、Stimulus.js 和自定义字体。

本文介绍了如何设置一个新的 Rails 6 应用程序来使用Tailwind CSS，然后设置自定义正文字体，并在部署到Heroku时使整个应用程序真正运行起来。

如果你还没有将 Rails 技能升级到 6，那么你可能会感到震惊：Rails 6 可以完全兼容现代 JS 框架，并以它们期望的方式进行使用。虽然资源管道仍然存在，但它已被弃用，取而代之的是更强大的 JavaScript。

第一步也是最重要的一步，就是不要选错教程，否则你会走上一条充满挫折和痛苦的道路。我最初想在 Rails 6 中运行 Vue.js，当时觉得这会是最难的集成。我先在谷歌上搜索“Rails 6 Vue.js”，找到了这篇“如何将 Vue.js 与 Rails 6 集成
”的文章，然后经过反复尝试和无数次失败，最终成功地将 Tailwind 集成了进去。

当时我的 Rails 6、Vue 和 Tailwind 都部署在 Heroku 上了。不幸的是，我在 Heroku 上一直遇到编译错误，而本地主机上却没有这个问题。真是倒霉！

在尝试调试这个问题好几天都无果，并且重新思考了一番之后，我意识到我最好还是坚持我所熟悉的，并遵循 Rails 编写者制定的规则：Rails 用于主要功能，而Stimulus.js则用于处理类似 jQuery 的简单但必要的功能，例如触发下拉菜单。

别光说不练，把代码给我看看！

好了，开始了。

  1. 使用当前工作目录中的 rails/ruby 文件rails new <appname。
  2. 安装 Stimulus 的方法如下rails webpacker:install:stimulus（请参阅 GoRails 的这段视频：如何在 Rails 6 (和 Flatpickr) 中使用 webpacker 集成 Javascript，其中包含一个非常棒的教程）。

  3. app/javascript/packs/application.js 与旧的资源管道非常相似；请添加以下代码：

    import "controllers"
import flatpickr from "flatpickr"

require("flatpickr/dist/flatpickr.css")

    第一行代码设置了刺激控制器，接下来的几行代码设置了 flatpickr。然后是这段代码：

    document.addEventListener("turbolinks:load", () => {
  flatpickr("[data-behavior='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
  })
})

    配置 flatpickr 中要初始化的 HTML 标签，以及 flatpickr 中输入和显示的日期格式。
    别忘了将 flatpickr 添加到你的 Rails 项目中yarn add flatpickr：

    【一个小插曲：要么选择 yarn，要么选择 npm，并且坚持使用同一个工具。否则，你最终会得到一个npm 文件yarn.lock和一个package-lock.jsonyarn.conf 文件，它们会争夺对你的package.json.yarn 目录的控制权。这是个糟糕的主意。在这个项目中，我选择了 yarn，并推荐这份 npm 与 yarn 转换的速查表：NPM vs Yarn 速查表。】

    接下来，让我们看看 flatpickr 在视图中的实际应用。创建一个视图，然后将 `<div>` 替换form.date_select为 `<div>`，form.text_field :publish)date, date, { behavior: "flatpickr"}现在你应该会看到一个更美观的视图：

    替代文字

    顺便一提，Rails 6 似乎采用了一种全新的表单语法：比旧语法更简洁，希望在添加 Tailwind 类时更容易处理。

    现在正是将项目部署到 Heroku 的好时机。除非您确定要通过 AWS 部署，否则 Heroku 的部署和管理都非常便捷。如果您需要复习一下，可以阅读这篇文章： 《Rails 6.x Heroku 入门指南》 。

    实现 TailwindCSS

  • 你需要执行一个操作yarn add tailwindcss@latest。为什么要使用最新版本？因为你需要最新稳定版本的 TailwindCSS。现在你的项目中已经安装了 TailwindCSS，但尚未集成。你应该查看Tailwind 的安装说明，记住你需要让 Tailwind 在你的 Rails 6 项目中正常工作。如果你想了解完整的安装步骤，可以查看 GoRails 的“如何在 Rails 6 中安装 TailwindCSS 1.0”，但这里是步骤：

  • 完成上述操作后yarn add tailwindcss，您需要stylesheets在文件夹中创建一个新目录javascript，并在该目录中创建一个application.scss文件来保存 Tailwind 的配置：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode
  • 在 中postcss.config.js，你需要require('tailwindcss')在下一行中输入require('authoprefixer')。
  • 还有一步：告诉 webpack 这个新东西application.scss。这可以application.js通过require("stylesheets/application.scss")声明来实现。
  • 现在你需要使用一些 Tailwind CSS。一个简单的方法是，复制这里的导航栏并将其添加到/layout/application.html.erb.
  • 你的 Rails 项目应该一切正常：通过 CLI 运行 webpack 编译命令进行快速测试bin/webpack，然后在 localhost 中尝试运行它。

在 Rails 6 应用中安装自定义字体

本教程的最后一步是介绍如何使用自定义字体。无需在标签中声明 CDN <head>，也无需将一组字体硬塞进资源管道。现在有一种更简洁的方法，即使用 JavaScript：

  • 在npmjs.com上找到字体的 npm 模块。大多数字体 npm 模块都以`roboto`、` Nunito`或超棒的Inter字体开头，interface-选择你喜欢的字体。然后将其添加到你的项目中。例如：yarn add 'typeface-inter'
  • 现在你需要通过三个地方告诉 Tailwind 字体信息。首先，编辑你的application.js文件，添加 npm 模块：
require("channels")
require('typeface-inter')

require("stylesheets/application.scss")
Enter fullscreen mode Exit fullscreen mode
  • 接下来，在项目根目录tailwind.config.js下生成一个文件（与 npm 不同，npx 不会生成文件，所以请使用生成的文件。）package-lock.json
  • 调整tailwind.config.js：
module.exports = {
  theme: {
    fontFamily: {
      body: ['inter']
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode 
@import "tailwindcss/base";
html {
  @apply font-body;
}
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Enter fullscreen mode Exit fullscreen mode

（感谢Scott Watermasysk和“使用 Google Fonts Tailwind CSS”项目，他们慷慨地为我澄清了其中一些代码应该放在哪里。谢谢 Scott！（顺便说一句，可以看看他的“如何使用 VSCode ”项目。）

要点总结

Rails 再次进行了自我革新，这次它成为了一个优秀的服务器应用程序，同时也是一个容器，可以容纳你可能想要使用的所有大大小小的 javascript npm 模块和框架。

这意味着所有了解 jQuery 但对 npm 模块和所有自由运行的 javascript 感到困惑的 Rails 开发人员都需要咬紧牙关，学习 Rails 6，并加入其中。

一旦你理解了 webpacker 如何将 js 集成到你的 rails 应用程序中，一切就都变得有意义了，你几乎可以忘记资源管道中所有那些令人痛苦的小变通方法。

正如Lee Smith刚才指出的，虽然 TailwindCSS 最初是一个比 Bootstrap 更大的包，但你可以轻松地将其添加purgeCSS到你的项目中，这样在部署到生产环境时，所有未使用的 TailwindCSS 类都会被移除。结果呢？一个超小、超简洁的 CSS 文件。

最后一点：开发者信息的保质期现在更短了。任何超过 6 个月的教程、视频或文章都值得怀疑；超过一年的则完全不可信。如果你想打造下一个爆款产品，那么这方面存在着巨大的未满足需求，你需要一款优秀的 SaaS 产品来解决这个问题。

文章来源：https://dev.to/bobwalsh47hats/creating-a-deployable-rails-6-app-tailwindcss-stimulus-js-and-a-custom-font-3472
2019 年如何处理异步副作用
使用 Mock Service W...