bower init - amd, es6, globals ve düğüm arasındaki fark

291

İlk Bower bileşenimi oluşturuyorum. bower initBetiği çalıştırdıktan sonra bana 'bu paket ne tür modülleri ortaya çıkarıyor?' bu seçeneklerle:

amd
ES6
globaller
düğüm

bu seçenekler arasındaki fark nedir?

— pherris
kaynak

121

Eğer bilmiyorsanız, büyük olasılıkla küreseller sizin için doğru cevaptır.

Her iki durumda da, şunu anlamanız gerekir:

[GÜNCELLEME]

Bu özellik çok yakın zamanda piyasaya sürüldü ve henüz belgelenmedi (AFAIK). Temel olarak moduleType, paketin hangi modül teknolojisinin tüketilmesi gerektiğini belirten (yukarıda bakınız).

Şu anda, paketin dosyasında moduleTypeözelliği ayarlamak dışında herhangi bir etkisi yoktur bower.json.

Orijinal çekme isteği için https://github.com/bower/bower/pull/934 adresine bakın .

[GÜNCELLEME # 2]

Yorumları yanıtlamak için birkaç ek nokta:

Şu anda AFAIK üzerinde yapılan geçerliliği bulunmamaktadır moduleTypevasıta insanlar teknik olarak onlar, bunun için de dahil olmak üzere istediğiniz değeri ne olursa olsun kullanımına izin verildiğini - mülk angularjsbunu yapmak için eğimli düşünüyorsanız
Bower komitesi ek dahil doğru isteksiz olması gibi görünüyor non-interoperable/proprietary moduleTypes(düşünmek besteci, açısal, vs.) - kolayca anlaşılabilir, ama yine hiçbir şey gerçekten kullanarak yapmalarının önüne moduleTypeistedikleri değeri
öncekine bir istisna, (biraz) yakın zamanda dahil edilmesidir yui moduleType, bu nedenle, uyumlu bir planın parçası oldukları varsayılarak, yapılacak "istisnalar" vardır.

Listelenmemiş bir paket yöneticisi için bir paket yazarsam ve onu bower'da yayınlasaydım ne yapardım?

Bir es6 modülü yazar ve ihtiyacım olan paket formatını çıktılamak için / patch es6-transpiler kullanırım. Sonra ya / ve:

Bower adamlara paket teknolojimi bir seçenek olarak eklemesi için dilekçe (es6-transpiler tarafından hedef olarak desteklendiği gerçeğine dayanarak)
Bunun ES6 modülü sürümü ve bunun transpiled XXX sürümü ve kullanım hem de dahil olmak üzere benim Yayınlama paketi es6a kadarmoduleType

Feragatname: Angularjs modüllerini yazma konusunda gerçek yaşam deneyimim yok.

— Karıştırılmış Deutz
kaynak

4

küresel bir AngularJS modülü / paketi oluşturmak için doğru cevap olabilir mi?

1

Yazımı "desteklenmeyen paket yöneticileri ile ne yapmalı" sorusu hakkında ek düşüncelerle güncelledim - yine, bu alan zorunlu değil veya şu anda herhangi bir şey için kullanılmıyor - değeri sadece bilgilendirici. Kendi angularjsbaşına gelince globals, evet, ama güncellememi okuyabilirim. Umarım yardımcı olur.

— Mangled Deutz

Düğüm kullanıyorum. Bu, düğüm modüllerini açığa çıkardığım anlamına mı geliyor? Ben de açısal kullanıyorum, bower'ı kullanarak yüklediğim şeydi, bana "Kaydedilecek bower.json dosyası yok, bir tane oluşturmak için bower init kullan" diyen bir mesajım olduğunu fark ettim. (Ya da, bu ayrı bir soru ise, bir soru yazabilirim. Bunun cevabınızla ilgili olduğu için buraya koymak için uygun bir yorum olduğunu düşündüm. Teşekkürler!)

— PrairieProf

27

ilk

Ben de bower initilk kez kullanıyorum .

Seçenekler, bazı JavaScript kodlarını modüle etmenin farklı yollarına atıfta bulunmalıdır:

amd: AMD definegibi, gereksinimler gibi.
düğüm: Node.js kullanarak require.
globals: global bir değişkeni (window.JQuery gibi) ortaya çıkarmak için JavaScript modül desenini kullanma.
es6: Yakında çıkacak EcmaScript6 modülü özelliğini kullanma.

Benim durumumda bir Node.js modül dflow yazdım ama global dflow var ihraç bir dist / dflow.js dosyası oluşturmak için browserify kullanıyorum : böylece globals seçtim .

Diğer Güncellemeler

Bir pencere genel nesnesi olarak dflow'a göz atmak için kullandığım komut

browserify -s dflow -e index.js -o dist/dflow.js

Değiştirdim çünkü tarayıcıda da gereksinimi kullanmayı tercih ediyorum , bu yüzden şimdi kullanıyorum

browserify -r ./index.js:dflow -o dist/dflow.js

ve bu yüzden değişti bower.moduleType için düğüm benim de bower.json dosyası.

Ana motivasyon, eğer modül adımda bir çizgi varsa, örneğin proje akış görünümüm varsa , flowView'de global adı devretmem gerekiyordu .

Bu yeni yaklaşımın iki avantajı daha vardır:

Düğüm ve tarayıcı arayüzü aynı. Kullanma gerektirirHem istemci tarafında hem de sunucu tarafında , kod örneklerini yalnızca bir kez yazmama ve bunları her iki bağlamda da yeniden kullanmama izin verin.
Ben npm komut dosyaları kullanın ve böylece, ben ${npm_package_name}browserify için kullandığınız komut dosyası bir kez değişken yararlanabilir ve yazabilirsiniz.

Bu başka bir konudur, ancak ikinci faydasının ne kadar yararlı olduğunu düşünmenize gerçekten değer: paketimdenpm.scripts.browserify kullandığım özelliği paylaşmama izin verin.

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"

— Gianluca Casati
kaynak

1

aslında ex için tanım içinde gerektiren kullanabilirsiniz:

define(function(require, exports, module) {   "use strict";    module.exports = {     Collection: require("./collection"),     View: require('./view')   }; });

— Doron Segal

7

Sadece referans olarak, bower'ın modül tipleri ile ilgili olarak tam olarak belirttiği şey budur:

mainJavaScript dosyasında tanımlanan modülün türü . Aşağıdaki dizelerden biri veya bir dizi olabilir:

globals: window.namespaceVeya this.namespacesözdizimini kullanarak genel ad alanına eklenen JavaScript modülü

amd: Sözdizimi kullanan AMD ile uyumlu RequireJS gibi JavaScript modülüdefine()

node: Sözdizimi kullanarak düğüm ve CommonJS ile uyumlu JavaScript modülümodule.exports

es6: JavaScript ile uyumlu modülü ECMAScript'e 6 modüllerini kullanarak, exportveimport söz dizimi

yui: Sözdizimi kullanan YUI Modülleri ile uyumlu JavaScript modülüYUI.add()

İlgili bağlantı: https://github.com/bower/spec/blob/master/json.md#moduletype

— Wtower
kaynak