我喜欢花时间学习新技术。然而，使用新技术的最大缺点往往是早期采用时不可避免的痛点。我在“  ”中快速了解 Web3 时，经常看到这种情况。 如何在 2022 年从全栈开发人员转型为 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 库 最后一个特点就是促使我写这篇文章的动力。 导入地图如何工作？ 从高层次来看，   Gem 允许开发人员将地图导入其应用程序。使用 允许工程师根据需要更新、固定或取消固定依赖项。这类似于 Maven 和 Gradle 在基于 Java 的项目中的工作方式。 importmaps-rails /bin/importmap 这样就无需处理与捆绑包和转译 ES6 和 Babel 相关的复杂性。再见 Webpack！再见 Node.js！ 让我们构建一些东西 由于我近二十年来从未接触过 Ruby on Rails，所以我需要做的第一件事就是按照 在我的 MacBook Pro 上安装 Ruby 3.3。安装完成后，我只需要将 。 本指南 Ruby 插件作为我的 IntelliJ IDEA IDE 的一部分进行安装 然后，我在 IntelliJ 中创建了一个名为 的新 Ruby on Rails 项目，并指定使用 JavaScript 框架的  ：  import-map Importmap 创建项目后，我首先想看看使用本地 JavaScript 库有多么容易。因此，我创建了一个名为 的新 JavaScript 文件，其中包含以下内容： /public/jvc_utilities.js   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 对我的应用程序来说是唯一的，但我已将其删除）导航到 页面：   ://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index /example/index https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index 这是我所看到的：  当我在浏览器中查看 JavaScript 控制台时，出现了以下日志：  导航到  ，我看到以下信息：  /jvc-utilities.html 当我在浏览器中查看 JavaScript 控制台时，我看到了以下日志：  成功了。我能够在我的 Rails 7 应用程序中使用一个独立的 JavaScript 库以及公共的 Lodash JavaScript 库 — 所有这些都通过使用 Import Maps 来实现，而无需处理 Webpack 或 Node.js。再见，Webpack 和 Node.js！ 结论 我的读者可能还记得我的个人使命宣言，我觉得它适用于任何 IT 专业人士：  “将时间集中在提供能够扩展知识产权价值的功能上。其他一切都可以利用框架、产品和服务。” — J. Vester 在本文中，我深入研究了 Rails 7，并使用 Import Maps 展示了如何轻松使用 JavaScript 库，而无需额外使用 Webpack 和 Node.js。尽管距离我上次看到 Rails 的实际应用已经过去了二十多年，但我对完成目标所需的时间之短感到非常惊讶。 从部署角度来看，将 Rails 应用程序部署到 Heroku 平台的工作包括创建 和三个 CLI 命令。 Procfile 在这两种情况下，Rails 和 Heroku 都遵循我的使命宣言，让我能够专注于为客户提供价值，而不会被 Webpack、Node.js 甚至 DevOps 任务的挑战所困扰。 虽然我确信在探索新技术时我们将继续面临不那么理想的痛点，但我也相信，随着时间的推移，我们将看到类似我在本文中所展示的成就。 与往常一样，我的源代码可以在 GitLab 找到。 上 祝您度过愉快的一天！

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

2022 - HackerNoon Contributor of the Year - Cloud Computing

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Salesforce

2022 - Hackernoons Tech Storyteller of the Year

I ♥ writing code. Find me on GitLab.

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - Hackernoons Tech Storyteller of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Cloud Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Salesforce

該音頻是用故事的原始語言製作的！

太長; 讀書

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

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

如何将您的工作流程提高 10 倍：17 个必备应用程序

扬帆起航：利用数据湖开发生产级 RAG 应用程序

从论坛到信息流：社交媒体算法如何塑造数字互动

比特币 UTXO 模型，为独特的生态系统提供动力

如何将您的工作流程提高 10 倍：17 个必备应用程序

扬帆起航：利用数据湖开发生产级 RAG 应用程序

从论坛到信息流：社交媒体算法如何塑造数字互动

比特币 UTXO 模型，为独特的生态系统提供动力

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps