Rails 6 和 Google Maps for Rails

Question

我正在使用Rails 6.0.0.rc1，并希望实现Google-Maps-for-Rails gem。我通过Yarn安装了Underscore，并在我的标签中添加了所需的Google脚本和我的API。

我下载了gmaps_google.js并将其添加到我的vendor/js文件夹中，因为Rails 6没有资源管道，而是使用webpacker。这就是我认为问题所在的地方，因为我收到以下错误：

ReferenceError: Can't find variable: Gmaps

我更新了webpacker.yml文件，让它查找vendor/js文件夹，检查DOM后似乎已经存在。

webpacker.yml

# Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['vendor/js']

在我的javascript/packs/application.js中，我包含了require("gmaps_google")这一行。注意，我在使用Highcharts时也遇到了相同的问题，但是通过添加window.Highcharts = Highcharts;成功地加载了脚本，但我不确定是否可以通过require选项执行相同的操作？

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')
require("trix")
require("@rails/actiontext")

window.Highcharts = Highcharts;
import Highcharts from 'highcharts';
import addMore from "highcharts/highcharts-more";
import 'bootstrap'
import 'underscore'

require("gmaps_google")

package.json

{
  "name": "app_name",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/actiontext": "^6.0.0-rc1",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
    "bootstrap": "^4.3.1",
    "highcharts": "^7.1.2",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "trix": "^1.0.0",
    "turbolinks": "^5.2.0",
    "underscore": "^1.9.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.7.1"
  }

- DollarChills

---

https://stackoverflow.com/questions/44704324/gmaps-is-not-defined - Deepak Mahakale

@DeepakMahakale的链接非常有帮助。我需要添加使用CDN链接。 - DollarChills

@DollarChills 你是如何/在哪里添加CDN链接的？你需要将 require("gmaps_google") 重命名为其他名称吗？ - s89_

在头部标签中添加CDN链接。 - DollarChills

Answer 1

这是因为在 gmaps_google.js 中没有 export 语句，所以在此之前你需要将匿名函数转换为命名函数。

例如：

// foo.js
// function need to be converted
(function() {
  // function body
}).call(this);

将匿名函数转换为具名函数

// foo.js
function foo() {
  // function body
};

export { foo as Foo };

在另一个文件中调用import语句。

// bar.js
import Foo from 'foo';

Foo();

- Cong Chen