如何使用 Rubymine 将 JavaScript 导入 RoR 项目？

Question

我在 Rubymine 的 RoR 项目中使用 JQuery 时遇到问题。我是 Ruby on Rails 的新手，希望在我的项目中使用 bootstrap-sass。 我按照here 的说明进行操作，这是 Github 引导存储库。我正在使用 rails6.0.0。

我的 application.html.erb 中有以下 sn-p：

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <%= link_to 'SaaS', root_path, class: 'navbar-brand' %>
    </div>

    <div class="collapse navbar-collapse" id="main-nav-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Login", '#' %></li>
      </ul>
    </div> <!--      /.navbar-collapse-->
  </div>
</nav>

当宽度下降到大约 600 像素以下时会生成一个导航栏按钮，但是，当我单击它时，它不会给我折叠列表。所以我假设问题出在 JQuery 支持上。

这些是我为 JQuery 支持导入的 gem。

gem 'jquery-rails'
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'

我的 application.scss 中的导入：

@import "bootstrap-sprockets";
@import "bootstrap";

我的 application.js 的 require 语句：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
//= require jquery
//= require bootstrap-sprockets

我已经多次重新启动服务器并运行bundle install。在运行服务器或单击按钮时，我也没有收到任何错误。

编辑： 在 application.js 添加 require 语句时，here 声明的目录与我的 application.js 目录不同。

指令app/assets/javascripts/application.js中的目录。 我的目录app/javascript/packs/application.js。 我创建了说明中要求的目录并将 require 语句放在那里。

Answer 1

除了将jquery-rails 和bootstrap-sass gems 添加到Gemfile 并将导入添加到application.scss 文件之外，您还需要在application.js 文件中包含jquery 和bootstrap 的javascript。如果您清楚地完成这些步骤，docs 中也会提到这些步骤。

应用程序.js

//= require jquery
//= require bootstrap-sprockets

如果您使用的是 sass，请确保删除在新 rails 项目中生成的默认 application.css 文件。

Answer 2

好的，所以在 Rails 6 中你会注意到 javascript 文件夹 app/javascript 的使用，这意味着你对 JS 所做的任何事情都应该从那里完成。这些对宝石的依赖现在已降至最低，并被纱线取代。

您缺少的是纱线安装。

这是我喜欢使用的一个过程，我已经根据我不久前在媒体上阅读的内容进行了修改

# app/javascript/packs/application.js
import '../stylesheets/application'


# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

在控制台运行

yarn add bootstrap@4.3.1 jquery popper.js

然后

# config/webpack/environment.js
...
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)
...

然后

# app/javascript/packs/bootstrap_custom.js
import 'bootstrap/js/dist/alert'
import 'bootstrap/js/dist/button'
import 'bootstrap/js/dist/carousel'
import 'bootstrap/js/dist/collapse'
import 'bootstrap/js/dist/dropdown'
import 'bootstrap/js/dist/index'
import 'bootstrap/js/dist/modal'
import 'bootstrap/js/dist/popover'
import 'bootstrap/js/dist/scrollspy'
import 'bootstrap/js/dist/tab'
import 'bootstrap/js/dist/toast'
import 'bootstrap/js/dist/tooltip'
import 'bootstrap/js/dist/util'

并将其链接到您的 app/javascript/packs/application.js 文件中。

# app/javascript/packs/application.js
import './bootstrap_custom.js'

然后

# app/javascript/stylesheets/application.scss
@import './bootstrap_custom.scss'

然后

# app/javascript/stylesheets/bootstrap_custom.scss
@import '~bootstrap/scss/_functions.scss';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
@import '~bootstrap/scss/_root.scss';
@import '~bootstrap/scss/_reboot.scss';
@import '~bootstrap/scss/_type.scss';
@import '~bootstrap/scss/_alert.scss';
@import '~bootstrap/scss/_badge';
@import '~bootstrap/scss/_breadcrumb';
@import '~bootstrap/scss/_button-group';
@import '~bootstrap/scss/_buttons';
@import '~bootstrap/scss/_buttons.scss';
@import '~bootstrap/scss/_card.scss';
@import '~bootstrap/scss/_carousel.scss';
@import '~bootstrap/scss/_close.scss';
@import '~bootstrap/scss/_code.scss';
@import '~bootstrap/scss/_custom-forms.scss';
@import '~bootstrap/scss/_dropdown.scss';
@import '~bootstrap/scss/_forms.scss';
@import '~bootstrap/scss/_grid.scss';
@import '~bootstrap/scss/_images.scss';
@import '~bootstrap/scss/_input-group.scss';
@import '~bootstrap/scss/_jumbotron.scss';
@import '~bootstrap/scss/_list-group.scss';
@import '~bootstrap/scss/_media.scss';
@import '~bootstrap/scss/_modal.scss';
@import '~bootstrap/scss/_nav.scss';
@import '~bootstrap/scss/_navbar.scss';
@import '~bootstrap/scss/_pagination.scss';
@import '~bootstrap/scss/_popover.scss';
@import '~bootstrap/scss/_print.scss';
@import '~bootstrap/scss/_progress.scss';
@import '~bootstrap/scss/_spinners.scss';
@import '~bootstrap/scss/_tables.scss';
@import '~bootstrap/scss/_toasts.scss';
@import '~bootstrap/scss/_tooltip.scss';
@import '~bootstrap/scss/_transitions.scss';
@import '~bootstrap/scss/_utilities.scss';

如果您选择精确地遵循它，请不要更改 scss 行等它会搞砸