带有Rails 6/Webpack的Gmaps [英] Gmaps with Rails 6/Webpack

问题描述

我正在尝试使以前与早期版本的Rails一起使用的Google Maps设置使用Rails 6进行显示.显然，Rails 6现在正在使用webpack处理javascript资产，但是我无法让我的应用程序识别Gmaps用于渲染地图的函数.

I'm trying to get my Google Maps setup that previously worked with earlier versions of Rails to display using Rails 6. Obviously Rails 6 is now using webpack to handle javascript assets and I can't get my app to recognie the Gmaps function used to render the map.

一些基本知识:

宝石文件

gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
# maybe don't need ^ this underscore gem anymore

我用yarn add underscore安装了下划线，还添加了当前位于vendor/javascripts文件夹下的google maps脚本gmaps_google.js，该文件夹已添加到webpacker.yml中的我解析的路径中，其中app/javascript/packs/application.js文件看起来像:

I installed underscore with yarn add underscore and also added the google maps script gmaps_google.js currently under vendor/javascripts folder which has been added to my resolved paths in webpacker.yml `app/javascript/packs/application.js file looks like:

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("gmaps_google")

import "bootstrap";
import 'underscore'
import "../stylesheets/application";

window.jQuery = $;
window.$ = $;

这是我的实际show.html.erb视图和尝试加载的地图

Here is my actual show.html.erb view and attempted load of the map

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script>
  const handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers([
      {
        "lat": <%= @user.latitude %>,
        "lng": <%= @user.longitude %>,
        "infowindow": "<%= @user.full_name %>'s location"
      }
    ]);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
    handler.getMap().setZoom(17);
  });
</script>

但是我仍然没有在页面上加载任何地图，但显示错误 Uncaught ReferenceError: Gmaps is not defined

Yet I still get no map loading on the page an error that says Uncaught ReferenceError: Gmaps is not defined

它确实加载，并且当我从HTML头中的外部CDN源加载gmaps脚本时，错误消失了，因为此问题表明:

It does load, and the error goes away when I load the gmaps script from an external CDN source in my HTML head, as this question suggests: Gmaps is not defined

显然，这只是该google_maps.js脚本的加载/可用性.该文件太大，无法在此处显示，但此处是有效CDN版本的链接:cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js

So it is clearly just the loading/availability of that google_maps.js script. It's too massive of a file to show here, but here is the link to the working CDN version: cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js

将其复制粘贴到我的google_maps.js文件中并没有帮助.而且我正在尝试弄清楚如何使它与我的Rails应用程序中的Google Maps脚本一起使用，并且webpack Rails 6世界对我来说仍然很新.任何建议将不胜感激.

Copy-pasting that into my google_maps.js file doesn't help though. And I'm trying to figure out how I can get it to work with the Google Maps script residing within my Rails application and the webpack Rails 6 world is still very new to me. Any suggestions would be greatly appreciated.

推荐答案

快捷方法只是从CDN而不是Webpack加载gmaps4rails代码(和下划线).由于您只是使用<script>标记来构建地图，因此Webpack并没有帮助您.

The quick-and-dirty way is just load the gmaps4rails code (and underscore) from CDN instead of Webpack. Since you're just using a <script> tag to build the map, Webpack is not helping you there.

如果您仍然想尝试使用Webpack，请继续阅读.

If you'd like to try using Webpack anyways, read on.

了解Webpack会将自己与全局范围隔离开来；与Sprockets不同，您在Webpack中导入的对象或值在<script>标记或浏览器控制台中将不可用.如果需要这种行为，则必须手动进行配置.

Understand that Webpack isolates itself from the global scope; unlike Sprockets, objects or values you import in Webpack will not be available in <script> tags or the browser console. If you want this behavior, you have to configure it by hand.

看gmaps4rails脚本，它似乎不支持模块，并假定它是在全局范围(有下划线可用)中进行评估的.换句话说，它不是模块友好的.但是我们可以使其发挥出色.

Looking at the gmaps4rails script, it appears not to be module-aware and assumes it's evaluated in the global scope (where underscore is available). In other words, it's not module-friendly. But we can make it play nice.

我们需要告诉Webpack将gmaps4rails脚本中的this视为window(即全局范围)，并提供"下划线(或如下所示的几乎可互换的破折号)，因为它假定了_ lib在其范围内可用.

We need to tell Webpack to treat this in the gmaps4rails script as window, i.e., the global scope, and to "provide" underscore (or nearly interchangeable lodash, as below) since it assumes the _ lib is available in its scope.

在您的外壳中:

$ yarn add imports-loader lodash

在config/webpack/environment.js中:

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

environment.loaders.append('gmap4rails', {
  test: /gmaps_google/,
  use: [
    {
      loader: 'imports-loader',
      options: 'this=>window',
    },
  ],
})

environment.plugins.append(
  'lodash',
  new webpack.ProvidePlugin({
    _: 'lodash',
  })
)

module.exports = environment

假设您已按照 gmaps4rails自述文件正确设置了Google脚本，这应该可以解决问题.

Assuming you have set up your google scripts correctly per the gmaps4rails README, this should do the trick.

我已经在example/gmap4rails分支中创建了一个带有工作示例的演示应用程序(带有您自己的Google Maps API密钥):

I've created a demo app with a working example in the example/gmap4rails branch (bring your own Google Maps API key): https://github.com/rossta/rails6-webpacker-demo/tree/example/gmaps4rails

这篇关于带有Rails 6/Webpack的Gmaps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！