2016-06-11 21 views
11

Temel npm komutunu kullanarak iskele edilen bir MEAN yığın projem var. Şu anda, Bootstrap CDN kullanarak dahildir:Düğüm Projesinde Önyükleme Nasıl Kullanılır

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') 

Sorum projesi CDN dahil olduğu gibi gerçekleştirilir yüzden UÖM'yi kullanarak önyükleme ekleyebilir nasıl. Özellikle,

node_modules içinde bir boostrap dizini çalıştırdığımda. Ancak, bootstrap.css dosyasını bu dizinden dahil etmeye çalışırsam, glifikon yazı tiplerini bozar. Nasıl yapılacağı konusunda tavsiyede bulunabilir mi?

P.S. Aynı zamanda AngularJS'nin kendisi ile ilgili aynı soruyu da ele alacağım.

cevap

12

Sen bower yani tarayıcı paket yöneticisini kullanabilirsiniz

bir API yoluyla paket bağımlılık modelini teşhir ederken

Bower, ön uç paket yönetiminin soruna bir jenerik, unopinionated çözüm sunuyor that can daha görüşlü bir yapı yığını tarafından tüketilmelidir. Sistem bağımlılıkları yoktur, farklı uygulamalar arasında bağımlılıklar paylaşılmaz ve bağımlılık ağacı düzdür.

Daha fazla bilgi edinmek istiyorsanız, daha iyi ve güvenilir olan bu link numaralı telefonu da okuyun.

Why Not npm

NPM ve Bower arasındaki temel fark, paket bağımlılıklarını yüklemek için bir yaklaşımdır. npm, her paket için bağımlılıkları ayrı ayrı yükler ve sonuç olarak aynı paketin birkaç sürümü olabileceği büyük bir paket bağımlılık ağacı (node_modules/grunt/node_modules/glob/node_modules/...) oluşturur. İstemci tarafında JavaScript için bu kabul edilemez: jQuery veya başka bir kitaplık için iki farklı sürümü bir sayfaya ekleyemezsiniz. Bower ile her paket bir kez yüklenir (jQuery, kaç paketin bağımlı olduğuna bakılmaksızın her zaman bower_components/jquery klasöründe olur) ve bağımlılık çakışması durumunda Bower, paketi zaten yüklü olan bir pakayla uyumlu değildir.

Bower kurulum

sadece basit Sen tam için Doc başvurabilir paketleri

Syntax'i

npm install -g bower 

yüklemek oluşumu.Örnek için

:

Dizin yapısı

project Folder 
    + bower_components 
    + bootstrap 
     + dist 
     + css 
      + bootstrap.css 
    + jquery 
     + jquery.js 
    + public 
    + index.html 
    + app.js 

Şimdi app.js statik yolunu ayarlayabilirsiniz

app.use(express.static(path.join(__dirname, 'bower_components'))); 

Şimdi app.js dosya ile index.html dosyasına

<!DOCTYPE html> 
<html> 
<head> 
    <title>{{ title }}</title> 
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' /> 
</head> 
<body> 
{{{ yield }}} 
</body> 
<script src="/bootstrap/dist/jquery/jquery.js"></script> 
</html> 

Ekran

Dizin yapısı basitçe kullanabilirsiniz enter image description here

Normal Html Dosya enter image description here

+0

Yani, çardak yüklediğinizde, o zaman istediğim paketleri belirtmek için bir bower.json dosyası oluşturmak gerekiyor? Bundan sonra ne var? – MadPhysicist

+0

bootstrap, angluar vb. Gibi harici kütüphaneleri yüklediğinizde bower'ı yükleyebilirsiniz. İstediğiniz zaman kütüphaneleri güncellemeye yardımcı olan bower.json'u yaratırsınız. Ön uç çözümdür ve kullanımı çok daha kolaydır. Paketlerin adını bower.json'a ekleyin veya paket adıyla yükleyin. –

+0

Hala HTML dosyama nasıl bir şey ekleyeceğimi açıklamaya çalışıyorum. Özellikle, bower yönetimi npm'den nasıl farklı olur? Sonuçta, npm ayrıca dizin ve indirme paketleri oluşturur. – MadPhysicist

İlgili konular