Rails Webpacker - Как получить доступ к объектам, определенным в файле ввода веб-пакета, из представлений [HTML-файл]

Question

У меня есть приложение Rails 6 и я использую Webpacker для ресурсов.

У меня есть следующий код в файле app/javascript/packs/application.js:

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

И у меня есть следующий скрипт в одном изФайл моего представления (HTML):

<script>
 $(document).ready(function(){
   Greeter.hello();
 });
</script>

Примечание. Я использую JQuery, и он работает нормально.

Я получаю следующую ошибку:

Uncaught ReferenceError: Greeter не определен.

Как мы можем использовать libraryTarget и library для предоставления связанных модулей, чтобы он могдоступ также из HTML-файлов?

Или есть ли другой способ сделать это с помощью Rails Webpacker?

Любая помощь будет высоко ценится!

Answer 1

Я мог бы решить проблему, выставив объект Greeter на window следующим образом:

export var Greeter = {
    hello: function() {
        console.log('hello');
    }
}

window.Greeter = Greeter;

Однако я все еще ищу способ Webpack для этого.

Answer 2

Чтобы сделать это без непосредственного изменения объекта window в коде приложения, вам нужно экспортировать Greeter в виде именованного экспорта из вашего пакета application.js и расширить конфигурацию Webpack output, чтобы назначить библиотекуимя и цель var (или window также будет работать).

// config/webpack/environment.js

environment.config.merge({
  output: {
    library: ['Packs', '[name]'], // exports to "Packs.application" from application pack
    libraryTarget: 'var',
  }
})

// app/javascript/packs/application.js

export {
  Greeter
}

<script>
 $(document).ready(function(){
   Packs.application.Greeter.hello();
 });
</script>

Имя library является произвольным. Использование заполнителя [name] необязательно, но позволяет экспортировать в отдельные модули, если вы используете несколько «пакетов».

Answer 3

в app / javascript / packs / application.js:

import Greeter from '../greeter.js'
Greeter.hello()

и в app / javascript / greeter.js:

export default {
  hello : function(){
    console.log('hello')
  }
}