如何在Rails 6应用程序中使用GEM中的JS文件

Question

所以我已经使用了轨道了一段时间。但是，有了铁轨6，我一直在努力移动。我有一些用于资产和事物的自定义宝石，我无法弄清楚如何加载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 .

，但这不会加载带有WebPacker的Rails 6。我无法在线找到基本解决方案，该解决方案不涉及将多个JS文件和代码行添加到应用程序中以将解决方案修补在一起。我尝试的是

app/javascript/packs/application.js

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")

资产位于宝石内的正确位置(因此，Rails 5应用程序中的第一个版本确实可以按预期加载所有内容(。我可以用纱线添加其中的一些，但是我想使用GEM中的实际文件，而不仅仅是让引导程序正常工作，对此有直接的解决方案吗？我还尝试调整require中的路径，但这也不起作用。

感谢您的任何帮助！

Answer 1

您需要通过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')) %>

相关问题注释

Answer 2

因此，要在Rails 6中回答您会注意到使用JavaScript文件夹应用程序/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

然后

# config/webpack/environment.js
...
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

...然后

# app/javascript/packs/bootstrap_custom.js
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

并将其链接在您的应用/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线等，它会将其弄乱

Answer 3

您需要直接从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 %>

Answer 4

我认为文件的位置可能正在为您的情况创建一个问题：文件在您的文件中时应在app/assets/javascripts/application.js中 app/javascript/packs/application.js

希望这对您有帮助。