Rails 4 - 如何在供应商文件中引用 javascript 源

Question

我刚刚发现我需要通过直接在我的应用程序中插入 javascript 文件来修改我的 GMaps for Rails 设置。 Rails 4 - Gmaps4Rails - map won't render

我已经克隆了 infobox 和 markerclusterer repos，现在我一直在尝试在我的应用程序中引用相关文件。

我的供应商文件中有克隆附带的文件文件夹。

我了解我需要使用的 javascript 文件是：infobox.js 和 markerclusterer.js

这些文件位于：

 vendor/js-marker-clusterer/src/makerclusterer.js
vendor/v3-utility-library/src/infobox.js

我想用它们代替这个视图中的代码：

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

我需要引用 app/application.js 中的 javascript 文件吗？如果是这样，我需要从路径中的哪个位置开始（假设这些文件不在 vendor/assets/javascripts 文件夹中）？

另外，我知道我需要以某种方式合并markerclusterer 图像。这些也来自克隆的 repo 并存储在 vendor/js-markerclusterer/images 文件夹中。如何引用这些以便它们在视图中工作？

Answer 1

最合乎逻辑的做法是将文件夹js-marker-clusterer 和v3-utility-library 放在vendor/assets/javascripts 下，这样你就可以在application.js 中引用你需要的文件了

//= js-marker-clusterer/src/makerclusterer
//= v3-utility-library/src/infobox

但是，如果由于某种原因您不能这样做，您可以将自定义路径添加到 config.assets.paths，以便自动加载器可以找到它们

// application.rb
config.assets.paths << Rails.root.join("vendor", "js-marker-clusterer")
config.assets.paths << Rails.root.join("vendor", "v3-utility-library")

然后像引用它们一样

//= src/makerclusterer
//= src/infobox

Answer 2

使用 cdn 或在您的情况下使用 googlecode 服务器总是好的，因为文件将从其服务器加载得更快。所以是的，这样做不会造成任何伤害。

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

假设您想通过清单文件（即application.js）加载它们，您可以将markerclusterer.js 和infobox.js 复制到您的app/assets/javascripts 文件夹中，并将它们包含在application.js 中，就像这样

//application.js file's content
//= markercluster
//= infobox

现在因为这两个文件需要在你的 google maps api 文件之后加载，你应该在调用 maps api 之后添加 application.js。这可确保首先加载 Google Maps API 并且 google.maps 对象可供您使用。

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

此外，您可以将所有图像放在app/assets/images 内的文件夹中，并像访问其他图像一样访问它们。