Elektron: jQuery tanımlanmamış

315

Sorun: Electron kullanarak geliştirirken, jQuery gerektiren herhangi bir JS eklentisini kullanmaya çalıştığınızda, komut dosyası etiketlerini kullanarak doğru yola yükleseniz bile eklenti jQuery'yi bulamaz.

Örneğin,

<body>
<p id="click-me">Click me!</p>
...
<script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now
<script>$("#click-me").click(() => {alert("Clicked")});</script>
</body>

Bu kodu yukarıda çalıştırmak işe yaramaz. Aslında, DevTools'u açın, Konsol görünümüne gidin ve <p>öğeye tıklayın . Bunu function $ is not definedya da bunun için bir şey görmelisiniz .

jquery  electron 
— Bruno Vaz
kaynak
Neden sadece Elektron requirefonksiyonunu kullanmıyorsunuz ?

Yanıtlar:

760

Daha iyi ve daha genel bir çözüm IMO: 

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

Yararları

  • Aynı kod ile hem tarayıcı hem de elektron için çalışır
  • Her birini belirtmek zorunda kalmadan TÜM 3. taraf kitaplıkları (yalnızca jQuery için değil) ile ilgili sorunları düzeltir
  • Komut Dosyası Oluşturma / Paket Dostu (örn. Tüm komut dosyalarını vendor.js'ye Grunt / Gulp)
  • node-integrationYanlış olması GEREKMEZ

burada kaynak

— Dale Harders
kaynak
1
@fareednamrouti Evet, ama bu çözümün amacı 3. taraf kütüphanelerini listelemek zorunda olmamanızdı (sadece işe yarıyor!). Birçok kitaplığı (veya kendi kendine birleştirilmiş komut dosyalarını) içe aktarırken kullanışlı
— Dale Harders
2
Teşekkürler! benim durumumda, bu çözüm aynı zamanda d3 v3 veya altındaki gibi d3'ün eski sürümleri için de çalışıyor
— headwinds
2
@DaleHarders Görünüşe göre window.moduleaynı değerle başlar module, bu nedenle kodunuz beklendiği gibi çalışmaz. Bunu yapmanın uygun yolu, modulebunun yerine başka (kullanılmayan) pencere özelliklerine kaydetmektir window.tempModule. Söylediklerimi console.log(module)doğrulamak için, son ifadenizden sonra şimdi doğrulayın module === undefined.
— Lucio Paiva
1
@Lucio Nope. Window.module'a kaydetmemiz gerekiyor, çünkü 3. taraf kitaplıkların beklediği yer burası (tarayıcı ortamı). Bence Node.js ve tarayıcı ortamlarını karıştırıyorsunuz. Bu hile, kodunuzun herhangi bir ek yapılandırma olmadan tarayıcı VE düğümü / elektronda çalışabilmesi için geliştirmeye yardımcı olmaktır. Bunu yapmanın birçok yolu var ama bu en basit IMHO.
— Dale Harders
1
Bu CSP ile sorunlu
— Trevor
121

Https://github.com/atom/electron/issues/254 adresinde görüldüğü gibi , sorun bu koddan kaynaklanmaktadır:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

JQuery kodu bir CommonJS ortamında çalıştığını "görür" ve yok sayar window.

Çözüm gerçekten kolaydır , jQuery'yi yüklemek yerine şu şekilde yüklemelisiniz <script src="...">:

<script>window.$ = window.jQuery = require('./path/to/jquery');</script>

Not: geçerli dizin olduğunu gösterdiğinden yoldan önceki nokta gereklidir . Ayrıca, ona bağlı başka bir eklenti yüklemeden önce jQuery yüklemeyi unutmayın .

— Bruno Vaz
kaynak
1
Teşekkürler, ama yeoman tarafından açısal olarak oluşturulmuş bir sistemim var. Grunt tüm bower bağımlılıklarımı alır ve onları vendor.js dosyasına dönüştürür. Jquery'yi nasıl yükleyebilir, çizginizle nasıl düzeltebilir ve jquery gerektiren diğer bower bağımlılıklarına nasıl devam edebilirim?
— bluesky777
Anlamıyorum, vendor.js içinde jquery var? Bu durumda, vendor.js dosyasını bu pencereyle yükleyebilirsiniz. $ Yöntemi, afaik.
— Bruno Vaz
Bağlantılı sayıdaki bazı yorumlar daha da iyi bir çözüm var: 'node-integration': falseseçenek olarak BrowserWindow.
— Boldewyn
6
Bu başka şeyleri etkilemez mi?
— Bruno Vaz
53

Yazmanın başka bir yolu <script>window.$ = window.jQuery = require('./path/to/jquery');</script>:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>
— Aaleks
kaynak
Bunu en iyi cevap olarak buldum çünkü hala onunla CDN kullanabiliyorum! Ve hiçbir şeyin üzerine yazmaya gerek yok.
— 19'da patotom
53

elektron SSS cevap:

http://electron.atom.io/docs/faq/

Elektron jQuery / RequireJS / Meteor / AngularJS kullanamıyorum.

Electron'un Node.js entegrasyonu nedeniyle, DOM benzeri modüle eklenmiş bazı ekstra semboller vardır, ihracat, gerektirir. Bu, bazı kütüphanelerde aynı ada sahip sembolleri eklemek istedikleri için sorunlara neden olur.

Bunu çözmek için Elektron'daki düğüm entegrasyonunu kapatabilirsiniz:

// Ana süreçte. 

let win = new BrowserWindow({  
 webPreferences: {
 nodeIntegration: false   } });

Ancak Node.js ve Electron API'lerini kullanma becerilerini korumak istiyorsanız, diğer kütüphaneleri eklemeden önce sayfadaki sembolleri yeniden adlandırmanız gerekir:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>
— Fran6
kaynak
@ Fran6 Harici bir sayfa yüklersem ne yapabilirim? :(
— georgiosd
Bu işe yaradı ama bunu yaptıktan sonra benim Elektron uygulaması kapanmaz - yani, web sayfasından çıkamadım.
— tale852150
34

Aynı problemle daha yeni karşılaştım

npm install jquery --save

<script>window.$ = window.jQuery = require('jquery');</script>

benim için çalıştı

— Dhaval Chauhan
kaynak
Orijinal cevabım tam olarak bunu söylüyor.
— Bruno Vaz
Merhaba nasıl materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. böyle bir şey <script> window.Materialize = window.Materialize = requir ('Materialize'); </script> ??? birisi yardımcı olabilir
— Makjb lh
@BrunoVaz bu cevap daha temiz :)
— moeiscool
20

node-integration: falseBrowserWindow'da seçeneklerin içine yerleştirebilirsiniz.

Örneğin: window = new BrowserWindow({'node-integration': false});

— Murilo Feres
kaynak
4
Bu, düğüm entegrasyonu gerektirmeyen kullanıcılar için iyi bir çözümdür.
— Adam Szmyd
Bu harika, benim için mükemmel çalışıyor. Teşekkürler @Murilo Feres. Düğüm entegrasyonu seçeneklerinin ne gibi yolları var?
— Ahesanali Suthar
3
@ 1.4 çalışmıyor, lütfen kullanın: let win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})
— holly
14

Güzel ve temiz bir çözüm

  1. NQ kullanarak jQuery yükleyin. ( npm install jquery --save)
  2. Kullanın: <script> let $ = require("jquery") </script>
— adgelbfish
kaynak
8

Aynı sorunla karşılaşıyorum ve bu benim için çalıştı!

Npm kullanarak jQuery yükleyin

$ npm install jquery

Ardından, aşağıdaki yollardan biriyle jQuery'yi ekleyin.

Komut dosyası etiketini kullanma

<script>window.$ = window.jQuery = require('jquery');</script>

Babil Kullanımı

import $ from 'jquery';

Webpack'i kullanma

const $ = require('jquery');
— Abraham Hernandez
kaynak
5

Ben biraz farklı çözüldü mücadelenizi anlıyorum düşünüyorum. Jquery.Script yükleyici js dosyasını alır ve o benim için sihir yaptım onun eki ekleyerek js dosyası için komut dosyası yükleyici kullanılır.

https://www.npmjs.com/package/script-loader

komut dosyası yükleyicisini yükledikten sonra bunu önyüklemenize veya uygulama dosyanıza ekleyin.

'script! path / your-file.js' dosyasını içe aktarın;

— Mertcan Diken
kaynak
4

Tamam, işte başka bir seçenek, akraba dahil etmek istiyorsanız ...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>
— aestrro
kaynak
3

Angular2 kullanıyorsanız, bu kodla yeni bir js dosyası oluşturabilirsiniz:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

ve jquery yolundan hemen sonra .angular-cli.json içine koyun:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]
— maksimum
kaynak
3

im yapı ve elektron ile Açısal App, benim çözüm aşağıdaki idi:

index.html

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Bu yüzden Jquery tarayıcıda angular.json'dan yüklenir, aksi takdirde elektron tarafından oluşturulmuş bir uygulama ise bunun yerine modül gerektirir.

Jgular'ı angular.json'dan içe aktarmak yerine index.html dosyasına almak istiyorsanız, aşağıdaki çözümü kullanın:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>
— Kuza Mezarı
kaynak
2

1. npm kullanarak jQuery yükleyin. 

npm install jquery --save

2.

<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
  if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>
— Alexey Kolotsey
kaynak
2

Bu benim için çalışıyor.

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

Düşünülmesi gereken şeyler:

1) Bunu daha önce bölüme koyun </head>

2) daha önce Jquery.min.js veya jquery.js hakkı dahil </body>etiketi

— Vishal Goyal
kaynak
0

aşağıdaki kodu deneyebilirsiniz:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});
— shuoGG
kaynak
0

Bu sorun için, Web Sayfasında kullandığınız gibi JQuery ve diğer js kullanın. Ancak, Elektron düğüm entegrasyonu vardır, bu yüzden js nesnelerinizi bulamaz. module = undefinedJs nesneleriniz düzgün yüklenene kadar ayarlamanız gerekir. Aşağıdaki örneğe bakın

<!-- Insert this line above local script tags  -->
<script>if (typeof module === 'object') {window.module = module; module = 
undefined;}</script>

<!-- normal script imports etc  -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>    

<!-- Insert this line after script tags -->
<script>if (window.module) module = window.module;</script>

Verildiği gibi içe aktardıktan sonra JQuery, elektrondaki ve diğer şeyleri kullanabilirsiniz .

— Kiran Maniya
kaynak
0

Jquery'yi aşağıdaki komutla kurmanız yeterlidir.

npm install --save jquery

Bundan sonra lütfen Jquery kullanmak istediğiniz js dosyasına belew satırını koyun

let $ = require('jquery')
— Milan Hirpara
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.