Rails 4 Javascript文件不起作用

Question

您好，我在將JavaScript文件包含到我的Rails應用程序時遇到了一些問題。

我正在使用Rails 4

首先，我將這些文件名寫入我的application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require CanvasRenderer
//= require Projector
//= require three.min
//= require me
//= require_tree .

他們也在我的供應商/資產/ javascripts上 。 因此，當我從瀏覽器打開頁面時，沒有任何效果

我查看頁面源代碼，可以看到，我的js文件從標題中獲取

  <link rel="stylesheet" media="all" href="/assets/home.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/CanvasRenderer.self-28076336bdf42eb56ef55649b880be9c4c40f4f9991aaa7cae7ba317c60e57a6.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/Projector.self-b4b1414a2f0bcaf573fcbc6a52ee0a989659089fe0d392f13545f1f065e1abd9.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/three.min.self-9bfe8e307ba0fd9ffeb655fcfc20d5017f34a3d41235b34e06b5fac3da6fd8f1.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/me.self-673e4489da4471935b3097fdd8e29ab07f0bc14dc377bca6dc9cd9cf6e39ec23.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-10ad0916cf31256fe71785e8dc9cc297a96b1cdf7b74aeb61711199b9a3d003f.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="bs8wy2VKuszAk+pdH1e8cLLsL+P21x0Xm8hY76MoccKCPYiKE+QpGqHHuoWe7lwpvOgVsRW/3pyzf6OqBO23YA==" />
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>

和控制台日志給出錯誤

CanvasRenderer.self-28076336bdf42eb56ef55649b880be9c4c40f4f9991aaa7cae7ba317c60e57a6.js:6 Uncaught ReferenceError: THREE is not defined
Projector.self-b4b1414a2f0bcaf573fcbc6a52ee0a989659089fe0d392f13545f1f065e1abd9.js:8 Uncaught ReferenceError: THREE is not defined
me.self-673e448….js?body=1:22 Uncaught TypeError: Cannot read property 'appendChild' of null

我在這里使用的相同文件，一切都很好。 http://kleaz.com/demo/dev/

我不明白為什么

Answer 1

CanvasRenderer和Projector嘗試在three.min.js中定義THREE之前使用它。

將清單中的資產順序更改為以下順序（示例中使用的順序）也可以解決此問題：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require three.min
//= require CanvasRenderer
//= require Projector
//= require me
//= require_tree .