Rails 7（7.0.2.3）Itmotmap jQuery未定义

Question

我在Rails 7（7.0.2.3）中安装JQuery尽可能多的帮助。我想在我的视图中使用脚本标签，但我似乎无法将其导出到全球可用的位置，嗯...在任何地方。

确保inoctimmap易于操纵与安装和映射软件包有关。布拉沃。之后，整个文档都崩溃了，一般的雾笼云云笼罩着使用JS软件包的新方法。环顾四周，有很多混乱。

也就是说，我该如何添加此或类似的内容：

import jquery from "jquery"
window.jQuery = jquery;
window.$ = jquery;

将其添加到application.js或任何地方以使这些全局功能工作（例如$）。我希望$可以在我所有的观点中使用。

至于我所做的：

./bin/importmap pin jquery --download

给我importmap行：

pin "jquery" # @3.6.0

好的。然后查看ImportMap JSON：

{
  "imports": {
    "application": "/assets/application-37a24e4747cc3cde854cbbd628efbdf8f909f7b031a9ec5d22c5052b06207eb8.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-96cbf52c71021ba210235aaeec4720012d2c1df7d2dab3770cfa49eea3bb09da.js",
    "@hotwired/stimulus": "/assets/stimulus.min-900648768bd96f3faeba359cf33c1bd01ca424ca4d2d05f36a5d8345112ae93c.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js",
    "jquery": "/assets/jquery-498b35766beec7b412bab57a5acbe41761daa65aa7090857db4e973fa88a5623.js",
    "controllers/application": "/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js",
    "controllers": "/assets/controllers/index-7a8fc081f7e391bd7b6fba95a75e36f88ba813da2c4c8787adad248afb9a0a06.js"
  }
}

ding。看起来它在那里。然后在application.html.erb中一个简单的脚本标签：

<script type="text/javascript" charset="utf-8">
        $(document).ready(function (){
            console.log('jQuery working.');
        })
</script>

失败。检查员说：

(index):41 Uncaught ReferenceError: $ is not defined

这确实是非常基础的，并且非常烦人，不要在某些带有jQuery和bootstrap等最常用的库中提供文档。

这是第一天的东西，但是文档对这些事情非常稀疏。似乎应该有一些协调的努力来真正解释webpack的变化本身就是另一个惨败。

请，如果您知道答案的答案，请发布它，以便每个人都能受益。

谢谢。

Answer 1

截至目前（4月2022年）讨论

有两件事要考虑：内联脚本加载和浏览器importmap支持。两者都可以使内在
脚本是指通过ImportMap反插图和容易出错的变量定义的变量。

直列脚本加载

内联脚本首先执行。那是在加载ImportMap JS脚本之前。请参阅 mdn script
文档。

浏览器ImportMAP支持

ImportMap仍然非常新，并且支持各不相同。这使事情变得复杂。

• 对于没有importMap的Firefox，使用eS模块shim，可以加载
  ImportMap 'load' +“ domcontentloaded”事件。
• 对于带有importMap支持的Chrome，在'load'和
  “ domcontentloaded”。
• 另外，对于各种原因。

结论

可变的和功能 - 备用机制会处理脚本加载序列问题，但是在这种情况下，由于脚本是内联定义的，并且importmap脚本尚未加载，因此该变量未确定，并确定会导致一个
Reference Error：...未定义。

解决方案

确保在访问之前定义变量，通过检查ImportMap中的脚本是否已加载到Inline脚本中，并且在运行代码访问它们之前 。

大多数可靠将变量放入application.js和
在内联脚本中检查其声明 。如果它存在于ImportMap，并且已加载了application.js中的所有内容。

document.domcontentloaded事件或window.load.load事件或 都可以与 >关键字。另外，自定义事件可以在应用程序的末尾投掷。 JS仅在加载ImportMap代码之后才能强制运行内联码。

示例：

1. importmap.rb中固定jQuery
2. 在

// jquery does not export 'default' but defines window.$ and
// window.jQuery when loaded:
// - import 'jquery'; will not work
// - namespace does not matter here (jq)
// - no need to redefine it again w/ window.$ = jq.$
import * as jq from 'jquery';

// Define a variable to check in inlined HTML script
window.importmapScriptsLoaded = true;

3. 之后

注意：根据注入的垫片/多填充，负载顺序仍然不确定。在这种情况下，需要更多的工作（例如扔自定义活动）。另外，DOM可能会加载两次，当不执行代码时，需要考虑考虑。

<h1 id="hello">Hello</h1>

<script type="text/javascript">

// Guard against double DOM loads
var codeExecuted = false;

document.addEventListener('DOMContentLoaded', function(e) {

  // Check if importmap stuff exisits without throwing an error.
  // Then run main code w/ guard against multiple executions.
  if ("importmapScriptsLoaded" in window) { 

    if (!codeExecuted) {
      // Main code here
      console.log($('#hello'));

      // Don't forget to bump guard for one-time only JS execution !!
      codeExecuted = true; 
    };  
  };

});
</script>

• 或者，直接使用 Asset管道或直接public文件夹。
  这是不推荐的，原因有两个：
  内联脚本将被加载到ImportMap脚本一边。一个脚本可能会导致其所有依赖关系。 （ImportMap脚本尚未加载此处）。

例子：

<script type="text/javascript" src="/jquery.js"></script>