2,697 讀數

告别 Webpack 和 Node.js，迎接 Rails 和 Import Maps

经过 John Vester7m2024/08/07

太長; 讀書

Rails 7 引入了新功能，使使用 Node.js 和 Webpack 变得更加容易。新的导入地图功能允许开发人员将地图导入到他们的应用程序中。这样就无需处理与捆绑包和转译 ES6 和 Babel 相关的复杂性。本文介绍了如何在 Ruby on Ruby 中使用新的导入地图功能。

featured image - 告别 Webpack 和 Node.js，迎接 Rails 和 Import Maps

我喜欢花时间学习新技术。然而，使用新技术的最大缺点往往是早期采用时不可避免的痛点。我在“ 如何在 2022 年从全栈开发人员转型为 Web3 先驱”中快速了解 Web3 时，经常看到这种情况。

作为软件工程师，我们在试用新技术时习惯于接受这些早期采用者的挑战。对我来说最有效的方法是保留一份我执行过的笔记和命令的列表，因为看似不合逻辑的步骤不会留在我的记忆中。

除了 Web3，我还在 JavaScript 领域发现了这一挑战，它有使用 Node.js 和 Webpack 的半标准要求。我想找到一种解决方案，让我可以按原样使用 JavaScript，而不必费力使用 Node.js 和 Webpack。我最近读到 Rails 7 版本是如何解决这一问题的。所以，这就是我将在本文中介绍的用例。

关于 Rails

坦白说，我对 Ruby 和 Ruby on Rails 几乎一无所知。我记得几年前看到有人发出一些命令来创建功能齐全的服务，当时我想，“哇，这看起来很棒。”但我从未花时间尝试过这种方法来构建服务和应用程序。

我很确定我在 2006 年初看过那个演示，因为 Rails 最早是在 2005 年底出现的。就像我在演示中看到的那样，最终结果是一项支持模型-视图-控制器 (MVC) 设计模式的服务，我早期使用 Spring、Struts、JSF 和 Seam 框架时对这种模式很熟悉。

Rails 承诺在遵循 DRY（不要重复自己）实践的同时保持简单。为了兑现这一承诺，Ruby 使用 Gems 帮助工程师将共享依赖项引入他们的项目。

版本 7 亮点

2021 年末，Rails 的第七个主要版本引入了一些令人兴奋的功能：

异步查询——摆脱串行运行查询
加密数据库层——保护服务层和持久层之间的数据
比较验证器 – 允许在持久化之前进行对象验证
导入地图 – 不再需要 Node.js 和 Webpack 的 JavaScript 库

最后一个特点就是促使我写这篇文章的动力。

导入地图如何工作？

从高层次来看， importmaps-rails Gem 允许开发人员将地图导入其应用程序。使用/bin/importmap允许工程师根据需要更新、固定或取消固定依赖项。这类似于 Maven 和 Gradle 在基于 Java 的项目中的工作方式。

这样就无需处理与捆绑包和转译 ES6 和 Babel 相关的复杂性。再见 Webpack！再见 Node.js！

让我们构建一些东西

由于我近二十年来从未接触过 Ruby on Rails，所以我需要做的第一件事就是按照本指南在我的 MacBook Pro 上安装 Ruby 3.3。安装完成后，我只需要将Ruby 插件作为我的 IntelliJ IDEA IDE 的一部分进行安装。

然后，我在 IntelliJ 中创建了一个名为import-map的新 Ruby on Rails 项目，并指定使用 JavaScript 框架的Importmap ：

创建项目后，我首先想看看使用本地 JavaScript 库有多么容易。因此，我创建了一个名为/public/jvc_utilities.js的新 JavaScript 文件，其中包含以下内容：

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

默认函数只是将一些命令回显到 JavaScript 控制台。

接下来，我创建了一个 HTML 文件（ /public/jvc-utilities.html ），其内容如下：

 <!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>

此示例演示了如何将本地 JavaScript 文件与公共 HTML 文件一起使用——无需任何额外的工作。

接下来，我创建了一个名为Example新控制器：

 bin/rails generate controller Example index

我想在这个例子中使用Lodash 库，因此我使用以下命令将该库添加到我的import-map项目中：

 bin/importmap pin lodash

为了向控制器添加一些基于 JavaScript 的功能，我更新了javascript/controllers/example_controller.js使其如下所示：

 import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }

此逻辑建立一个包含三个值的数组，然后将值加倍。我使用 Lodash map()方法来执行此操作。

最后，我更新了views/example/index.html.erb以包含以下内容：

 <h3>Example Controller</h3> <div data-controller="example"></div>

此时，以下 URI 可用：

/jvc-utilities.html
/example/index

让我们部署并验证

与其在本地运行 Rails 服务，我考虑使用 Heroku。这样，我可以确保其他用户可以访问我的服务。

使用我的 Heroku 帐户，我按照“使用 Ruby 开始使用 Heroku ”指南进行操作。根据我的项目，我的第一步是添加一个名为Procfile的文件，其内容如下：

 web: bundle exec puma -C config/puma.rb

接下来，我使用 Heroku CLI 在 Heroku 中创建一个新的应用程序：

 heroku login heroku create

使用create命令，我启动并运行了以下应用程序：

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

此步骤还创建了 Heroku 生态系统使用的 Git 远程。

现在，我需要做的就是将最新更新推送到 Heroku 并部署应用程序：

 git push heroku main

这样，我的代码就被推送到 Heroku，然后 Heroku 编译并部署了我的应用程序。不到一分钟，我就看到了下面的内容，让我知道我的应用程序已经可以使用了：

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

然后，我使用我的 Heroku URL（该 URL 对我的应用程序来说是唯一的，但我已将其删除）导航到/example/index页面： https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index ://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

这是我所看到的：