Я играю с rails 5.1, и у меня возникли проблемы с использованием настраиваемого класса из webpacker в js-файле конвейера ресурсов.
Я думал, что если бы у меня был какой-то служебный класс js, который я хотел бы использовать везде, я бы добавил его в пакеты, а затем смог бы использовать его во всем на стороне веб-упаковщика, а также во всем на стороне конвейера.
// app/javascript/packs/stuff.js
class Stuff {
constructor() {
console.log("*** building stuff! **")
}
}
export default Stuff
Если я хочу использовать это на стороне веб-упаковщика, я могу просто добавить это в
packs/application.js
import Stuff from "./stuff"
let s = new Stuff()
Здесь нет проблем, но затем я пытаюсь использовать этот класс на стороне конвейера и получаю
Uncaught ReferenceError: Stuff is not defined
Я использую это так:
// assets/javascripts/users.js
new Stuff();
Я добавил в свой файл макета:
= javascript_pack_tag 'stuff'
И еще попробовал добавить в pipelines application.js
//= require stuff
//= require_tree .
stuff.js был правильно скомпилирован в public / packs / stuff.js и находится в manifest.json
{
"application.js": "http://0.0.0.0:8080/packs/application.js",
"hello_react.js": "http://0.0.0.0:8080/packs/hello_react.js",
"stuff.js": "http://0.0.0.0:8080/packs/stuff.js"
}
Я также добавил это в инициализатор Assests.rb:
Rails.application.config.assets.paths << Rails.root.join('public/packs')
Я уверен, что мне не хватает чего-то маленького, и я слишком долго смотрел на это, чтобы увидеть это.
----- ОБНОВЛЕНИЕ -----
В исходном посте есть небольшой шум, так как я мучился, пытаясь заставить материал работать. В конце концов, вам просто нужна подсказка, предоставленная принятым ответом.
В app / javascript / packs / application.js добавьте:
import Stuff from "./stuff"
window.Stuff = Stuff
И убедитесь, что в вашем макете есть:
= javascript_pack_tag 'application'
Мне не нужно было // = требовать что-то в конвейере application.js. Мне также не нужно было добавлять публичный каталог в инициализатор assets.rb.
Чтобы использовать в конвейерном js-файле, таком как users.js, просто убедитесь, что вы используете его после того, как все будет загружено следующим образом:
$( document ).on('turbolinks:load', function() {
new Stuff();
})
Или, если вы хотите встроить его в свой index.slim или что-то, что вы можете просто сделать:
javascript:
new Stuff();
После правильной настройки вы захотите перезапустить сервер webpack:
./bin/webpack-dev-server
Теперь, если вы внесете изменения в stuff.js, они должны быть скомпилированы и доступны сразу же, как и следовало ожидать.
Мой последний класс материала выглядит так:
export default class Stuff {
constructor() {
console.log("*** building stuff! **")
}
more() {
console.log("--- more stuff ---")
}
}
