bower init - różnica między amd, es6, globals i node

291

Tworzę swój pierwszy komponent Bower. Po uruchomieniu bower initskryptu pojawia się pytanie „jakie rodzaje modułów udostępnia ten pakiet?” z tymi opcjami:

  • amd
  • es6
  • globals
  • węzeł

jaka jest różnica między tymi opcjami?

node.js ecmascript-6 bower js-amd es2015 pherris
źródło

Odpowiedzi:

121

Jeśli nie wiesz, to całkiem prawdopodobne, że globals jest właściwą odpowiedzią dla Ciebie.

Tak czy inaczej, musisz zrozumieć:

[AKTUALIZACJA]

Ta funkcja została wprowadzona bardzo niedawno w altanie i nie jest jeszcze w ogóle udokumentowana (AFAIK). Zasadniczo opisuje on moduleType, który określa, dla jakiej technologii modułowej pakiet ma zostać zużyty (patrz wyżej).

W tej chwili nie ma to żadnego wpływu poza ustawieniem moduleTypewłaściwości w bower.jsonpliku pakietu.

Zobacz https://github.com/bower/bower/pull/934, aby uzyskać oryginalne żądanie ściągnięcia.

[AKTUALIZACJA # 2]

Kilka dodatkowych punktów, aby odpowiedzieć na komentarze:

  • w tej chwili AFAIK nie przeprowadza się weryfikacji moduleTypenieruchomości - co oznacza, że ​​ludzie mogą technicznie korzystać z dowolnej wartości, w tym, angularjsjeśli chcą, aby to zrobić
  • komisja altana wydaje się nie być chętni kierunku włączenia dodatkowego non-interoperable/proprietary moduleTypes(myślę kompozytora, kątowe, etc) - co jest zrozumiałe, ale po raz kolejny, nic naprawdę powstrzymuje ludzi od korzystania z moduleTypewartości chcą
  • wyjątkiem od poprzedniego jest (nieco) niedawne włączenie yui moduleType, więc należy wprowadzić „wyjątki”, zakładając, że są częścią uzgodnionego planu

Co bym zrobił, gdybym miał napisać paczkę dla menedżera paczek niewymienionego na liście i opublikować ją na altanie?

Chciałbym napisać moduł es6 i użyć / patch es6-transpiler, aby wyświetlić wymagany format pakietu. Potem albo / i:

  • składaj petycje do altany, aby podali moją technologię pakietów jako wybór (w oparciu o fakt, że jest obsługiwany przez es6-transpiler jako cel)
  • opublikuj mój pakiet, w tym zarówno jego wersję modułu es6, jak i jego transponowaną wersję XXX i użyj es6jakomoduleType

Oświadczenie: Nie mam doświadczenia w pisaniu modułów angularjs.

Mangled Deutz
źródło
4
czy globals byłoby właściwą odpowiedzią na utworzenie modułu / pakietu AngularJS?
1
Zaktualizowałem swój post, dodając dodatkowe przemyślenia na temat pytania „co zrobić z nieobsługiwanymi menedżerami pakietów” - po raz kolejny to pole nie jest obecnie obowiązkowe ani używane do niczego - jego wartość ma jedynie charakter informacyjny. Jeśli chodzi o angularjssamo w sobie, mogę użyć globals, tak, ale przeczytaj moją aktualizację. Mam nadzieję, że to pomaga.
Mangled Deutz
Używam węzła. Czy to oznacza, że ​​udostępniam moduły węzłów? Używam również angular, co właśnie instalowałem za pomocą bower, gdy zauważyłem, że mam komunikat informujący, że mam „Brak pliku bower.json do zapisania, użyj bower init, aby go utworzyć”. (Lub, jeśli jest to osobne pytanie, mogę napisać pytanie. Pomyślałem, że to może być odpowiedni komentarz do zamieszczenia tutaj, ponieważ dotyczy twojej odpowiedzi. Dzięki!)
PrairieProf
27

Inicjał

używam bower init po raz pierwszy.

Opcje powinny odnosić się do różnych sposobów modularyzacji niektórych kodów JavaScript:

  • amd: za pomocą AMD define , podobnie jak wymagania.
  • węzeł: przy użyciu Node.js require .
  • globals: użycie wzorca modułu JavaScript do wyświetlenia zmiennej globalnej (takiej jak window.JQuery).
  • es6: korzystanie z nadchodzącej funkcji modułu EcmaScript6.

W moim przypadku napisałem dflow modułu Node.js, ale używam Browserify do utworzenia pliku dist / dflow.js , który eksportuje globalny dflow var: więc wybrałem globals .

Inne aktualizacje

Komenda, której użyłem do przeglądania dflow jako globalnego obiektu okna, była

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

Zmieniłem to, ponieważ wolę używać wymagają również w przeglądarce, więc teraz używam

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

i dlatego zmieniłem bower.moduleType na node w moim pliku bower.json .

Główną motywacją było to, że jeśli nazwa mojego modułu ma myślnik, na przykład podgląd projektu , muszę przekształcić nazwę globalną w flowView .

To nowe podejście ma dwie inne zalety:

  1. Węzeł i interfejs przeglądarki są takie same. Używając wymagania zarówno po stronie klienta, jak i serwera, pozwól mi napisać tylko raz przykłady kodu i ponownie łatwo je wykorzystać w obu kontekstach.
  2. Używam skryptów npm, więc mogę skorzystać ze ${npm_package_name}zmiennej i napisać raz skrypt, którego używam do przeglądania.

To kolejny temat, ale naprawdę warto zastanowić się, jak użyteczna jest ta druga korzyść: pozwól mi udostępnić npm.scripts.browserifyatrybut, którego używam w pakiecie.json.

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

Gianluca Casati
źródło
1
możesz faktycznie użyć wymagają wewnątrz definiowania np. define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
Doron Segal
7

Dla porównania, właśnie to określa altana w odniesieniu do typów modułów:

Typ modułu zdefiniowany w mainpliku JavaScript. Może być jednym lub tablicą następujących ciągów:

  • globals: Moduł JavaScript, który dodaje do globalnej przestrzeni nazw, używając window.namespacelub this.namespaceskładni
  • amd: Moduł JavaScript zgodny z AMD, jak RequireJS , wykorzystujący define()składnię
  • node: Moduł JavaScript zgodny z węzłem i CommonJS przy użyciu module.exportsskładni
  • es6: Moduł JavaScript zgodny z modułami ECMAScript 6 , przy użyciu exporti importskładni
  • yui: Moduł JavaScript zgodny z modułami YUI , przy użyciuYUI.add() składnię

Odpowiedni link: https://github.com/bower/spec/blob/master/json.md#moduletype

Wtower
źródło