Rails 5 加载预编译的 javascript 资产时遇到问题

Question

我是 Rails 的新手，遇到了一个我无法理解的问题。我正在尝试将 Trix 编辑器添加到我的应用程序中。我用 gem 安装它并且它工作正常......但仅在开发中。在生产中它不加载编辑器。如果我改变，我也可以让它在开发中失败：

config.assets.debug = false

在development.rb

我已验证该代码包含在预编译的 .js 文件中。它看起来像：

<script src="/assets/application-xyz" data-turbolinks-track="reload"></script>

我能够让它工作的唯一方法是在 header:

中显式声明 Trix CSS 和 JS 文件

<link rel="stylesheet" type="text/css" href="/assets/trix.css">
<script type="text/javascript" src="/assets/trix.js"></script>

我很困惑为什么这会起作用，因为这些文件甚至不在资产文件夹中......也许它们是由 gem 自动添加的？无论如何，它甚至可以在生产中使用，但这似乎是个坏主意。

application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require trix
//= require_tree .

有什么原因会出现在预编译的js文件中却无法正确加载？我不确定如何缩小错误来源的范围。有没有办法在开发者工具中告诉它是否正在加载或是否有错误？

Answer 1

我意识到你的问题是你添加 bootstrap 到你的项目的方式，在你的 assets/stylesheets 你有这两个文件的未缩小和缩小版本，bootstrap.js 和 bootstrap.css 并且您将它们再次添加到 application.js 和 application.css 文件中的项目中。

我所做的是删除所有未使用的 css 和 javascript 文件，作为 bootstrap 文件和脚手架自动生成文件的副本，以及评论或删除您将 Trix 添加到项目的方式，这样您的两个 application 文件中也有 Trix 调用。

# application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require trix
//= require_tree .

请注意，没有 Bootstrap 调用，因为它们已经加载了 require_tree

# application.scss
/*
*= require trix
*= require_self
*= require_tree .
*/

并且您还在 Gemfile 中添加了 Trix，因此您可以在 'assets' 应用程序文件中调用它。

我做了一个Heroku project using your project's fork on BitBucket，所以你可以比较一下，看看到底发生了什么变化。

希望对您有所帮助！

Rails 5 加载预编译的 javascript 资产时遇到问题

Rails 5 trouble loading precompiled javascript assets

ruby-on-rails

editor

asset-pipeline