为什么我有多个 <script> 标签而不是 Rails 应用程序中的一个？

Question

当我在 chrome 上检查我的索引页时，head 标签有多个标签：

<script src="/assets/components/questions/question_likes.self-6aaf2ce97062977185e0d5f9fc31643ca8fd012bfb53c12752977afdab1260be.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/components.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/moment.self-0da3eb4ebf8fb8c3113d89afb90e5b7a87760d21b5b39a405a51fe05c8e40fd8.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/vendor/jquery.ui.widget.self-92c37a41e67e528eecf100716907331b4b9aa4f546bf75ef2e0529c8c03a562d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/jquery.iframe-transport.self-e461f7ff2a60ee89459106a6f3e349cf79b7f56066b3c8cbc73389b30e1eb592.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/jquery.fileupload.self-79c952fc273d5a8955a6093f4f489dcd509c5a2cefb2b9a049d3cdb2710ec8d3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/basic.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/vendor/tmpl.self-c2108a63ad9ae9ab4a723bcf0104f6a92a63eb917331ff69fad6f02fe7219488.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/s3_direct_upload.self-a71af1e40427c6623d982df253581eb58013b84d84f45bcef7d0352ad4e82534.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-c88a422e522d3887e663830741eb19213b74b0bcee8413fffde6decde58266aa.js?body=1" data-turbolinks-track="true"></script>

我认为 rails 将所有 js 文件连接成一个，为什么会发生这种情况？我正在使用react，没有turbolinks。

Answer 1

在生产环境中运行时，Rails 将创建一个缩小的 javascript 文件，您可以使用javascript_include_tag. 但是，在开发和测试环境中，所有 JavaScript 文件都将包含在您所展示的范围内，以便于调试。

您可以在官方指南中阅读有关开发模式下的 Rails 资产管道的更多信息。

在开发模式下，资产按照它们在清单文件中指定的顺序作为单独的文件提供。

这个清单 app/assets/javascripts/application.js：

//= require core
//= require projects
//= require tickets

将生成此 HTML：

<script src="/assets/core.js?body=1"></script>
<script src="/assets/projects.js?body=1"></script>
<script src="/assets/tickets.js?body=1"></script>

指南还包括一个讨论config.assets.debug选项的部分，这是本例中的问题（感谢@SergioTulentsev）。