Как требовать пользовательские файлы JS в Rails 6

В настоящее время я пытаюсь Rails 6.0.0.rc1, который, кажется, переехал по умолчанию javascript папка из app/assets/javascript в app/javascript, application.js файл сейчас находится в app/javascript/packs, Теперь я хочу добавить пару файлов js, но по какой-то причине они не импортируются, и я не могу найти документацию о том, как это можно сделать в Rails 6. Я попробовал пару вещей:

  1. Создать новую папку custom_js под app/javascript/packs, поместив все мои файлы JS тут же добавить require "custom_js" в application.js,

  2. Скопируйте все мои файлы JS в app/javascript/channels (который должен быть включен по умолчанию, так как application.js имеет require("channels")).

  3. Добавление require_tree . в application.js, который был предыдущий подход.

Как я могу загрузить свои собственные файлы js в приложение Rails 6?

Источник

1 ответ

Решение

Вам нужно сделать следующие шаги, чтобы добавить пользовательский файл javascript в rails 6 (webpacker)

1. Создайте свой пользовательский файл с именем custom.js в app/javascript/packs каталог.

Для тестирования напишите любой console.log в этом.

// app/javascript/packs/custom.js

console.log("custom js file loaded")

2 Перейти к вашей application.html.erb и добавьте следующую строку в конце вашего <head></head>

<%= javascript_pack_tag 'custom', 'data-turbolinks-track': 'reload' %>

3 Теперь выполните rake assets:precompileЭто упакует ваш код JavaScript (включая наш пользовательский файл, который мы только что добавили)

Теперь перезагрузите страницу, и вы должны увидеть сообщение

custom js file loaded

в консоли браузера

Надеюсь, поможет:)

Источник

Получите более организованный код и избегайте нескольких тегов javascript_pack_tags в файле application.html.erb с помощью этого подхода:

  1. Добавьте свой заказ example.js javascript в app/javascript/packs.
  2. добавлять require("packs/example") на ваш application.js файл.

Я хотел бы добавить комментарий к правильному ответу Асима Хашми. Но у меня недостаточно репутации, поэтому я добавлю свое предложение в качестве ответа.

Нет необходимости включать расширение ".js" внутри файла require.

Источник

В моем пользовательском js есть функции, которые будут вызываться встроенным javascript серверами html-страниц. В Rails6 работает следующий фрагмент, скомпилированный webpacker:

  1. поместите пользовательский файл js в папку app / javascript / packs, например app / javascript / packs / my_functions.js

         say_hello = function(a_text){ 
    console.log("HELLO "+ a_text);  
}

  1. добавьте javascript_pack_tag в html файл, например index.html.erb.

         <%= javascript_pack_tag 'my_functions' %>
<!-- html here -->

<script>
$(document).ready(function(){
    say_hello('ABer')
});
</script>

Примечание: эта строка находится внутри тела HTML, а не в голове

         <script src="/packs/js/my_functions-1db66368ebbd2fe31abd.js"></script>

Источник

Я знаю, что на этот вопрос уже дан ответ. Но я тоже хочу внести свой ответ. В rails 6 по умолчанию он использовал webpack для компиляции js и css.

Используя Require () или import, вы можете легко включить js в приложение.

  1. создайте свой собственный файл js в app / javascripts / packs. Пример: app / javascripts / packs / custom.js.
  2. В вашем application.js (по умолчанию он находится в папке packs) импортируйте пользовательский файл js. EX: импорт './custom.js'
  3. Используйте этот тег <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'%> в своем application.html.erb.
  4. rake assets: прекомпилировать

Теперь обновите страницу, конечно же, работает.

Для дальнейших сомнений обратитесь к моему блогу. Будет полезно Rails 6 - Webpacker

Источник
Другие вопросы по тегам