Как сделать функции javascript доступными для страниц в проекте Rails 6 с помощью веб-упаковщика? - PullRequest
Новая
       82

Как сделать функции javascript доступными для страниц в проекте Rails 6 с помощью веб-упаковщика?

0 голосов
/ 02 октября 2019

В проекте Rails я пытаюсь перейти от использования старого конвейера ресурсов Sprockets к использованию webpacker. Я настроил эти тестовые файлы:

app / javascript / lib / foo.js 

function foo() {
  console.log('foo')
}
console.log('bar')

app / javascript / packs / application.js

// some standard Rails JS requires
// ...
require('lib/foo')

app / views / test / index.html 

<script>
  foo()
</script>

И в моих layouts / application.html.erb У меня есть 

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

Когда я захожу на эту страницу в своем браузере, я вижу "bar", зарегистрированный в моей консоли, после чего

"ReferenceError: foo не определено"

Я пробовал несколько разных подходов к настройке моих файлов, например, используя импорт вместо require или настройку module.exports = foo или export default foo в моем js-файле, но мне не повезло обойти вышеизложенноесообщение об ошибке.

Короче говоря, как я могу переместить файлы javascript из звездочек в веб-упаковщик? И, если возможно, как мне это сделать, не меняя существующий код JavaScript?

1 Ответ

0 голосов
/ 13 ноября 2019

Вы хотите экспортировать функции и модули в виде именованного экспорта из вашего пакета 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
import foo from '../lib/foo'

export {
  foo
}

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

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

...