所以我是Rails和JS的新手，所以我假设我缺少一些显而易见的东西。我有一个应用程序设置，其中包含一些控制DOM的基本JS。我在Plunker中创建了所有应用程序，并且该应用程序在此非常有效。所以我想将其移植到Rails应用程序上，因为我也在尝试学习Rails。
我将我的HTML添加到了在拉动我的应用程序时加载的视图中，并将我在Plunker中拥有的JS添加到了放置在asset / javascripts目录中的新JS文件中。
我必须将整个文件包装在其中
window.onload = function()
因为当我没有将JS加载到DOM之前并引起问题时，才这样做。无论如何，我在IDE中使用Cloud9，并且我的应用程序在该处运行良好。但是，当我推送到Heroku时，我收到一条错误消息，提示预编译资产失败。如果我从添加的.js文件中删除内容，然后推送应用程序，它将成功构建。
这是我尝试使用包含的JS推送到Heroku时看到的输出：
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.4.4
-----> Installing dependencies using bundler 1.15.2
Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.2). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
Fetching gem metadata from https://rubygems.org/..........
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Using rake 12.3.1
Using concurrent-ruby 1.0.5
Using minitest 5.10.3
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubi 1.7.1
Using mini_portile2 2.3.0
Using crass 1.0.4
Using rack 2.0.5
Using nio4r 2.3.1
Using websocket-extensions 0.1.3
Using mini_mime 1.0.0
Using arel 8.0.0
Using execjs 2.7.0
Using rb-fsevent 0.10.3
Using ffi 1.9.25
Using bundler 1.15.2
Using coffee-script-source 1.12.2
Using method_source 0.9.0
Using thor 0.20.0
Using multi_json 1.13.1
Using pg 0.18.4
Using puma 3.9.1
Using tilt 2.0.8
Using turbolinks-source 5.1.0
Using tzinfo 1.2.5
Using nokogiri 1.8.3
Using i18n 0.9.5
Using websocket-driver 0.6.5
Using mail 2.7.0
Using autoprefixer-rails 8.6.3
Using uglifier 3.2.0
Using rack-test 1.0.0
Using sprockets 3.7.2
Using rb-inotify 0.9.10
Using coffee-script 2.4.1
Using turbolinks 5.0.1
Using activesupport 5.1.4
Using loofah 2.2.2
Using sass-listen 4.0.0
Using rails-dom-testing 2.0.3
Using globalid 0.4.1
Using activemodel 5.1.4
Using jbuilder 2.7.0
Using rails-html-sanitizer 1.0.4
Using sass 3.5.6
Using activejob 5.1.4
Using activerecord 5.1.4
Using actionview 5.1.4
Using actionpack 5.1.4
Using actioncable 5.1.4
Using actionmailer 5.1.4
Using railties 5.1.4
Using sprockets-rails 3.2.1
Using bootstrap-sass 3.3.7
Using coffee-rails 4.2.2
Using jquery-rails 4.3.1
Using rails 5.1.4
Using sass-rails 5.0.6
Bundle complete! 22 Gemfile dependencies, 59 gems now installed.
Gems in the groups development and test were not installed.
Bundled gems are installed into ./vendor/bundle.
Bundle completed (25.60s)
Cleaning up the bundler cache.
Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.2). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
-----> Installing node-v8.10.0-linux-x64
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
Running: rake assets:precompile
rake aborted!
NameError: undefined local variable or method `config' for main:Object
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/config/environments/production.rb:96:in `<top (required)>'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:292:in `require'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:292:in `block in require'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:258:in `load_dependency'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/activesupport-5.1.4/lib/active_support/dependencies.rb:292:in `require'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/engine.rb:600:in `block (2 levels) in <class:Engine>'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/engine.rb:599:in `each'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/engine.rb:599:in `block in <class:Engine>'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/initializable.rb:30:in `instance_exec'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/initializable.rb:30:in `run'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/initializable.rb:59:in `block in run_initializers'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/initializable.rb:48:in `each'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/initializable.rb:48:in `tsort_each_child'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/initializable.rb:58:in `run_initializers'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/application.rb:353:in `initialize!'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/config/environment.rb:5:in `<top (required)>'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/application.rb:329:in `require'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/application.rb:329:in `require_environment!'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/railties-5.1.4/lib/rails/application.rb:445:in `block in run_tasks_blocks'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/sprockets-rails-3.2.1/lib/sprockets/rails/task.rb:62:in `block (2 levels) in define'
/tmp/build_9ec743c19f6d988add005d93f1ca2d2f/vendor/bundle/ruby/2.4.0/gems/rake-12.3.1/exe/rake:27:in `<top (required)>'
Tasks: TOP => environment
(See full trace by running task with --trace)
!
! Precompiling assets failed.
!
! Push rejected, failed to compile Ruby app.
! Push failed
这是我的.js文件
//Get stuff from the DOM
window.onload = function () {
let addPlayerButton = document.getElementById('add-player-button');
let playerOne = document.getElementById('player-one');
let playerOneText = document.getElementById('player-one-text');
let playerOneMat = document.getElementById('player-one-player-mat');
let playerTwo = document.getElementById('player-two');
let playerTwoText = document.getElementById('player-two-text');
let playerTwoMat = document.getElementById('player-two-player-mat');
let playerThree = document.getElementById('player-three');
let playerThreeText = document.getElementById('player-three-text');
let playerThreeMat = document.getElementById('player-three-player-mat');
let playerFour = document.getElementById('player-four');
let playerFourText = document.getElementById('player-four-text');
let playerFourMat = document.getElementById('player-four-player-mat');
let playerFive = document.getElementById('player-five');
let playerFiveText = document.getElementById('player-five-text');
let playerFiveMat = document.getElementById('player-five-player-mat');
let playerSix = document.getElementById('player-six');
let playerSixText = document.getElementById('player-six-text');
let playerSixMat = document.getElementById('player-six-player-mat');
let playerSeven = document.getElementById('player-seven');
let playerSevenText = document.getElementById('player-seven-text');
let playerSevenMat = document.getElementById('player-Seven-player-mat');
let invaders = false;
//Set display for DOM elements
playerOne.style.display = 'none';
playerTwo.style.display = 'none';
playerThree.style.display = 'none';
playerFour.style.display = 'none';
playerFive.style.display = 'none';
playerSix.style.display = 'none';
playerSeven.style.display = 'none';
//Set arrays
let factions = ["Nordic", "Saxony", "Polania", "Crimea", "Rusviet"];
if (invaders) {
factions.push("Albion");
factions.push("Togawa");
}
randomizeArray(factions);
let playerMats = ["Mechanical", "Patriotic", "Agricultural", "Industrial", "Engineering"];
randomizeArray(playerMats);
let players = [];
//Set functions
function addPlayer(){
let newPlayer = {
playerNumber: players.length + 1,
faction: factions.pop(),
mat: playerMats.pop()
};
players.push(newPlayer);
}
function randomizeArray(array) {
for (let i = 0; i < array.length; i++ ) {
let swapIdx = Math.trunc(Math.random() * array.length);
let tmp = array[swapIdx];
array[swapIdx] = array[i];
array[i] = tmp;
}
}
//Button event listeners
addPlayerButton.addEventListener('click', function() {
switch (players.length + 1) {
case 1:
addPlayer();
playerOne.style.display = "block";
playerOneText.innerText = "You're the " + players[0].faction + " faction!";
playerOneMat.innerText = "You get the " + players[0].mat + " player mat!";
break;
case 2:
addPlayer();
playerTwo.style.display = "block";
playerTwoText.innerText = "You're the " + players[1].faction + " faction!";
playerTwoMat.innerText = "You get the " + players[1].mat + " player mat!";
break;
case 3:
addPlayer();
playerThree.style.display = "block";
playerThreeText.innerText = "You're the " + players[2].faction + " faction!";
playerThreeMat.innerText = "You get the " + players[2].mat + " player mat!";
break;
case 4:
addPlayer();
playerFour.style.display = "block";
playerFourText.innerText = "You're the " + players[3].faction + " faction!";
playerFourMat.innerText = "You get the " + players[3].mat + " player mat!";
break;
case 5:
addPlayer();
playerFive.style.display = "block";
playerFiveText.innerText = "You're the " + players[4].faction + " faction!";
playerFiveMat.innerText = "You get the " + players[4].mat + " player mat!";
addPlayerButton.style.display = 'none';
break;
}
console.log(players);
});
};
非常感谢您的帮助！
更新：
因此，我很确定.js文件中存在不正确的内容。如果我将.js文件更新为仅包含以下代码：
window.onload = function () {
alert('Hello');
};
然后成功推送到heroku。
但是，一旦我将其更改为：
window.onload = function () {
let addPlayerButton = document.getElementById('add-player-button');
};
构建再次失败。