ElectronでjQueryUIを使うと　jquery is not defind　エラーがでます。

###問題
electronでjquery uiを使おうとおもってやってみると
jquery is not defind とでました。普通にchromeなどのブラウザでやってみると正常に動いたので、おそらくelectron特有の何かが関係しているのだとおもいます。この場合、どのように記述すればいいのでしょうか？

###現在のソースコード

divを掴んでドラッグするプログラムなのですが、electronでは全く動かず、jquery is not defindとでました。

<!DOCTYPE html> <html lang="ja" > <head> <meta charset="utf-8"> <link rel="stylesheet" href="frame/jquery-ui.css"> <script type="text/javascript" src="frame/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="frame/jquery-ui.js"></script> <script>window.$ = window.jQuery = require('jquery');</script> <script> </script> <style> *{ margin:0; padding:0; outline:none; box-sizing:border-box; font-family:"游明朝"; } .body{ box-shadow:0 0 0 1px rgb(74, 74, 74) inset; border-radius:5px; width:100vw; height:100vh; background:white; } .a{ width:80px; height:80px; background:green; } </style> </head> <body> <div class="body"> <div class="a"></div> </div> <script> $(function(){

$(".a").draggable();

});

</script> </body> </html>

kei344

2016/11/21 02:09

コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答1件

ベストアンサー

requireの引数と記述する場所が間違っています。frameディレクトリにjquery-3.1.1.min.jsを配置しているならば以下のようにしてください:

HTML
1<script>window.$ = window.jQuery = require('./frame/jquery-3.1.1.min');</script> 
2<script type="text/javascript" src="frame/jquery-ui.js"></script>

ご質問者様がrequireを記述しているということは「ElectronでのjQueryの使い方」をすでに調べているのかもしれませんが、なぜscriptのsrcで指定しておりかつブラウザでは動くのにElectronで動かないのかというと、どちらかというとjQuery側の問題です。GitHubのissueを参照してください。

jQueryの内部では実行環境がブラウザなのかNodeなどのCommonJS環境かチェックして、ブラウザであればグローバルオブジェクトの$とjQueryにjQueryオブジェクトを設定するけども、Electronの場合はおそらくmoduleオブジェクトが存在したりなどの理由によりCommonJS環境と判断され、$とjQueryにjQueryオブジェクトを設定しないようです。なのでwindow.$ = window.jQuery = require(path_to_jquery);とする必要があります。

内部で実行環境を判断している他のライブラリでも同様の問題が発生する可能性があります。ご注意ください。

投稿2016/11/21 02:00