Question

我试图在Rails 4应用程序中设置Bower，特别是我正在尝试安装语音元素 Web组件：http://zenorocha.github.io/voice-elements/

我考虑过使用bower-rails但是更愿意尽量保留它，但我有点迷失。到目前为止，我已按照以下步骤操作：

在rails root

中创建 .bowerrc

{
  "directory": "vendor/assets/bower_components"
}

添加到 application.rb

config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

从rails root

bower init

来自供应商/资产

bower install --save voice-elements

vendor tree

导轨中的示例代码显示视图

<voice-player id="mi-elemento" accent="es-ES" text="Me gusta la gasolina"></voice-player>
<script>
var form = document.querySelector('#mi-form'),
    element = document.querySelector('#mi-elemento');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    element.speak();
});
</script>

我不知道从哪里开始。如何告诉Rails如何在供应商/资产中使用语音元素库？

Answer 1

作为替代方案：您会考虑使用rails-assets.org吗？无需安装凉亭，您只需将凉亭包安装为常规宝石即可。

在您的情况下，您会在Gemfile：

的顶部添加以下行

source 'https://rubygems.org'
source 'https://rails-assets.org'

然后为你的包添加一行，gems是calles rails-assets-<package-name>，所以在你的情况下会是

gem 'rails-assets-voice-elements'

Answer 2

您可以使用gem将Bower与Rails：bower-rails进行整合。试试这种方式。

Answer 3

您是否按照语音元素的“使用”说明进行操作？看起来你需要包含一些bower创建的javascript（你应该能够在application.js中要求），然后在你的布局中添加一些<link>标签，指向两个HTML文件。

尝试将此添加到application.js：

//= require platform/platform

然后将这些行添加到布局中的<head>部分：

<link rel="import" href="<%= asset_path 'voice-elements/dist/voice-player.html' %>">
<link rel="import" href="<%= asset_path 'voice-elements/dist/voice-recognition.html' %>">

安装凉亭和铁轨

3 个答案: