Как импортировать javascript модули в рельсы 5 с гемом webpacker - PullRequest
0 голосов
/ 03 февраля 2020

Добрый день всем,

Я довольно новичок в Vue. js и я экспериментирую с Vue. js в рельсах 5, используя гем webpacker. В новом приложении rails 5 я включил gem webpacker в файл Gem и установил webpacker, а затем vue. js вроде так

 rails webpacker:install
 rails webpacker:install:vue

Оба компонента установлены, и когда я запускаю серверы, все в порядке и на дисплее отображается «Hello Vue» et c. К вашему сведению, я также использую гем "foreman" для запуска как сервера rails, так и сервера webpack-dev

Теперь я пытаюсь включить "GoogleMapsApi. js" в этот проект, но мне очень трудно импортировать Это модуль javascript, который установлен на Github и в основном загружает Google Maps Api. Я скачал и скопировал его в следующий каталог

{Rails.root}/app/javascript/packs

https://gist.github.com/mavame/b833b50085dc856acbccbb34ab1dbe92

Так выглядит мое "приложение. vue". PS Этот файл был создан, когда я установил vue с помощью команды установки webpack

   <template>
     <div id="app">
       <div id="map_canvas"></div>
     </div>
  </template>

<script>   
    export default {
      el: '#app',
      data: function () {
        return {
          message: "Helloooooo Vue!"
        }
      },
      mounted(){

        const gmapApi = new GoogleMapsApi();
          gmapApi.load().then(() => {

        var myOptions = {
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(-26.29217,28.070820000000026)
        }
        this.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        });
      }
    }
</script>

Теперь я включаю этот модуль в приложение. js вот так

     import 'GoogleMapsApi';

Так что когда я запустите foreman, я получаю эту ошибку.

    ERROR in ./app/javascript/packs/application.js
    Module not found: Error: Can't resolve 'GoogleMapsApi' in '/home/diego/Sites/vue-demo/app/javascript/packs'

Реальное приложение, на котором я работаю, извлекает и vue, и карты Google, используя теги сценария cdn, но я обнаружил, что они ненадежны, потому что иногда загружаются карты Google иногда это не так.

Итак, я пробую веб-упаковщик, но если даже не в состоянии сделать это внутри нового приложения, представьте существующее.

Пожалуйста, помогите Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...