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

У меня есть приложение 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?

Любая помощь приветствуется!


ruby-on-rails webpack webpacker
person dp7    schedule 10.10.2019    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Чтобы сделать это без прямого изменения объекта 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] необязательно, но позволяет экспортировать в отдельные модули, если вы используете несколько «пакетов».

person rossta    schedule 07.11.2019

arrow_upward
0
arrow_downward

в app / javascript / packs / application.js:

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

и в app / javascript / greeter.js:

export default {
  hello : function(){
    console.log('hello')
  }
}
person Les Nightingill    schedule 10.10.2019
comment
Спасибо за ответ. На самом деле я хочу вызвать Greeter.hello() с одной из HTML-страниц, а не из JS-файла. - person dp7; 11.10.2019

arrow_upward
0
arrow_downward

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

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

window.Greeter = Greeter;

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

person dp7    schedule 11.10.2019

arrow_upward
0
arrow_downward

Поскольку я не могу комментировать ответ rossta, вот что мне пришлось сделать. Моя конфигурация по умолчанию была:

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

module.exports = environment

и мне просто нужно было добавить в него дополнительную конфигурацию:

// config/webpack/environment.js
    
const { environment } = require('@rails/webpacker')

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

module.exports = environment

После этого, как указано в rossta, к каждому символу, который экспортируется в app/javascript/packs/application.js, можно будет получить доступ из DOM как Packs.application.<symbol>.

person jfs    schedule 21.01.2021