Как лучше всего управлять JavaScript с Ruby на Rails 6? - PullRequest
Новая
       28

Как лучше всего управлять JavaScript с Ruby на Rails 6?

1 голос
/ 28 апреля 2020

Я пробую RoR 6 (я из MEAN, и я не трогал RoR из версии 3), и я нахожу некоторые проблемы, чтобы найти лучший способ управления кодом JavaScript. Возможно из-за моего прошлого.

Я много читал о топи c (включая официальные руководства https://guides.rubyonrails.org/working_with_javascript_in_rails.html), но официальная документация устарела.

Согласно документации, когда вы генерируете контроллер из cli, он должен создать файл. js для этого контроллера, но этого не происходит. Кроме того, прямо сейчас Webpack был добавлен в RoR 6 и JavaScript больше не управляется Asset Pipeline (я прав?), Но здесь нет никаких ссылок на этот вопрос.

Я хочу найти способ напишите код JS для каждого представления и сохраните этот код изолированным от остальных.

  • Куда мне поместить весь код JS?
  • Как получить изоляцию для JS код каждого представления?
  • Я добавил jQuery в проект из-за Bootstrap (с помощью Yarn) и для Webpack таким образом, но $ или jQuery не определено: 
const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

Буду признателен за помощь.

Спасибо!

РЕШЕНИЕ:

Я нашел то, что я был ищу -> https://stimulusjs.org

Stimulus js, созданный Basecamp, добавляет слой JS к каждому представлению HTML и позволяет нам сохранять порядок и ясность, когда написание JS кода. Он связывает файл JS с DOM и ничего более. Достаточно добавить JS для улучшения функциональности.

Он отлично сочетается с Turbolinks и готов к использованию с Webpack. Кроме того, это можно узнать за 10 минут (не более). Установка также нелепо проста.

В любом случае, если вам нужны знания о RoR и Webpack / Webpacker, вы можете посетить следующие ссылки:

И, наконец, если вы не хотите используйте JS фреймворк, такой как Stimulus, для управления JS кодом в RoR, вы всегда можете попробовать эти гемы для указания c page JS:

1 Ответ

1 голос
/ 29 апреля 2020

Изменение в Webpack является очень новым, и документация не совсем догнала.

Генерация файлов активов при запуске генератора выполнялась только со старым конвейером активов и даже тогда была не очень хорошей идеей. Он опирался на специальную директиву Sprockets require_tree, которая отбрасывает все файлы в каталоге и добавляет их в манифест. В алфавитном порядке, так что вы не имели никакого контроля над порядком исполнения.

Это также обмануло начинающих думать, что js, которые они вставили в users.js, выполнялись только в их контроллере пользователя, когда на самом деле все это просто было скоплено в один манифест.

С помощью Webpack вы явно импортируете ресурсы.

Куда мне поместить весь код JS?

Рекомендуется поместить фактические логи приложения c в соответствующую структуру в пределах app/javascript.

Как получить изоляцию для кода JS каждого представления?

Хотя вы можете использовать javascript_pack_tag в самом представлении, чтобы требовать указания c файлов, это не действительно хорошая идиома, поскольку она создает ненужные HTTP-запросы и логи c, за которыми трудно следовать.

Если вы хотите, чтобы код выполнялся при загрузке определенного представления, вы можете добавить атрибуты данных в тег body и создайте специальные события: 

# app/layouts/application.html.erb
<body data-action="<%= action_name >" data-controller="<%= controller_name %>">

// fired when turbolinks changes pages.
$(document).on('turbolinks:load', ()=>{
  let data = $(body).data();
  // replace myns with whatever you want
  $(this).trigger(`myns:${data.controller}`, data)
         .trigger(`myns:${data.controller}#${data.action}`, data)
         .trigger(`myns:#${data.action}`, data)
});

Затем вы можете обернуть функциональность, которая должна происходить при загрузке специальной страницы, прослушивая ваши пользовательские события. 

$(document).on('myns:users#show', ()=>{
  console.log("We are on users#show");
});
...