Rails 7的importmap-rails是什么？

2 年 ago
韵, 科
1 minute

首先

在Rails 7中执行rails new app_name命令，Gemfile文件中会自动加入importmap-rails。importmap-rails是什么意思？

本文章将解释什么是importmap-rails，并描述其使用所带来的变化。

导入地图-铁轨

importmap-rails是一个用于使Rails中使用import maps机制更加方便的gem。

导入地图

“import maps” 是将 JavaScript 模块的实体和逻辑名称进行映射。例如，可以通过以下方式进行映射。

<script type="importmap">
{
  "imports": {
    "react": "https://ga.jspm.io/npm:react@17.0.2/index.js",
  }
}
</script>

“react”是一个逻辑名称，URL是JavaScript模块的具体实体。

通过这样的映射，您可以使用逻辑名称从其他文件中导入JavaScript模块。

import React from "react"

只要使用importmap-rails，就会很便利。

如果使用importmap-rails，就不再需要编写那样的script标签。首先，在config/importmap.rb文件中写入以下内容。

pin "react", to: "https://ga.jspm.io/npm:react@17.0.2/index.js"

然后，只需要在application.html.erb中的标签内写入<%= javascript_importmap_tags %>。

<!DOCTYPE html>
<html>
  <head>
    ...
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

只需这样，就可以在Rails上的JavaScript文件中导入React。

使用importmap-rails带来的变化（引用）

使用importmap-rails会带来以下变化。

    • 複数のJavaScriptファイルを１つのファイルにまとめる必要がなくなる(bundling不要)

 

    1モジュール変更したら、そのモジュールのキャッシュだけ期限切れにできる

关于第一个，由于浏览器的导入功能会自动获取所依赖的模块，因此不再需要对JavaScript进行捆绑。

第二个原因是由于不再需要捆绑而产生的效果。只需将发生变化的一个模块发送到浏览器即可，因此减少了资源的传输量。

总结

我写了关于Importmap-rails是什么以及使用它会带来的变化的内容。

由于在Rails 7之前并不存在类似于importmap-rails的东西，并且我一直对此很感兴趣，于是我进行了一番调查并撰写了一篇文章。在调查过程中，我发现使用importmap-rails可以避免进行JavaScript的打包工作，这是一个很不错的发现。能够减少不必要的工作总是令人高兴的。

今后，我们将实际尝试使用importmap-rails，并积累经验教训。

bannerAds