我喜欢花时间学习新技术。然而，使用新技术的最大缺点往往是早期采用时不可避免的痛点。我在“  ”中快速了解 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

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

太長; 讀書

Make resilience your competitive advantage

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

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

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

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

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

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

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps