如何在rails 6或rails 7 alpha引擎中使用jqueryUI

Question

如果有人能展示在rails 6或rails 7 Alpha 2引擎中使用jquery ui所需的确切步骤，我将不胜感激。我一直无法获得importmap-rails在rails 7引擎中工作，也不能让webpacker在rails 6引擎或rails 7 alpha 2引擎中工作。给定一个使用

生成的名为custom_page的引擎

rails plugin new custom_page --mountable --full

我把jquery-ui-rails作为一个依赖项包含在gemspec中。

spec.add_dependency 'jquery-ui-rails'

也许这应该是一个runtime_dependency?完整的依赖列表是

spec.add_dependency "rails", "~> 7.0.0.alpha2"
spec.add_dependency 'new_ckeditor'
spec.add_dependency 'ancestry'
spec.add_dependency 'friendly_id', '>= 5.4.0'
spec.add_dependency 'pg_search'
spec.add_dependency 'carrierwave', '~> 2.0'
spec.add_dependency 'carrierwave-imageoptimizer'
spec.add_dependency 'sassc-rails', '~> 2.0.0'
spec.add_dependency 'pg', '~> 1.1'
spec.add_dependency 'jquery-rails'
spec.add_dependency 'jquery-ui-rails'
spec.add_development_dependency "puma"
#Testing Gems
spec.add_development_dependency "rspec-rails", '>= 5.0'
spec.add_development_dependency "factory_bot_rails"
spec.add_development_dependency "guard-rspec"
spec.add_development_dependency 'capybara', '>= 3.32'
spec.add_development_dependency 'selenium-webdriver'
spec.add_development_dependency 'launchy'
spec.add_development_dependency 'database_cleaner-active_record'

我在引擎中要求相同。rb

require 'jquery-ui-rails'
require 'friendly_id'
require 'ancestry'
module CustomPage
class Engine < ::Rails::Engine
isolate_namespace CustomPage

config.generators do |g|
g.test_framework :rspec,
fixtures: false,
request: false,
view_specs: false,
helper_specs: false,
controller_specs: false,
routing_specs: false
g.fixture_replacement :factory_bot
g.factory_bot dir: 'spec/factories'
end
end
end

我在视图中添加了一个简单的测试

<p id="notice"><%= notice %></p>
<script type='text/javascript'>
$(function() {
$('.datepicker').datepicker();
});
</script>

我在app/assets/stylesheets/custom_page/application.css

中包含了要求

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
/*
*= require jquery-ui
*/

还有app/assets/config/custom_page_manifest.js

//= link_directory ../stylesheets/custom_page .css
//= require jquery-ui

我得到一个错误时，检查浏览器控制台在firefox显示

Uncaught ReferenceError: $ is not defined

我显然在这里展示了一个Rails 7 alpha 2的例子，但是使用Rails 6.1.4会出现同样的问题

这个练习的目的是使我能够使用jquery库jqtree，如果我能够使用importmap-rails，它将很容易设置，但是，根据我的开放的，尚未回答的问题，我不能这样做。

所以我真的想问如何在Rails 6.1.4引擎或Rails 7 alpha 2库中使用jquery库

Answer 1

这并不像我想象的那么简单。首先，jquery-ui-rails和jquery-rails似乎过时了。我觉得你不该用那些宝石。我们可以使用importmaps，因为我们已经为引擎设置了它。但是这种用法并不局限于引擎。

# config/importmap.rb
# NOTE: pin jquery to jsdelivr. this will make jquery global on import;
#       jspm wraps packages in a module [1], so jquery is not available globally.
pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"
# NOTE: a few answers suggested `jquery-ui-dist`. I couldn't add it with 
#       `bin/importmap`; use https://generator.jspm.io/ to get the url.
pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
# works fine
pin "jqtree", to: "https://ga.jspm.io/npm:jqtree@1.6.2/lib/tree.jquery.js"
# [1] someone, please, link to/explain what jspm does exactly to cause this.

// app/javascript/application.js
import "jquery";
import "jquery-ui-dist";
import "jqtree";
console.log(window.$);   // jQuery is already global
console.log($.ui);       // jquery-ui initialized on import
console.log($().tree);   // jqtree also initialized

如果你想坚持使用jspm，动态import()可以用来加载jquery插件。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import dynamic_imports

# config/importmap.rb
pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
pin "jqtree", to: "https://ga.jspm.io/npm:jqtree@1.6.2/lib/tree.jquery.js"

// app/javascript/application.js
import jQuery from "jquery";
// NOTE: keep in mind, these will be lazily loaded; use first method if this 
//       doesn't work in your set up.
import("jquery-ui-dist");
import("jqtree");
console.log(window.$);      // undefined
console.log(window.jQuery); // undefined
console.log(jQuery().ui);   // undefined
console.log(jQuery().tree); // undefined
// NOTE: make jquery global
window.$ = window.jQuery = jQuery;

为rails 6设置jquery-ui-rails和jquery-rails宝石。确保您也需要jquery。不要碰manifest.js，你不是在预编译jquery，你是在预编译应用。{css,js}已经包含jquery。您必须将require添加到application.js。

https://github.com/rails/jquery-rails安装

https://github.com/jquery-ui-rails/jquery-ui-rails require-everything

// app/assets/javascripts/application.js
//= require jquery
//= require jquery-ui

/* app/assets/stylesheets/application.css */
/*= require jquery-ui */