👋 欢迎！这篇文章包含了我在学习 Ruby 和 Ruby on Rails 6 过程中所有未记录下来的经验和实践。我是这个生态系统的新手，非常期待大家的反馈，如果您有任何建议，请在这里留言！
大多数 Ruby on Rails 教程都侧重于使用 API，这是有充分理由的。例如，官方的入门指南。
但是经过几次rails new blog控制器编辑之后会发生什么呢git push heroku？我想更进一步，我想了解以下方面的最佳实践：
这些科目是我最难掌握的，因为它们在网上讨论得最少：这些通常是通过Ruby on Rails 的经验和使用来学习的。
在学习和部署 Rails 应用程序的过程中，我创建了一个 README 文件，用来记录我为了解决之前遇到的所有问题而需要添加的所有小陷阱和代码片段。
随着笔记数量的增加，我觉得需要将其重新整理成一个清晰的版本，以便下次启动 Rails 应用程序时，我已经有了可以使用的参考资料。
公开这份参考资料是为了分享我的知识，帮助他人（希望也能帮助到你）。
目录：
我已将这部分内容单独成文，请点击此处阅读：
在这一部分，我将讨论[S]CSS，因为所有内容都适用于SCSS或CSS文件。Webpacker支持多种格式。
一开始，Webpacker 让我感到困惑，原因如下：
从 Rails 6 开始，Rails 开始在 Rails 应用中打包和封装Webpack。这是通过Webpacker实现的。Webpacker 提供了一个预配置的 Webpack 以及视图助手，方便用户轻松获取相应的生成资源，例如 JavaScript 和 CSS 文件。
截至 2019 年 11 月，默认的 Rails 应用程序 erb 模板文件包含：
app/views/layout/application.html.erb
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track": "reload" %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
第二行从 Webpacker 获取由入口点生成的已编译 JavaScript 文件路径app/javascript/packs/application.js。
但首先，要让常规的 Rails 资源管道（无论它现在是什么）生成这样的文件。
我不明白为什么会有两个系统同时运行，可能有一些原因，但让我们只使用 Webpacker 来生成资源，从而解决这个问题。
例如，要在 Rails 6 中使用 Bootstrap 4，并配合 Webpacker 处理 CSS 文件，需要将包含 CSS 的那行代码更改为：
app/views/layout/application.html.erb
<%= stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload" %>
这样它就告诉 Webpacker 为名为“application”的包提供正确的样式表资源 URL。名称 application 实际上指的是当前主包的文件名：app/javascript/packs/application.js。
stylesheet_link_tag你会注意到从到的变化stylesheet_pack_tag。
然后创建主 SCSS 文件（文件名和位置其实并不重要）：
app/javascript/src/style.scss
@import "~bootstrap/scss/bootstrap"; // if you plan on using bootstrap.
然后从 JavaScript 导入它：
app/javascript/packs/application.js：
// [...]
import "../src/style.scss";
样式表实际上不会被 JavaScript 文件加载，它只是告诉 Webpack 编译它，以便我们可以在应用程序模板中引入它的路径。
要让@import "~bootstrap/scss/bootstrap";上一部分代码生效，你需要安装 Bootstrap。但不是通过 Gemfile，而是通过 Yarn。因为~bootstrapYarn 需要使用 Webpack：在 .yarn 文件中查找node_modules/bootstrap/...并添加它。
在终端中：
yarn add bootstrap
要使 Bootstrap 的 JavaScript 部分正常工作，您还需要安装 JavaScript 依赖项：
在终端中：
yarn add jquery popper.js
然后在你的 JavaScript 应用程序中引入这些文件。
app/javascript/packs/application.js：
require("jquery");
require("bootstrap");
对我来说，Webpack 的主要优势之一是自动重载功能，但 Rails 6 默认情况下并未启用此功能。这意味着在开发环境中，每个页面加载都会非常慢（真的）。要启用自动重载，你需要使用webpack-dev-server。幸运的是，它已经包含在你的 Rails 6 应用中，你只需要将其与 Rails 服务器一起启动即可：
在终端中：
./bin/webpack-dev-server
我希望开发服务器上只运行一个命令，理想情况下，这两个rails server进程./bin/webpack-dev-server可以并行启动。现在看来，最简单、最现代的方法是使用 `a`Procfile.dev和 ` overmind`。
Overmind 是一个用于基于 Procfile 的应用程序和tmux 的进程管理器。借助 Overmind，您可以轻松地Procfile在单个终端中运行多个进程。
Procfile 是一种简单的格式，用于指定应用程序提供的进程类型（例如 Web 应用服务器、后台队列进程、前端构建器）以及运行这些进程的命令。它可以显著简化开发人员的进程管理，并被 Heroku 和 Deis 等流行的托管平台所采用。您可以在这里Procfile了解更多关于该格式的信息。
有一些不错的基于 Procfile 的进程管理工具，包括David Dollar 开发的Foreman，它开创了这一领域的先河。但大多数这类工具的问题在于，被管理的进程会误以为它们正在将输出记录到文件中，这会导致各种各样的问题：严重的延迟，以及彩色输出的丢失或损坏。此外，这些工具还会添加一些无关紧要的信息……
Overmind 基本上就是Foreman 的升级版。因为我比较信任网上的信息，所以我现在正在使用它。以下是使用方法：
创建Procfile.dev：
web: rails server
webpacker: ./bin/webpack-dev-server
创建或更新.env 文件：
OVERMIND_PROCFILE=Procfile.dev
现在，无需使用本地rails server或rails s本地，只需使用overmind：
在终端中：
brew install overmind
overmind start
# You can also use overmind s
恭喜，您的 Web 服务器现在运行在http://localhost:5000，并且内置了快速自动重新加载功能。
如果你想调试你的 Rails 服务器，由于多个进程通过 Overmind 运行，你需要这样做：
overmind connect web
要分离 overmind 打开的 tmux 会话并返回到您的终端，请按 CTRL+b 然后 d（表示d etach）。
最初我建议使用更简单的Hivemind，但是一旦你需要调试 Rails 服务器，Hivemind 就帮不了你了。
我遇到的一个问题是 Webpacker 请求 Yarn 完整性检查过于频繁，导致开发环境速度缓慢。由于我知道如何确保我的 Yarn 依赖项是最新的并且始终保持一致（请参阅关于可复现环境的后续部分），所以我禁用了此功能：https://github.com/rails/webpacker#yarn-integrity。
使用 Webpacker 可以做更多的事情，但 Rails 官方文档不会涵盖这些内容。要了解更多关于 Webpacker 的信息，我建议查阅他们的文档。我从他们的文档中学到了我所需要的一切，特别是文件夹结构、webpack-dev-server和CSS 方面的内容。
我之前一直从事 JavaScript 开发，习惯了Jest这款卓越的 JavaScript 测试工具，它如今已成为 JavaScript 应用测试的标准（当然，你可能在使用其他工具，这也没关系）。Ruby 和 Ruby on Rails 的测试环境则更加多样化。我的主要需求是：自动运行测试，并在测试通过或失败时收到桌面通知。
至于自动测试运行，网上已经有很多资料可供参考，例如《在 Rails 6 中自动化 Minitest》就是一个很好的起点。
但是，后来，
想需要这些通知：
这样我就不必离开编辑器去查看测试状态了。
事实证明，实现通知的最简单方法是使用terminal-notifier和terminal-notifier-guard。
你只需要在 Gemfile 的 `<head>` 和 `<head>` 组中添加以下development内容test：
gem 'terminal-notifier', '2.0.0'
gem 'terminal-notifier-guard', '1.7.0'
然后运行bundle。Guard 会自动检测宝石，然后向您发送友好的通知。
在这篇文章的第一个版本中，我提倡使用 Growl，因为我无法让 terminal-notifier 正常工作，但是lobste.rs 上的一位评论者建议我再试一次，结果成功了。
当然，如果您已经在使用 Growl，它也可以正常工作。
我来自 Node.js 和 JavaScript 世界，因此养成了创建可复现环境的良好习惯。
什么是可复现环境？无论运行环境是 Travis CI、Heroku 还是你的 MacBook，都应该始终使用相同的依赖项和平台/语言版本。你肯定不希望 Heroku 使用 Yarn 1.1、Ruby 2.4 和 Node.js 12.1.0 安装依赖项，而你的 MacBook 却使用 Yarn 1.9、Ruby 2.6 和 Node.js 12.3.4。理想情况下，所有这些版本的安装、维护和升级都应该非常便捷。
这适用于：bundler、Rails、Ruby、Node.js 和 Yarn。以下是具体操作方法：
我们将使用：
.ruby-version在所有平台上强制使用相同的 Ruby 版本Gemfile更改以强制执行运行 Bundler 时的 Ruby 版本1.安装rbenv。
2.创建.ruby-version文件：
2.6.5
3.请指明Bundler要检查的GemfileRuby 版本：
ruby '2.6.5'
4.请确保使用与 Gemfile 中 Ruby 依赖项完全相同的版本。这意味着需要修改类似这样的行：
gem 'webpacker', '~> 4.0'
到：
gem 'webpacker', '4.2.0'
幸运的是，我们安装了一个 VS Code 扩展，可以轻松查看任何 Ruby 依赖项的最新版本，只需将鼠标悬停在 Gemfile 中的某一行，即可看到以下内容：
锁定依赖项可能是一个敏感话题。幸运的是，有一篇非常好的文章总结了在指定版本时各种 Gemfile 和 bundler 策略的优缺点：https://thoughtbot.com/blog/a-healthy-bundle。
既然 Rails 依赖于 Webpack，那么它又依赖于 Node.js 和 Yarn，是不是很意外？这意味着我们还需要确保这些二进制文件所使用的版本是特定的。
我们将使用：
.nvmrc文件将指定要安装和使用的 Node.js 版本。Heroku 和 Travis CI 都使用此文件来推断要使用的 Node.js 版本。engines字段将验证任何正在运行的 Node.js 脚本（例如 Webpacker 中的 Webpack）的 Yarn 和 Node.js 版本。为此，1. 安装nvm。
并创建一个.nvmrc文件：
12.13.1
阅读本指南时，请使用最新版本的Node.js。
2.在终端中设置 Yarn 策略：
yarn policies set-version 1.19.1
这将下载 Yarn 1.19.1 版本，并创建一个文件.yarnrc，指示所有 Yarn 二进制文件使用 Yarn 1.19.1 版本。很棒。再次提醒，阅读本指南时请使用最新的 Yarn 版本。
您可以使用最新的LTS版本。
3.更新您的package.json 文件：
{
// [...],
"engines": {
"node": "12.13.1",
"yarn": "1.19.1"
}
}
4.将 package.json 文件中所有依赖项的版本号固定为精确值。为此，请修改所有以版本号开头的行，例如：
"@rails/webpacker": "^4.2.0",
到：
"@rails/webpacker": "4.2.0",
4.至于在 package.json 文件中使用依赖项的确切版本，这其实就是更新 package.json 文件中所有类似这样的行：
"@rails/webpacker": "^4.2.0",
到：
"@rails/webpacker": "4.2.0",
下一部分我们将实际看到一个可以帮你锁定依赖项的工具。
好了！现在你已经掌握了Node.js和Yarn环境。
正如我们所见，我总是使用特定版本的依赖项，这是为了确保环境可复现。你绝对不希望出现因为某些原因导致某个环境或平台使用了不同版本的依赖项的情况。这会浪费大量时间。
像 Gemfile.lock 和 yarn.lock 这样的锁定文件确实能解决很多问题，但这还不够。不仅这些文件本身可能失效，我还想随时准确地知道我使用的直接依赖项的版本。这样我既能了解哪些功能可用，又能知道哪些 bug 仍然存在，而无需深入研究晦涩难懂的命令来理解 package.json 或 Gemfile 中“~2.x”标记背后的含义。
但是，我仍然希望能够不时地轻松升级我的依赖项。我推荐使用Renovate，它可以自动更新 JavaScript 和 Ruby 依赖项。试试吧。
至于在 Heroku 上部署，他们的Rails 6.x 入门指南写得很好，你可以按照它来做。
现在我遇到了一个奇怪的问题：在 Heroku 上部署时会触发多次 Yarn 安装：一次是 Heroku 在检测到 package.json 文件时发起的，另一次是 Webpacker 在打包资源时发起的。这很烦人，我想把这些任务分开：
任务 1 和任务 2 可以由 Heroku 自动检测，也可以由您自行指定，并可指定它们的顺序。为此，您需要自行定义构建包及其顺序，例如先使用 Node.js 构建包，再使用 Ruby 构建包。
让我们在终端中执行此操作：
heroku buildpacks:clear
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add heroku/ruby
现在我们需要禁用 Webpacker 运行的所有 Yarn 安装，请将其添加到您的Rakefile 文件中：
Rake::Task['yarn:install'].clear
namespace :yarn do
desc "Disabling internal yarn install from Rails"
task :install => [:environment] do
puts "Disabling internal yarn install from Rails"
end
end
Rake::Task['webpacker:yarn_install'].clear
namespace :webpacker do
desc "Disabling internal yarn install from Rails"
task :yarn_install => [:environment] do
puts "Disabling internal yarn install from Rails"
end
end
感谢Rebecca Lynn Cremona对此事的深入调查。
我专门写了一篇文章来讨论凭据、配置文件和环境变量，请阅读：
我已将这部分内容单独成文，请点击此处阅读：
🔚 就这样！
总的来说，对于有Node.js背景的人来说，深入Rails的世界感觉很棒。希望文中提到的一些问题会随着时间的推移而消失，届时我会更新这篇文章。如果您对这里提到的任何主题有更多信息，请留言或发邮件至vincent@codeagain.com。
如果本指南对您有所帮助，请分享给其他人阅读：
感谢阅读。
