2014-09-28 11 views
8

Göz atmak yeni bir yöntemdir ve yararları zorlayıcı olsa da kullanımı tamamen açık değildir.Browserify - Kamuya açık olmayan satın alınmış üçüncü taraf komut dosyalarını nasıl ekleyebilirim

Birkaç sorum var ve birilerinin açıklığa kavuşmasını umuyordum.

  1. jquery ve bootstrap gibi üçüncü parti kütüphaneleri dahil etmek package.json içinde browserify-dolgusu kullanan yaklaşık blog yayınlarını gördüm. Ayrıca, gulp gibi araçların kullanıldığı paketlerde de bundle dosyası üretildi. Kaşık gibi araçların süreci otomatikleştirebilmeleri için tarayıcının neden gerekli olduğuna dair iyi bir cevap bulamıyorum. Birisi biraz ışık tutabilir mi? Browserify-shim neden gereklidir? Ben biraz daha fazla dahil olmasına rağmen gulp çözüm biraz daha temiz olduğunu hissediyorum. Bu bir derleme nesnesi olan browserify özel şeyler ile package.json kirletmeyecek ve bu nedenle gulp ile birlikte gider (sadece benim kişisel görüşüm)

  2. Npm'de olmayan ve olmayan üçüncü parti kütüphaneleriyle nasıl ilgilenilir halka açık? Örneğin, üçüncü taraflardan bir komut dosyası satın alıyoruz. Bu betik, herhangi bir ortak j değil, ancak bazı bağımlılıklarla (jquery ve alt çizgi üzerinde) düzenli bir js dosyasıdır.

cevap

15

Browserify Eğer Düğüm dünyasına alıp bir tarayıcıya teslimat için paketlemek sağlar. CommonJS require ifadeleri ile bağımlılıkları tanımlayan Düğüm modüllerini anlar.

Ama ne bir Düğüm modül olarak tanımlanmayan ve değil destek CommonJS yapan bazı JS kodu veya kitaplık varsa? browserify-shim'u girin. Özel üçüncü taraf senaryonuz gibi herhangi bir betiğin etrafına bir shim sarmalayıcı sağlar, böylece Browserify'nin anlayacağı bir Düğüm modülü olarak tanımlanabilir ve kullanılabilir.

Browserify-shim'in kullanımı, için tamamen ortogonaldir, nasıl Browserify dosyasını çalıştırırsınız. Temel olarak iki seçenek vardır: A Browserify's command line API veya B)Browserify's JS API'u kullanın. Eğer Gulp inşa komut Browserify en JS API kullanmak istiyorum çünkü bir yapı aracını kullanarak

, Gulp gibi (yani gulpfile.js), ikinci seçeneği ima eder. Birçok kişi Gulp'i kullanmayı tercih ediyor çünkü eklentileri iyi bir ekosisteme sahip. Bu sadece Browserify'i çağırmaktan çok daha fazlasını yapmanıza olanak sağlıyor (örneğin, derleme CoffeeScript, SASS derleyin, JSHint'i çalıştırın, vb.).

Yani, belirli sorulara yanıt için:

  1. Browserify-şim

    sadece Eğer Browserify aracılığıyla paket gereken bir Düğüm/CommonJS modül olarak yazılı olmadığını JS kodu varsa gereklidir. Bunu yapmak için, browser.json'da hangi dosyaların modül olarak kaydırılacağını (ve hangi bağımlılıklara sahip olduklarını) browserify-shim'e söylemeniz gerekir. Bunun Gulp ile tamamen alakası olmadığını unutmayın; bu yüzden Gulp kullanıp kullanmadığınıza ihtiyacınız olacak.

  2. Açıkladığınız şey, tarayıcıdaki şemanın mükemmel kullanım durumudur. Üçüncü parti senaryolarınızı projenize yerleştirin, dosyaları paket halinde olacak şekilde yapılandırın.Kodunuzdaki b- Shim belgelerine başına json, require onları, ve kod ile onları paket için Browserify yürütün. Ancak bunu yapılandırmak istiyorum - Ayrıca vb ayrı ayrı onları paket kendi projelerinde sokabilirsin.

birkaç nokta not:

  • Az önce hiçbir JS kütüphanesinde bu şekilde yaklaşık şim edebilirsiniz.
  • bir Düğüm modülü olmak için bir JS kitaplığını Şimleme
  • özel kapsamı olmaya küresel kapsamını değiştirir. Umarım kütüphanedeki her şey, tüm işlevlerinin tek bir modül olarak dışa aktarılabileceği şekilde isimlendirilir, ancak eğer değilse, window'a (ki bu kolay ama tavsiye edilmez) ya da bölüme açık bir şekilde iliştirmek için kesilmiş kodu değiştirmeniz gerekebilir. Ayrı dosyalar/modüller halinde kod.
  • Hem Browserify hem de Gulp, akışlarını JS API'larında kullanır, ancak Guler, Vinil akışlarını kullanırken, Browserify, yerel Düğüm akışlarını kullanır. Birlikte iyi oynamadıkları için, Gulp'nin Browserify'ye uyum sağlaması için vinyl-source-stream'u kullanmanız (örneğin bir Browserify hattındaki dosyaları yeniden adlandırmak için) veya Browserify'i Gulp'e uyarlamak için vinyl-transform'u kullanmanız gerekecektir (örneğin, bir Browserify akışını bir Gulp boru hattı).
+0

Mükemmel cevap. Teşekkürler bayım! Bir küçük takip sorusu. Neden jquery kurabildiğimi, bunu gerektirip global $ değişkenine atayabildiğim için, bir kişi b-shim'i kullanır. Her iki yaklaşımın da kullanıldığını gördüm. kişisel bir tercih, ya da aracı evrim altlığına sahip olmayan kendisine mümkün kıldı bu mu? ikincisinin – sat

+0

fazlası. Ben jQuery 2.x kadar CommonJS uyumlu değildi düşünüyorum. Varsa, kesinlikle CommonJS libs/modules kullanın; aksi halde b-shim kullanın. İyi şanslar! – superEb

İlgili konular