Font Awesome 可以与 Rails 7 中的导入映射一起使用吗？

我是 Rails 7 的 importmap 的新手，文件说 https://github.com/rails/importmap-rails您可以固定 JavaScript 模块，然后导入它：

./bin/importmap pin react react-dom

import React from "react"
import ReactDOM from "react-dom"

与 Font Awesome 一起使用会如何？ Font Awesome 的文档告诉你应该安装包 https://fontawesome.com/docs/web/setup/packages:

npm install --save @fortawesome/fontawesome-free

但是，当谈到使用它时，它说：

<script defer src="/your-path-to-fontawesome/js/brands.js"></script>
<script defer src="/your-path-to-fontawesome/js/solid.js"></script>
<script defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

我不完全清楚如何将其转换为 importmap。我试过：

<script defer src="https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/js/brands.js"></script>
<script defer src="https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/js/solid.js"></script>
<script defer src="https://ga.jspm.io/npm:@fortawesome/fo[email protected] /cdn-cgi/l/email-protection/js/fontawesome.js"></script>

因为固定导致：

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/js/fontawesome.js"

但这行不通。它失败并在浏览器的控制台中出现以下错误：

我写了一个我的博客上有更长的文章 https://pablofernandez.tech/2022/03/12/using-font-awesome-6-in-a-rails-7-project-that-uses-importmaps/，但要点已复制到此处。

我刚刚使它工作，但我不完全确定它为什么工作，所以我将不胜感激对此解决方案的任何见解或改进。与此同时，我很高兴与世界分享：

首先，您需要通过运行以下命令来固定 Font Awesome Javascript 包：

./bin/importmap pin @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

其中补充道：

pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/js/fontawesome.js"
pin "@fortawesome/fontawesome-svg-core", to: "https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/index.es.js"
pin "@fortawesome/free-brands-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/index.es.js"
pin "@fortawesome/free-regular-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/index.es.js"
pin "@fortawesome/free-solid-svg-icons", to: "https://ga.jspm.io/npm:@fortawesome/[email protected] /cdn-cgi/l/email-protection/index.es.js"

to your importmap.rb.

然后在你的app/javascript/application.js你需要添加：

import {far} from "@fortawesome/free-regular-svg-icons"
import {fas} from "@fortawesome/free-solid-svg-icons"
import {fab} from "@fortawesome/free-brands-svg-icons"
import {library} from "@fortawesome/fontawesome-svg-core"
import "@fortawesome/fontawesome-free"
library.add(far, fas, fab)

如果您不需要其中一个库，您可以跳过它们，但是跳过最后两次导入或将每个图标包添加到库中会使其不起作用。