Bugün bir istemci tarafı Javascript kütüphanesini modüle etmek ve paketlemek nasıl?

11

Modern istemci tarafı JS ekosistemini yakaladım ve CommonJS ve AMD'yi (ilgili araçlar dahil - browserify, requirjs, onejs, jam, düzinelerce diğerleri) okudum. Bir Javascript kütüphanesi yazıyorsam, onu en geniş şekilde erişilebilir olacak şekilde modüle edebilir / paketleyebilirim (ideal olarak CommonJS, AMD ve özellikle hiçbiri tarafından küfür eden kullanıcılar tarafından)?

JQuery gibi popüler kütüphaneler, kendisini oluşturmak için sadece eski okul dosya birleştirmesini kullanıyor ve bir exportsveya genel bağlama yazıp yazmayacağını dinamik olarak algılıyor gibi görünüyor . Şu anda aynı şeyi yapıyorum, ama ana dezavantajı ben (jQuery aksine) birkaç kütüphaneye bağlıysa, kullanıcılardan manuel olarak geçişli seti önceden eklemek istemek zorunda değilsiniz. (Şu anda sadece iki bağımlılığım olmasına rağmen.) Ve elbette küresel ad alanı kirliliği.

Ya da belki de her bağlam için kütüphanemin birden çok versiyonunu oluşturmak en temiz olanıdır?

Ayrıca ambalaj ve yayıncılığı merak ediyorum. Birkaç sistem var, ama büyük olanın bower olduğuna inanıyorum, çünkü tüm yapması kolay olduğu için uğraşması kolay. Ancak, bileşen (CommonJS gerektiren) gibi diğer paket sistemlerini de hedeflemem gerekip gerekmediğini merak ediyorum.

Dikkat etmem gereken başka önemli hususlar var mı? Tüm bunlar için izlenecek iyi örnek projeler var mı?

javascript modules packages

— Yang
kaynak

Bu harika bir öğretici: youtube.com/watch?v=USk1ie30z5k Adam requirjs (r.js), düğüm, bower, omurga,

@MattFenwick Bahsedilen tüm araçları kullandım; video sorularımın hiçbirine cevap vermiyor.

— Yang

İzledin mi? Bizi bir kütüphane içinde yürüyen ve herhangi birini gerektirmeden çoklu modül sistemleri ile çalışmasını sağlayan belirli kod satırlarını açıklayan adamı hatırlıyorum.

2

Her zaman derleme dosyaları kullandım ama ilk nodejs projemi başlattığımdan beri browserify kullanmaya başladım . Browerify ve diğer benzer kütüphanelerle kodunuz derleme dosyanızdır. Her ikisinde de çalışabilen bir istemci ve sunucu kütüphanesinden faydalanıyorum, ancak tamamen istemci koduyla da çalışabilir. Özetle browserify, düğümde kod yazmanın tüm avantajlarını verir (globalleri önlemek için anon işlevi yok, npm, basit gerektirir) ve bu kodu istemcide tek bir komutla çalışacak şekilde paketlemenize ve yalnızca bir dosya yüklemenize izin verir.

Browserify ile (app.js adlı) bir şey yapabilirsiniz:

var MyLib = require('../myLib');

if(typeof window !== 'undefined') {
    window.MyLib = MyLib;
    window._ = require('underscore');
    window.$ = require('$');
    window.MyLib.myCan = require('./3rdParty/can/can');
}

browserify app.js> client.js

Gibi bir şey üretirdi:

[function(require,module,exports){
    window.MyLib = //MyLib code
},
function(require,module,exports){
     window._ = //_ code
},
function(require,module,exports){
    window.$ = //$ code
},
function(require,module,exports){
    window.MyLib.myCan = //can code
}

Tanımlayacağınız dosya tüm 3. taraf kitaplarınızı içerebilir ve onu kullanan geliştiricilerinizle çakışmayabilir.

- Yoruma yanıt olarak düzenleyin (ve soruda tam bir özledim)

Sanırım bu bağımlılıklarınıza ve tüm sürümlerde ve kütüphanelerde çalıştıklarından emin olmak için ne kadar zaman harcamak istediğinize bağlı olacaktır. Bağımlılıklarınız yaygınsa ve sürümden sürüme aynı API'yi takip ediyorsanız, Omurga yoluna gidebilir ve kullanıcının $ ve _ olmasını isteyebilirsiniz. Birlikte gelen dosyanın bir parçası olarak daha belirsiz libs koymanızı öneririm. Seçeneklerin de kesilmesi ve kurutulması gerekmez. Önceden oluşturulmuş veya kendi paketinizi oluşturabilirsiniz.

— pllee
kaynak

Browserify için +1, daha fazla insanın bu araç hakkında bilmesi gerekiyor

— Benjamin Gruenbaum

@BenjaminGruenbaum Gerçekten harika bir araç. Çok şanslıyım, tekrar kontrol ettim. Başlangıçta göz ardı neden tarayıcıda dosya yükleri N # tetikleyebilir dosyaları zaman uyumsuz yüklemek için kullanılır. Artık sadece bir tane var ve kaynak haritalar etkinleştirilebilir.

— pllee

1

Bakın, sorun şu; bir kitaplığın nasıl yayınlanacağını soruyorum. Aslında browserify / onejs / diğer CommonJS tabanlı sistemleri biliyorum, ancak require()kodumda kullanmaya başlarsam, CommonJS'yi kullanmak için kendi projelerini de değiştirmedikçe artık kullanıcılar tarafından erişilemeyeceği anlamına gelir. Derlenmiş bir komut dosyasını serbest bırakırsam, potansiyel olarak kendi projelerinin gereksiz bağımlılıklarını içerecek ve teslim edilebilirliği büyük ölçüde şişirecektir (örn. Çoklu jquery).

— Yang

0

İstemci tarafı kitaplık çeşitleri:

DOM'a dokunur
DOM'ya dokunmuyor

İlk türle (UI widget'ları vb.), Genellikle jQuery'nin var olduğunu varsayacaksınız. Ayrıca "DOM kitaplığı agnostik" yazabilir ve daha az popüler olanlarla da çalışmasını sağlayabilirsiniz ama rahatsız etmiyorum.

İkinci tür. Her şeyden önce, bunu bir jQuery eklentisi yapmayın, örneğin "jQuery çerez eklentisi" çok saçma ama böyle bir kütüphane aslında var.

Bu türlerin her ikisinin de bağımlılıkları, küçük bağımlılıkları veya büyük bağımlılıkları olabilir - dom kütüphanesi bu anlamda bağımlılık saymaz. İlk 2 ile, bunları sadece kütüphane kapsamınızda birleştirirsiniz ve olası çoğaltma konusunda endişelenmezsiniz. Örneğin, jQuery isArrayLike, kullanıcının zaten bazı rastgele yardımcı kemer kitaplığından kendine ait olmasına rağmen, dahili bir işlevi birleştirir .

Bir kütüphane (aslında bir dil) geliştirirken büyük bir bağımlılığa sahip tek bir kişisel deneyimim var moment.js. Bu durumda, biri moment.js ile birleştirilmiş ve bir tane olmadan, kullanıcının dahil etmekten sorumlu olduğu 2 derleme sağlayacağım. Bunun iyi bir çözüm olup olmadığını bilmiyorum.

Ve evet, her durumda, sadece çalışan bir son büyük dosya oluşturma jQuery yaklaşımı benimsenir. Altta modül ısıtıcı plakası vardır (ihtiyaç / AMD / global vb algılama).

— Esailija
kaynak