Javascript 未使用清单顺序解决文件依赖关系

Question

我目前正在使用 this tutorial 重组 Rails 4 应用程序中的 Javascript/Coffeescript 文件。在此之前，由于我对资产管道的无知，我们将大部分代码放在一个巨大的 coffeescript 文件中。目标是将这个巨大的文件分解成符合逻辑、易于管理的部分。

我们的应用程序使用一些通用的 classes 来定义编程结构，例如双向链表。我想把它放在一个单独的文件中，app/assets/javascripts/misc_classes.coffee:

### ***********************************###
### ******* General Classes ***********###
### ***********************************###

#single node for doubly linked list
class Node
  constructor: (data) ->
    @data = data
    prev = null
    next = null

#Doubly-linked list class, to be used for front-end destinations
#Details: https://en.wikipedia.org/wiki/Doubly_linked_list
class DoublyList
  constructor: () ->
    @length = 0 #length of the current list
    @head = null #first node of the list
    @tail = null #last node of the list
...

我们的应用程序代码的其余部分位于 app/assets/javascripts/custom/trips.coffee。 trips.coffee 中的代码使用上述另一个 javascript 文件中的双向链表 class：

### ***********************************###
### ****** Custom Site Classes ********###
### ***********************************###

class Trip
  constructor: (id, editable) ->
    @id = id #trip_id
    @title = 'New Trip'
    @cities = 0 #number of citites in trip
    @countries = 0 #number of countries in trip
    @distance = 0 #distance in KM
    @days = 0 #duration of trip in days
    @destinations = new DoublyList()
...

从 Rails Asset Pipeline Guide 开始，处理此依赖项的方法是通过 application.js 清单文件。

If you need to ensure some particular JavaScript ends up above some other in the concatenated file, require the prerequisite file first in the manifest. Note that the family of require directives prevents files from being included twice in the output.

所以我们的 application.js 文件看起来像这样：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/sortable
//= require jquery-ui/datepicker
//= require colorbox-rails
//= require jquery.readyselector
//= require turbolinks
//= require jquery.externalscript
//= require misc_classes
//= require_tree ./custom/.

但是，当我运行代码时，我在控制台中收到以下错误： Uncaught ReferenceError: DoublyList is not defined

为什么会这样？根据此处的其他帖子，看来我正确地编写了清单文件。我可以验证这两个文件是否也以正确的顺序包含在站点 <header> 部分中。

谢谢！

Answer 1

对于任何感兴趣的人，问题是因为范围界定。在生产中，所有文件都将合并到 application.js 中，但在开发中，它们仍然是单独的文件。我必须将 class 添加到全局命名空间才能工作：

### ***********************************###
### ******* General Classes ***********###
### ***********************************###

#single node for doubly linked list
class this.Node
  constructor: (data) ->
    @data = data
    prev = null
    next = null

#Doubly-linked list class, to be used for front-end destinations
#Details: https://en.wikipedia.org/wiki/Doubly_linked_list
class this.DoublyList
  constructor: () ->
    @length = 0 #length of the current list
    @head = null #first node of the list
    @tail = null #last node of the list

感谢this answer

Javascript 未使用清单顺序解决文件依赖关系

Javascript File Dependencies Not Being Resolved With Manifest Order

javascript

ruby-on-rails

coffeescript

sprockets

asset-pipeline