как использовать js файлы из Gem в приложении rails 6

Так что я довольно давно пользуюсь рельсами. Но с Rails 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 .

Но это не загружается в Rails 6 с Webpacker. Мне не удалось найти базовое решение для этого в Интернете, которое не включало бы добавление нескольких файлов js и строк кода в приложение, чтобы исправить решение вместе. То, что я пробовал, было

приложение / JavaScript / пакеты / 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 загружает все, как ожидалось). Я могу добавить некоторые из них с помощью пряжи, но я хочу использовать фактические файлы из драгоценного камня, а не просто заставить работать начальную загрузку, есть ли простое решение для этого? Я также попытался настроить путь в require, но это тоже не сработало.

Спасибо за любую помощь!


ruby-on-rails ruby-on-rails-6 webpacker
person Rockwell Rice    schedule 30.07.2019    source источник
comment
Где находятся рассматриваемые файлы JavaScript? Я предполагаю, что первый фрагмент находится в app/assets/javascripts/application.js, а второй - в app/javascript/packs/application.js. Правильно ли я предполагаю это?   -  person 3limin4t0r    schedule 09.09.2019
comment
Да, это расположение фрагментов, извините, я должен был это отметить. Включаемые js-файлы находятся в геме, и их расположение будет в /vendor/assets/javascripts/*   -  person Rockwell Rice    schedule 09.09.2019

Ответы (4)


arrow_upward
3
arrow_downward

Вам нужно импортировать файлы js через gem. Может быть, это поможет вам:

import jQuery from 'jquery'

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

Комментарий по теме

person demir    schedule 06.09.2019

arrow_upward
1
arrow_downward

Итак, чтобы ответить в рельсах 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 [email protected] 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'

И свяжите его в файле 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 и т. Д., Это испортит

person Jem Built    schedule 10.09.2019
comment
Итак, вопрос в том, как загрузить это из драгоценного камня. Ваш ответ, кажется, в основном говорит о том, что преобразовать свой драгоценный камень во что-то, что вы можете установить с помощью пряжи, верно? - person Rockwell Rice; 10.09.2019
comment
В моем ответе говорится, что конвейер ресурсов для js-библиотек обрабатывается по-разному в rails 6, поэтому добавлены папка node-modules и stylesheet_pack_tag javascript_pack_tag. Я не эксперт, но это то, что у меня сработало ... и я думаю, что это делает реализацию JS в проекте намного более надежной. Если вы хотите использовать гем, просто не включайте pack_tag для js, вернитесь к старому тегу - person Jem Built; 10.09.2019

arrow_upward
1
arrow_downward

Вам нужно будет получить их прямо из файлов гемов.

Измените свой 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 %>
person Gerardo S    schedule 12.09.2019
comment
Установите поддержку webpacker для js.erb файлов с помощью bin/bundle exec rails webpacker:install:erb см. stackoverflow.com/a/64964126/960184 - person Richard Logwood; 13.03.2021
comment
Одна проблема заключается в том, что изменения в файлах в каталоге gem, похоже, не вызывают автоматически bin/webpack rebuiild; как изменение javascript/packs/application.js.erb. При изменении файла в каталоге gem вам придется вручную перекомпилировать пакеты javascript с помощью команды bin/webpack. Обнаружил это при отладке гема и изменении его javascript. Конечно, эти изменения в гем-файле будут уничтожены при развертывании, но приятно иметь возможность взломать код во время отладки. - person Richard Logwood; 14.03.2021

arrow_upward
-4
arrow_downward

Я думаю, что расположение файла может создать проблему для вашего случая: файл должен находиться в app/assets/javascripts/application.js, а ваш файл - в app/javascript/packs/application.js

Надеюсь, что это поможет вам.

person Amol Mohite    schedule 10.09.2019