在 Rails 7 中，可以将导入映射与 js 捆绑解决方案一起使用还是它们是排他性的？

Question

我开始了解 Rails 7 中新的导入映射功能。使用此功能似乎有很多优点。

然而，如果我需要一个转译步骤（例如 JSX），我似乎需要一个 js 捆绑解决方案。我不清楚这是否意味着我也不能使用导入映射，或者有它的任何好处？

有人可以帮助我了解这些是否可以同时使用？

Answer 1

Importmaps使用import语句，esbuild将删除所有导入。在esbuild之上使用importmaps确实没有意义。但是，可以这么说，您可以并行使用它们。只需创建两个 javascript 入口文件，一个由esbuild处理，另一个保持不变以与importmaps一起使用。

<%= javascript_importmap_tags "application_importmap" %>
<%= javascript_include_tag "application_esbuild", defer: true %>

如果您在application.jsimport中有语句并且使用esbuild，它会将所有导入合并到一个文件中，再加上转换、编译以及您设置它执行的任何其他操作。此后没有任何语句留下，您将获得熟悉的官样文章包：import

<%= javascript_importmap_tags "application_importmap" %>
<%= javascript_include_tag "application_esbuild", defer: true %>

如果您使用importmaps，则不会进行任何类型的预处理，并且所有import语句都保持不变。实际导入委托给浏览器。这是importmap工作的地方，application.js和其他文件保持不变：

// application.js

(() => {
  var __defProp = Object.defineProperty;
  var __getOwnPropNames = Object.getOwnPropertyNames;
  var __esm = (fn, res) => function __init() {
    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
  };
...

例如，导入映射告诉浏览器在哪里可以找到@hotwired/turbo-rails 。因为它不是浏览器可以获取的 URL，所以必须将其映射到 URL。这就是你制作这些别针的原因。它们负责映射到相对或远程 URL。相对 URL 由sprocket处理，并在文件更改时自动更新。

// application.js

import "@hotwired/turbo-rails";

如果您的application.js由esbuild处理，则importmaps无需执行任何操作。

也许你可以只转译jsx并保持import不变，但这感觉像是一个过度的设置。

为了简单起见，请选择其中之一：坚持使用基本 javascript 并使用importmaps，否则使用esbuild。

https://github.com/WICG/import-maps