Bootstrap & Rails 6（无 webpack）- 默认引导 javascript 不工作

Question

我已经使用--skip-webpack-install创建了一个新的 rails 应用程序，但似乎虽然默认引导程序 styles 工作，但并非所有 javascript 似乎都在工作。

我的 application.js 有 jquery 和其中的引导 js 代码，但添加轮播或类似的东西不起作用。

奇怪的是，模态有效...

我的 application.js 如下

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require jquery
//= require_tree .

并将其导入到应用程序中

<%= javascript_include_tag 'application' %>

我的 assets.rb 如下

Rails.application.config.assets.precompile += %w( application.js application.scss )

任何建议都会有帮助，如果您需要更多信息，我可以得到它:)

Answer 1

参考了这个https://thejspr.com/blog/use-sprockets-for-javascript-in-rails-6/

Remove the webpacker gem, bundle install and restart.
yarn remove @rails/webpacker.
rm -r config/webpack.
rm config/webpacker.yml.
Change any javascript_pack_tag to javascript_include_tag.
Create app/assets/javascripts/application.js and //= require X any libs you need.
Add //= link_directory ../javascripts .js to app/assets/config/manifest.js
bundle remove webpacker

我的应用程序.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Jim</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= 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>
    <%= yield %>
  </body>
</html>

我的应用程序/资产/javascripts/application.js

//= require jquery3
//= require bootstrap

我在脚手架上运行的用于测试轮播的代码


<p id="notice"><%= notice %></p>

<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/200" class="d-block w-100" alt="https://picsum.photos/200">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200" class="d-block w-100" alt="https://picsum.photos/200">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/200" class="d-block w-100" alt="https://picsum.photos/200">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

Bootstrap & Rails 6（无 webpack）- 默认引导 javascript 不工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-03 15:06:58

Bootstrap &amp; Rails 6（无 webpack）- 默认引导 javascript 不工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-03 15:06:58

Bootstrap & Rails 6（无 webpack）- 默认引导 javascript 不工作

解决方案1
1 已采纳 2021-02-03 15:06:58