Как требовать пользовательские файлы JS в Rails 6 - PullRequest
3 голосов
/ 21 мая 2019

Я сейчас пробую 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?

Ответы [ 2 ]

7 голосов
/ 22 мая 2019

Вам нужно выполнить следующие шаги, чтобы добавить пользовательский файл 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

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

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

5 голосов
/ 10 июня 2019

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

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

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

Надеюсь, это полезно:)

...