Rails 4 jQueryとjavascriptとの矛盾

Question

私はRails 4でアプリを作ろうとしています。

私は苦労しています。私はブートストラップのテーマを取り入れようとしており、ベンダーのjavascriptやその他のコードに問題が生じています。

が

$.circleProgress = { 

私はこれを読んだ：

は、私はこの問題は私のapplication.jsでのjQueryを持つとし、「$」記号で始まるベンダーの.jsファイルを持つとは何かを持っているかもしれないと思います：https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

私の問題は、コードを安全にする変更を行う方法がわからないことです。

ベンダーのファイル内のすべての '$'を検索する必要がありますか？そうでなければ、jQueryに安全なラッパーを置くにはどうすればよいですか？

誰もがこの問題に遭遇し、解決策を見つけましたか？私はいくつかの助けが好きです。

Application.js

//= require jquery 
//= require bootstrap-sprockets 
//= require jquery_ujs 
//= require html.sortable 
//= require disqus_rails 
//= require moment 
//= require bootstrap-datetimepicker 
//= require pickers 
//= require main 
//= require hammer.min 
//= require jquery.animate-enhanced.min 
//= require jquery.countTo 
//= require jquery.easing.1.3 
//= require jquery.fitvids 
//= require jquery.magnific-popup.min 
//= require jquery.parallax-1.1.3 
//= require jquery.properload 
//= require jquery.shuffle.modernizr.min 
//= require jquery.sudoSlider.min 
//= require jquery.superslides.min 
//= require masonry.pkgd.min 
//= require rotaterator 
//= require smoothscrolljs 
//= require waypoints.min 
//= require wow.min 
//= require gmaps/google 
//= require chosen-jquery 
//= require cocoon 
//= require imagesloaded.pkgd.min 
//= require isotope.pkgd.min 
//= require jquery.counterup.min 
//= require jquery.pjax 
//= require custom.js 
//= require slider 
//= require underscore 
//= require dependent-fields 
//= require_tree . 
//= require bootstrap-slider 


$(document).ready(function() { 
    DependentFields.bind() 
}); 

関連問題：Rails 4 - incorporating vendor assets

観察

私はエラーのコンソールログは、私のアプリ/資産の.jsファイルの問題を示していることに気付きました/ javascriptsフォルダ。

これらは、そのフォルダ内の唯一の他のファイルです（application.js以外）。私のapplication.jsには 'require_tree'があるので、それらはコンパイルされます。しかし、おそらく、jQueryをapplication.jsに含めると、それらのファイルで矛盾していると思われるものがありますか？

ログを示しています

Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared 
circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined 
conversations.self-832ece2867c1701a5202459ab73ecd6432da2a6c833d8822d37025845a0aefcc.js:10 Uncaught TypeError: $ is not a function 
organisations.self-6547f734e3a69b76176dfe5bb194e428c0bc560ad3fb69811dce9c7f8ccb9f4d.js:2 Uncaught TypeError: $ is not a function 
http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E Failed to load resource: the server responded with a status of 400 (Bad Request) 
http://localhost:3000/profiles/assets/images/grayscale.svg#greyscale Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.woff Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/profiles/assets/custom/images/preloader.gif Failed to load resource: the server responded with a status of 404 (Not Found) 
chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1384 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared 
http://localhost:3000/assets/flaticon.woff Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:3000/assets/flaticon.ttf Failed to load resource: the server responded with a status of 404 (Not Found) 
main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a function 

JSの各アプリ/資産/ JavaScriptので.jsファイルなどのエラーとして識別されているフォルダが保存されます。

多分別のファイル名（.js.erb/js.coffee）を使用する必要がありますか？この仕事をするあるいは、これらのファイルのコンテンツの周りにスクリプトタグを置く必要がありますか？私は私の問題の一部が「でアプリ/資産/ JavaScriptの中に保存されたファイルをどうすると思い

$.circleProgress = { 
    // Default options (you may override them) 
    defaults: { 
     /** 
     * This is the only required option. It should be from 0.0 to 1.0 
     * @type {float} 
     */ 
     value: 0, 

UPDATE

：で

は例えば、最初のファイルが開きます。 js "エクステンション。コンソールエラーリストには、それぞれ次のように表示されます。

kwift.CHROME.min.js:1271Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared 
circle-progress.self-f67ec54….js?body=1:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined(anonymous function) @ circle-progress.self-f67ec54….js?body=1:9 
conversations.self-832ece2….js?body=1:10 Uncaught TypeError: $ is not a function(anonymous function) @ conversations.self-832ece2….js?body=1:10 
organisations.self-6547f73….js?body=1:2 Uncaught TypeError: $ is not a function(anonymous function) @ organisations.self-6547f73….js?body=1:2(anonymous function) @ organisations.self-6547f73….js?body=1:6 
projects.self-9c019ba….js?body=1:1 Uncaught TypeError: $ is not a function(anonymous function) @ projects.self-9c019ba….js?body=1:1 
main.self-5888479….js?body=1:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a functionwindow.onload @ main.self-5888479….js?body=1:316 
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared 

Answer 1

私はこの記事をアップアップの仕事として出しました。

ソリューションは複雑ですが、場合には、それは間違っていますかを理解するために他人を助け：

1. いくつかの宝石は、jQueryの機能を必要とします。それはapplication.jsにjQueryを一般的に組み込むことと衝突する可能性があります - 特定の競合を管理するための特定のコードがありました。

2. application.jsでは、依存関係が依存するjsファイルの下になるように、すべての要件を順番にリストする必要があります。どのファイルが何に依存するのかを知ることは難しい。

3. 私のレーキ資産：プリコンパイルコールは、コンパイルされたアセットをパブリックフォルダに置きます。私はこれが他の呼び出しとの衝突を引き起こしていたため（特にファイルが更新されたとき）、これをオーバーロードしました。

この回答には、学習しようとする人にとって本当の助けはありません。私はこれらの問題を自分自身で解決する方法を正確には学んでいませんでしたが、私が上に進むことができるように手伝ってくれたアップワークの専門家を見つけました。

これは、ブログのチュートリアルでは役に立たない問題の1つです。

Answer 2

クリーンアップがたくさんあるようです。これは最初のRailsアプリですか？もしそうなら、私はあなたがなぜ非常に多くのJSファイルを持っているのか不思議です。あなたのリストをほんの数に減らし、残っている問題を修正し、ゆっくりと物事を追加し、問題を解決し始めます。それが私の一般的な戦略です。それぞれのバグについては、ゆっくりと進み、原因を実際に理解していることを再度確認してください。

この行はapp/assets/javascripts内のすべての.jsのファイルが含まれます：ここで

は、特定のバグのためにいくつかのヒントは、私が見ている

//= require_tree . 

問題はすでにそれらを含めていることである1バイ上記の1つ。だから彼らは二度に分かれています。だから、あなたは'findGoodContent' has already been declaredのような警告を受けている。 require_tree（私はそれが大好きではありません）を使用していいですね。だから、それを保つには、すべてのサードパーティのJSファイルをapp/assets/javascriptsからvendor/assets/javascriptsに移動することを検討してください。 application.jsにはまだrequireの文字が含まれていますが、それらはrequire_treeで繰り返されません。あなたがapp/assets（またはvendor/assets）にそれらのファイルを持っていないため、

grayscale.svgとflaticon.woffのようなものや、他の画像/フォント資産の404エラーがあります。そうしていれば、JS/CSSファイルとビューファイルが<%= asset_path "grayscale.svg" %>で参照されていることを確認してください。そうすれば、Railsがパスをマングルしても、適切な場所から読み込むことができます。 image_url and friendsについて読んで、その仕組みを理解してください。デフォルトでは、Asset Pipelineは本番環境では開発中の名前と変更された名前を使用しています。

また、CSSファイルまたはJSファイルに<%= foo %>タグを含める場合は、という拡張子をファイルに追加する必要があります。これにより、Railsはこれらのタグを処理することがわかります。あなたはこのロードしようと404エラー取得している理由です：

background-image: url("<%= asset_path('random.jpg') %>"); 

しかしファイル：ファイルの一つ、おそらくCSSファイルで

http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E 

を、あなたはこのような何かをやっています.erbの内線番号：blah.css.erbまたはblah.scss.erbなどが必要です。

$ is not a functionのようなエラーは、それらのファイルがjQueryに依存していることを意味しますが、jQuery $オブジェクトは定義されていません。もしあなたがnoConflictを使用しているのであれば、あなたがコメントで示唆したように、はとなるので、$をjQueryオブジェクトにしてください。

幸運を祈る！あなたが圧倒されていると感じたら、JS require行を可能な限り削除して、一度に1つずつバグに取り組んでいきます。

また、require行を並べ替えると、依存関係が一番上（例：jquery）になり、依存するものが少なくなります。

もう一つ、実際にはバグではありません：私はすでに縮小したファイル（hammer.min.jsなど）をあなたのリポジトリに入れないでください。資産パイプラインは、どのようにして縮小するかを知っています。したがって、ソースコードを読まなければならない場合は、未対応のバージョンをチェックインしてください。

Answer 3

誰もこれを投稿していない理由は分かりませんが、jQueryの$ .somethingはjQuery.somethingの略語です。これはjQueryの

ここ

https://api.jquery.com/jquery.noconflict/

に焼かれる無効にする

能力は基本的に、単に「jQueryの」を使用して多くの方が簡単だろう彼らの文書

jQuery.noConflict(); 
// Do something with jQuery 
jQuery("div p").hide(); 
// Do something with another library's $() 
$("content").style.display = "none"; 

の例でありますvs "$"をインクルードしたコードでは、継承されたライブラリを変更するよりも効率的です。 jQueryがかなり普及しているので、この機能を修正するために問題のライブラリに問題を提出する必要があると言われています。

幸運を祈る！