在Bootstrap gem中使用Rails

时间:2018-06-29 15:44:34

标签: ruby-on-rails twitter-bootstrap bootstrap-4 ruby-on-rails-5

我有一个新的Rails项目,我只生成了一个控制器。我已经按照说明根据bootstrap gem安装了bootstrap,但是不断出现以下错误:

ActionView::Template::Error (identifier '(function(opts, pluginOpts) {return eva
l(process' undefined):
     5:     <%= csrf_meta_tags %>
     6:     <%= csp_meta_tag %>
     7:
     8:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbol
inks-track': 'reload' %>
     9:     <%= javascript_include_tag 'application', 'data-turbolinks-track': '
reload' %>
    10:   </head>
    11:

(execjs):1
app/views/layouts/application.html.erb:8:in `_app_views_layouts_application_html
_erb__511219785_80461480'

我已经按照此网页上的所有说明进行操作:https://github.com/twbs/bootstrap-rubygem

我的代码:

# Gemfile
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

# app/assets/javascripts/application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

# app/assets/stylesheets/application.scss
@import "bootstrap";

注意,我也确实从application.scss中删除了* = require和* = require_tree,并且确保了它是一个scss文件而不是一个css文件。

1 个答案:

答案 0 :(得分:2)

这似乎是Windows上ExecJS和duktape的当前问题。

有关更多信息,请参见以下链接:https://github.com/twbs/bootstrap-rubygem/issues/157

简而言之,要解决此问题,您只需从Gemfile中删除/注释duktape。如果要使用Node.js作为JS运行时,请记住实际安装它(Node.js)。

如果仍有问题,请从application.scss中删除所有//= require指令,并将其保留在application.js中。

application.js

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
//= require jquery3
//= require popper
//= require bootstrap-sprockets

application.scss

@import "bootstrap";

Gemfile

删除gem 'duktape'

gem 'autoprefixer-rails'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'

关于此问题的评论:

  

duktape早已成为Windows中Windows中默认的JS运行时   rails / rails#30014。

     

如果您调查涉及Exejs的其他类似问题,可能会发现   知道duktape实际上是罪魁祸首(但是这里的execjs   duktape上下文的定义)。如果您更改运行时环境   使用Nodejs,该错误将得到解决,例如   @ yasunari89

     

config/boot.rb中,ENV ['EXECJS_RUNTIME'] ='节点'

     

您可以在#152,#153和#155中找到更多信息。但是,以上问题   正则表达式无效的问题已通过新版本的duktape进行了修复,以获取更多信息   信息访问judofyr / duktape.rb#41解决了   无效的正则表达式问题,开始导致您遇到的问题   现在。发生此问题是因为(如execjs中所定义)duktape   不支持复杂的上下文和完整的JS作为标识符。

     

不过,正在审查可能会解决此问题的PR,   感谢@judofyr

您还应该确保正确设置application.html.erb。这是一个示例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>title</title>

        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>

    <body>
        <div class="container">
            <%= yield %>
        </div>
  </body>
</html>

ExecJS支持多个运行时,而不仅仅是duktape和NodeJS。 https://github.com/rails/execjs

ExecJS supports these runtimes:

therubyracer - Google V8 embedded within Ruby
therubyrhino - Mozilla Rhino embedded within JRuby
Duktape.rb - Duktape JavaScript interpreter
Node.js
Apple JavaScriptCore - Included with Mac OS X
Microsoft Windows Script Host (JScript)
Google V8
mini_racer - Google V8 embedded within Ruby