Ruby on rails 如何在rails 6应用程序中使用Gem中的js文件

所以我已经使用rails很长一段时间了。但是有了Rails 6，我真的很难移动。我有一些用于资产和东西的自定义gem，我不知道如何加载js文件

我习惯了什么

application.js

//= require activestorage
//= require jquery-3.3.1.min
//= require popper.min
//= require bootstrap
//= require mdb
//= require wysiwyg
//= require addons/pickr.min
//= require modules/buttons
//= require modules/cards
//= require modules/waves
//= require activestorage
//= require turbolinks
//= require_tree .

require("@rails/ujs").start()
require("turbolinks").start()
require ("jquery-3.3.1.min").start()
require ("popper.min").start()
require ("bootstrap").start()
require ("mdb").start()
require ("wysiwyg").start()
require ("addons/pickr.min").start()
require ("modules/buttons").start()
require ("modules/cards").start()
require ("modules/waves").start()
require("@rails/activestorage").start()
require("channels")

但这不会在Rails6中加载Webpacker。我在网上找不到一个基本的解决方案，这个解决方案不包括向应用程序添加多个js文件和代码行，以便将一个解决方案拼接在一起。我尝试的是

app/javascript/packs/application.js

//= require activestorage
//= require jquery-3.3.1.min
//= require popper.min
//= require bootstrap
//= require mdb
//= require wysiwyg
//= require addons/pickr.min
//= require modules/buttons
//= require modules/cards
//= require modules/waves
//= require activestorage
//= require turbolinks
//= require_tree .

require("@rails/ujs").start()
require("turbolinks").start()
require ("jquery-3.3.1.min").start()
require ("popper.min").start()
require ("bootstrap").start()
require ("mdb").start()
require ("wysiwyg").start()
require ("addons/pickr.min").start()
require ("modules/buttons").start()
require ("modules/cards").start()
require ("modules/waves").start()
require("@rails/activestorage").start()
require("channels")

资产在gem中的正确位置（因此rails 5应用程序中的第一个版本会按预期加载所有内容）。我可以用纱线添加其中的一些，但我想使用gem中的实际文件，而不仅仅是让引导程序工作，有一个简单的解决方案吗？我还尝试在

require

中调整路径，但也没有成功

---

谢谢你的帮助

您需要通过gem导入js文件。也许这可以帮助你：

import jQuery from 'jquery'

<%= File.read(File.join(Gem.loaded_specs['bla_bla_gem'].full_gem_path, 'lib', 'assets', 'javascripts', 'bla_bla.js')) %>

从“jQuery”导入jQuery

---

因此，要回答rails 6中的问题，您会注意到javascript文件夹app/javascript的使用，这意味着您对JS所做的任何事情都应该从这里开始。现在，对宝石的依赖已降至最低，取而代之的是纱线

我将给你一个使用js库的过程示例。例如，我将使用纱线调用引导。我已经包括了自定义文件，以帮助您调用每个库

这是一个我喜欢使用的过程，我从我不久前在媒体上读到的东西中修改了它

# app/javascript/packs/application.js
import '../stylesheets/application'


# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
in the console run

yarn add bootstrap@4.3.1 jquery popper.js

。。。 然后

并将其链接到app/javascript/packs/application.js文件中

# app/javascript/packs/application.js
import './bootstrap_custom.js'
then

# app/javascript/stylesheets/application.scss
@import './bootstrap_custom.scss'
then

# app/javascript/stylesheets/bootstrap_custom.scss
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';

---

如果您选择严格遵循此操作，请不要更改scss行等，否则会弄乱它

我认为文件的位置可能会给您的案例带来问题： 当您的文件位于中时，文件应位于

app/assets/javascripts/application.js

中

app/javascript/packs/application.js

---

希望这能对您有所帮助。

您需要直接从gem文件中获取它们

将

application.js

更改为

application.js.erb

并遵循demir解决方案。还可以使用“下一个”导入多个文件

<% ['file_1', 'file_2'].each do |file| %>
 import "<%= File.join(Gem.loaded_specs['my_gem'].full_gem_path, 'app', 'assets', 'javascripts', file) %>";
<% end %>

输入“”；

JavaScript文件的位置是什么？我假设第一个代码段位于

app/assets/javascripts/application.js

中，而第二个代码段位于

app/javascript/packs/application.js

中，我的假设正确吗？是的，这是代码段的位置，对不起，我应该标记它。要包含的js文件位于gem中，位置应该在

/vendor/assets/javascripts/*

右侧，因此问题是如何从gem加载此文件。你的答案似乎基本上是说，将gem转换成可以用Thread安装的东西，对吗？我的答案是，js库的资产管道在rails 6中的处理方式不同，因此添加了节点模块文件夹和样式表\u pack\u标记javascript\u pack\u标记。我不是专家，但这对我来说很有用。。。我认为在项目中实现JS会更加健壮。如果你想使用gem，只需不包括js的pack_标签，就可以使用

bin/bundle exec rails webpacker:install:erb

返回到旧标签安装webpacker支持

js.erb

文件，安装：erb看到一个问题：gem目录中的文件更改似乎不会自动调用

bin/webpack

rebuild；正如

javascript/packs/application.js.erb

所做的更改一样。更改gem目录中的文件时，您必须使用命令

bin/webpack

手动重建javascript包。在调试gem并更改其javascript时发现了这一点。当然，gem文件中的这些更改将在部署时被删除，但是在调试时能够灵活地修改那里的代码还是不错的。