在Rails 7中包含JavaScript库的正确方法是什么？

发布于 2025-02-13 04:35:59 字数 2602 浏览 0 评论 0原文

我在使用bin/importMap中在Rails 7中导入jQuery时遇到麻烦。当我使用普通脚本标签导入jQuery时，代码可以正常工作。但是，当我尝试使用刺激控制器中的bin/importMap进行操作时，代码会引发错误。

使用bin/importMap尝试：

importmap.rb：


pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
pin "fomantic-ui", to: "https://ga.jspm.io/npm:[email protected]/dist/semantic.js"
pin "nag", to: "https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/components/nag.min.js"

hello_controller.js

import {Controller} from "@hotwired/stimulus"
import jQuery from "jquery"
let $ = jQuery;
import "fomantic-ui"
import "nag"

export default class extends Controller {
    connect() {
        $('#fixednag').nag({
            persist: true
        });
    }
}

错误

Failed to register controller: hello (controllers/hello_controller) ReferenceError: jQuery is not defined
    <anonymous> semantic.js:25

使用普通脚本标记添加jQuery并在hello_controller.rb中删除import $，它

正常工作： application.html.erb：

<!DOCTYPE html>
<html>

<head>
    <title>Pingcoders</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css" %>
    <%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/components/nag.min.css" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <%= javascript_importmap_tags %>
</head>

hello_controller.rb

import {Controller} from "@hotwired/stimulus"
import "fomantic-ui"
import "nag"

export default class extends Controller {
    connect() {
        $('#fixednag').nag({
            persist: true
        });
    }
}

可以错误？还有其他方法可以正确导入jQuery吗？

原文

I'm having trouble with importing Jquery in rails 7 using bin/importmap. When I import the Jquery with normal script tag, the code works fine. But when I try to do it using bin/importmap in Stimulus controllers, the code throws an error.

Trying with bin/importmap:

importmap.rb:


pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"
pin "jquery", to: "https://ga.jspm.io/npm:[email protected]/dist/jquery.js"
pin "fomantic-ui", to: "https://ga.jspm.io/npm:[email protected]/dist/semantic.js"
pin "nag", to: "https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/components/nag.min.js"

hello_controller.js

import {Controller} from "@hotwired/stimulus"
import jQuery from "jquery"
let $ = jQuery;
import "fomantic-ui"
import "nag"

export default class extends Controller {
    connect() {
        $('#fixednag').nag({
            persist: true
        });
    }
}

error

Failed to register controller: hello (controllers/hello_controller) ReferenceError: jQuery is not defined
    <anonymous> semantic.js:25

After adding the jquery using normal script tag and removing import $ in hello_controller.rb, it works fine:

application.html.erb:

<!DOCTYPE html>
<html>

<head>
    <title>Pingcoders</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css" %>
    <%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/components/nag.min.css" %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <%= javascript_importmap_tags %>
</head>

hello_controller.rb

import {Controller} from "@hotwired/stimulus"
import "fomantic-ui"
import "nag"

export default class extends Controller {
    connect() {
        $('#fixednag').nag({
            persist: true
        });
    }
}

What is the reason for the error? Is there any other way to import jQuery properly?

分享到QQ

分享到微博