Rails 5/6: Как включить функции JS в веб-упаковщик? - PullRequest
Новая
       38

Rails 5/6: Как включить функции JS в веб-упаковщик?

0 голосов
/ 03 февраля 2019

Я пытаюсь обновить приложение Rails 3 до Rails 6, и у меня возникают проблемы с теперь используемым по умолчанию веб-упаковщиком, поскольку мои функции Javascript недоступны.

Я получаю: ReferenceError: Can't find variable: functionName для всех триггеров функций js.

То, что я сделал:

  • создайте каталог app_directory в / app / javascript
  • скопировал мой файл javascript разработки в app_directory и переименовал его в index.js
  • добавлено console.log('Hello World from Webpacker'); в index.js
  • добавлено import "app_directory"; в /app/javascript/packs/application.js

  • добавлено в / config / initializers /content_security_policy.rb: 

    Rails.application.config.content_security_policy do |policy|
  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
end

Я получаю «Hello World from Webpacker», зарегистрированный на консоли, но при попытке получить доступ к простой функции JS через <div id="x" onclick="functionX()"></div> в браузере я получаюошибка ссылки.

Я понимаю, что конвейер ресурсов был заменен веб-упаковщиком, который должен отлично подходить для включения модулей, но как мне включить простые функции JS?Чего мне не хватает?

Заранее спасибо?

Ответы [ 3 ]

0 голосов
/ 07 марта 2019

Рассмотрим, как веб-упаковщик "упаковывает" js-файлы и функции: 

/***/ "./app/javascript/dashboard/project.js":
/*! no static exports found */
/***/ (function(module, exports) {

  function myFunction() {...}

Таким образом, веб-упаковщик сохраняет эти функции в другой функции, делая их недоступными.Не уверен, почему это так, или как обойти это правильно.

Хотя есть и обходной путь.Вы можете:

1) изменить сигнатуры функций с: 

function myFunction() { ... }

на: 

window.myFunction = function() { ... }

2) сохранить сигнатуры функций как есть, но вы все равнонужно добавить ссылку на них, как показано здесь : window.myFunction = myFunction

Это сделает ваши функции глобально доступными из объекта "window".

0 голосов
/ 11 июня 2019

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

https://www.calleerlandsson.com/replacing-sprockets-with-webpacker-for-javascript-in-rails-5-2/

Это руководство по переходу с ресурсаКонвейер в веб-упаковщик в Rails 5.2, и он дает вам представление о том, как обстоят дела в Rails 6 теперь, когда веб-упаковщик используется по умолчанию для javascript.В частности:

Теперь пришло время переместить весь код JavaScript вашего приложения из app / assets / javascripts / в app / javascript /.

Чтобы включить их в пакет JavaScript,убедитесь, что они требуются в app / javascript / pack / application.js: 

require('your_js_file')

Итак, создайте файл в app/javascript/hello.js следующим образом: 

console.log("Hello from hello.js");

Тогда, в app/javascript/packs/application.js, добавьте эту строку: 

require("hello")

(обратите внимание, что расширение не требуется)

Теперь вы можете загрузить страницу с открытой консолью браузера и увидеть"Привет!"сообщение в консоли.Просто добавьте все, что вам нужно, в каталог app/javascript или, что еще лучше, создайте подкаталоги, чтобы сохранить ваш код организованным.

0 голосов
/ 03 февраля 2019

Из официального руководства по приложению rails:

Где вставить свой JavaScript

Используете ли вы конвейер ресурсов Rails или добавляете тег непосредственно к представлению, вы должны сделатьвыбор места размещения любого локального файла JavaScript.

У нас есть выбор из трех мест для локального файла JavaScript:

Папка app / assets / javascripts, lib / assets / javascriptsпапка и папка vendor / assets / javascripts

Вот рекомендации по выбору местоположения для ваших сценариев:

Используйте app / assets / javascripts для JavaScript, который вы создаете для своего приложения.

Используйте lib / assets / javascripts для сценариев, которые используются многими приложениями (но, если возможно, используйте гем).

Используйте vendor / assets / javascripts для копий плагинов jQuery и т. Д. Других разработчиков,В простейшем случае, когда все ваши файлы JavaScript находятся в папке app / assets / javascripts, вам больше ничего не нужно делать.

Добавьте файлы JavaScript где-либо еще, и вам нужно будет понять, как изменить манифестфайл.

Подробнее: http://railsapps.github.io/rails-javascript-include-external.html

...