2015-09-15 9 views
5

Hy,nant üzerinden Unterantic UI'yi neden yükler jQuery'yi özlüyor ve buna bir referans hatası mı atıyor?

Windows 10 PC'de CSS-Framework "Semantik Kullanıcı Arabirimi" ni npm ile node.js.'dan yüklemeye çalışıyorum.

official install-instructions'u dikkatlice takip ettim.

  1. official Windows Installer ile başarılı node.js (v4.0.0) yükledim.
  2. gulp (npm v2.14.2) yüklemek için Windows cmd npm install -g gulp'da yazılmıştır.
    • İlk defa ECONNRESET numaralı telefonu ve could solve numaralı hatalarım var. Bu yüzden gulp dünya çapında başarılı bir şekilde kuruldu.
  3. En azından ben bu kod ile Semantik UI yüklemeye birkaç kez denedim:

    npm install semantic-ui --save cd semantic gulp build
    Hangi yarıya çalışır - & eksik bağımlılık paketi jQueryWARN peerdependencies sonucuydu. Ama hala yeni yüklü varsayılan Semantic UI Framework'ü gulp build ile yapılandırabilirim.

Bu benim Windows 10 Sistem yarıya çalışır, ama aynı zamanda dedi ben hata aşağıdaki google krom geliştirici araçları olsun varsayılan şablon Fixed Menu benim yerel dosya kopyalama aramaya çalıştığınızda:

Uncaught ReferenceError: jQuery is not defined/semantic.min.js:11

Tamam, sadece bilinmeyen bir başvuru, ancak bu beni eksik jQuery paketine işaret etti. Bunun için googling ettikten sonra npm-install-missing (benim çıkmaz için en iyi sonuç) bir npm paketi buldum ve proje klasöründe denemek - hiçbir şey yok, çünkü package.json bağımlılık dosyası yoktur.

yüzden npm "proje klasörüne benim verilen proje yapısında derinlere inmiş \ node_modules \ semantic_ui ve tekrar. Sonuç
klasöründe dosyalanır kapalı olan node_modules her paketin komple bir paket güncelleme oldu ran jQuery paket ve biraz daha: github, gulp-concat-dosya isimleri, gulp-debug, gulp-git, gulp-json-editör, gulp-istemi, gulp-musluk, birleştirme-akışı, mkdirp ve anahtar. Yani 11 paketleri vardı Semantic UI'nin bağımlılıkları nedeniyle kaçırıldı

Ancak jQuery ReferenceError hala mevcut. semantic.min.js semantic.min.js dosyasını aynı varsayılan dizin yapısına koymasına rağmen, semantic-ui.com/ numaralı resmi sürümdeki chromes geliştirici araçlarını denediğinizde, herhangi bir hata alamadınız demektir. dist /semantic.min.js. Tamam, yolumun önünde tek bir dizin var: semantic/dist/semantic.min.js - ama bu, resmi belgelerde nasıl yapılır.

Umarım birileri bu çerçeveyi tamamen canlı tutmama yardım edebilir.jQuery Semantik UI tarafından gerekli iken :)

sayesinde
Robert

+0

Sorunuza ne kadar ayrıntı koyduğunuzu görmek için aşağı çekildi! – timothyclifford

cevap

12

, bir npm gereklilik değil.

Açıklamak gerekirse, jQuery bir istemci tarafı JavaScript Kitaplığıdır. Bunu kullanarak, kendi web sayfalarınıza .js dosyasını <script> etiketine dahil etmenizi gerektirir. Resmi web sitesinden veya use a CDN'dan download yapabilirsiniz.

jquery npm package ilgili, ancak hiçbir şekilde aynı şeyle ilgili değildir. Bu paket kendi jQuery dosyanızı oluşturmak istediğinizde kullanılır (bazı değişiklikler yapmak istediğinizde veya bazı özel gereksinimleriniz varsa) - genellikle bunu yapmak için yapmazsınız. Eğer semantic.css ve semantic.js olan ihtiyaç sadece iki dosyalar - gulp build sizin için çalışmış Kısacası

, o zaman hazırsınız demektir. Jantu.js'nin (jquery.com adresinde bulunan, numaralı npm ile yüklü değil) web sayfalarınızda semantic.js'den hemen önce bulunduğundan emin olun.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
    <title>Title</title> 
    <link rel="stylesheet" type="text/css" href="dist/semantic.css"> 
</head> 

<body> 
    Body goes here 

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="dist/semantic.js"></script> 
</body> 

</html> 
+1

Çok teşekkürler @fstanis!
Gördüğünüz gibi, önce Semantic UI ve bağımlı araçlar gibi gelişmiş bir çerçeve kullanmadan önce temel bilgileri öğreniyorum. Çok fazla zaman ve sinir kazandırır. ^^ –

0

sorun düğümü kendisiyle oturup edilebilir: Yani "temel" HTML dosyası böyle bir şey (üretilen semantic.css ve semantic.jsdist klasörde olduğunu varsayarsak) görünmelidir. jQuery çok aynı isimlerle

ile semboller eklemek istediğinizde burada belirtilen Ve nedeni düğüm ekleme ekstra sembolü nedeni şunlar olabilir: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

........

But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

<head> <script> window.nodeRequire = require; delete window.require; 
    > delete window.exports; delete window.module; </script> 
    <script type="text/javascript" src="jquery.js"></script> 
    </head> 

NOT: içinde çok önemli senin bundan sonra betikleri yeniden adlandırıp sembollerin silinmesi. Yeni sembolü kullanmalısın. Yani require yerine nodeRequire kullanın. Bu sorunu çözecek. Elektron kullanarak bir masaüstü uygulaması geliştirirken aynı sorundaydım. Ve bu benim için güzel ve düzgün çözdü. Bu yaygın bir problem. Düğümlere bağlı olarak tüm çözümlerin çoğunda. Bootstrap kullandığımda aynı problemi açtım. Jquery işe yaramadı. Ve nedeni bu. Ve çözüm budur.

İlgili konular