Jak zarządzać zależnościami JavaScript po stronie klienta? [Zamknięte]

Chociaż istnieją świetne rozwiązania do zarządzania zależnościami po stronie serwera, nie mogłem znaleźć żadnego, które spełniałoby wszystkie moje potrzeby, aby mieć spójny przepływ pracy zarządzania zależnościami JavaScript po stronie klienta. Chcę spełnić te 5 wymagań:

1. Zarządzaj mój klient boczne zależności w formacie zbliżonym do KMP w package.json lub Bower „sbower.json
2. Powinien mieć elastyczność wskazania repozytorium git lub rzeczywistych plików js (w Internecie lub lokalnie) w moim dependency.jsonpliku dla mniej znanych bibliotek (npm pozwala wskazać repozytorium git)
3. Powinien zminimalizować i umieścić wszystkie biblioteki w jednym pliku, takim jak ender - to jedyny plik js, który musiałbym umieścić w swoim <script>tagu po stronie klienta
4. Powinien mieć gotowe wsparcie dla CoffeeScript, takiego jak BoxJS 4 (teraz nie działa )

5. W przeglądarce powinienem móc użyć dowolnego wymaganego stylu:

   var $ = require('jquery');
   var _ = require('underscore');

   Albo jeszcze lepiej, zrób styl headjs :

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });

Jeśli nie ma takiego pojedynczego narzędzia, jaka jest najlepsza kombinacja narzędzi, np. Łańcuch narzędzi, który mogę połączyć za pomocą czegoś takiego jak volo (lub grunt )?

Przeszukałem już wszystkie narzędzia, z którymi się tu łączyłem, i spełniają one w najlepszym przypadku maksymalnie 3 moje wymagania. Dlatego nie pisz więcej o tych narzędziach. Przyjąłbym tylko odpowiedź, która dostarcza jednego narzędzia, które spełnia wszystkie 5 moich wymagań lub jeśli ktoś opublikuje konkretny przepływ pracy / skrypt / działający przykład łańcucha narzędzi wielu takich narzędzi, który również spełnia wszystkie moje wymagania. Dziękuję Ci.

require.js robi wszystko, czego potrzebujesz.

Moja odpowiedź na to pytanie może ci pomóc

Przykład:

Hierarchia projektu aplikacji klienckiej:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js to miejsce, w którym inicjujesz aplikację kliencką i konfigurujesz require.js:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on github
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jquery and underscore
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

Zależności będą używały wtyczki cs poprzedzonej znakiem „cs!”. Wtyczka cs kompiluje plik coffeescript.

Gdy idziesz w prod można wstępnie opracować cały projekt z r.js .

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

Oto twoje wymagania:

• Zarządzaj zależnościami po stronie klienta w formacie podobnym do pakietu npm.json lub komponentu bower.json. Różne, ale TAKIE DOBRE!

• Powinienem mieć elastyczność wskazania repozytorium git lub rzeczywistych plików js (w sieci lub lokalnie) w moim pliku dependency.json dla mniej znanych bibliotek (npm wskażmy na repozytoria git). TAK

• Powinien zminimalizować i umieścić wszystkie biblioteki w jednym pliku, takim jak ender - to jedyny plik js, który musiałbym umieścić w tagu skryptu po stronie klienta. TAK z r.js.

• Powinien mieć po wyjęciu z pudełka obsługę skryptów kawowych, takich jak Box. TAK

• W przeglądarce mogę użyć zarówno require style, jak i headjs. TAK

http://requirejs.org/ jest tym, którego szukasz, jak sądzę

Jako @ Guillaume86 myślę, że hem przyniesie ci najbliżej miejsca, w którym chcesz być.

W hem zależnościami zarządza się za pomocą kombinacji npm i hem. Użyj npm, aby jawnie zainstalować wszystkie zależności zewnętrzne projektów. Użyj rąbka, aby określić, które zależności (zarówno zewnętrzne, jak i lokalne) powinny być zszywane razem dla operacji po stronie klienta.

Stworzyłem szkielet tego projektu, więc możesz zobaczyć, jak to zadziała - możesz to zobaczyć na https://github.com/dsummersl/clientsidehem

Dodawanie zależności

Użyj npm, aby wyszukać określoną zależność, a następnie zmodyfikuj plik package.json, aby zapewnić śledzenie zależności w przyszłości. Następnie określ zależność aplikacji w slug.json.

Na przykład załóżmy, że chcesz dodać zależność skryptu kawy. Po prostu użyj npm, aby zainstalować zależność i zapisz ją w pliku package.json:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

Załóżmy, że chcesz dołączyć własny moduł „bloomfilters”, a nie ma go w rejestrze npm. Możesz dodać go do swojego projektu w następujący sposób:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

Moduły lokalne

Jeśli chcesz dołączyć własną kawę lub JavaScript, możesz to zrobić, dodając te pliki do aplikacji / folderu. Zauważ, że aby udostępnić swój skrypt za pomocą metody „require”, musisz uczynić go modułem CommonJS. To bardzo proste - zobacz dokumentację hem .

Pliki lokalne

Jeśli chcesz dołączyć kod inny niż CommonJS non „require”, możesz go połączyć, odwołując się do niestandardowego javascript lub coffeescript za pośrednictwem listy „libs” w slug.json.

CSS

Obwódka zszyje również twój CSS, jeśli chcesz. Zobacz dokumentację hem .

Budynek

Gdy masz już listę zależności, możesz użyć rąbka, aby zszyć je wszystkie razem.

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

Uwagi

Hem był przeznaczony do projektu spinejs - ale nie musisz go do tego używać. Zignoruj ​​wszystkie dokumenty wspominające o kręgosłupie, jak chcesz ...

Cóż, jestem zaskoczony, że nikt jeszcze nie wspomniał o Browserify .

1. obsługuje format package.json
2. używa npm pod spodem, który może używać repozytorium github (lub dowolnego git) jako źródła pakietu
3. minimalizuje i łączy wszystkie zależności w jednym pliku.
4. obsługuje coffeescript, jeśli umieścisz go w swoich zależnościach
5. wymagają stylu.
6. obsługuje mapy źródłowe

Jestem prawie pewien, że Hem spełnia twoje wymagania (używam personalnego widelca z dodatkowymi kompilatorami - jade i rysikiem - łatwo go dostosować do twoich potrzeb). Używa npm do zarządzania zależnościami.

Możesz rzucić okiem na Yeoman , który wykorzystuje kilka technik, aby pomóc Ci spełnić Twoje wymagania.

Nasz przepływ pracy obejmuje trzy narzędzia zwiększające produktywność i satysfakcję podczas tworzenia aplikacji internetowej: yo (narzędzie do tworzenia rusztowań), grunt (narzędzie do budowania) i bower (do zarządzania pakietami).

Wbudowana obsługa CoffeeScript, Compass i nie tylko. Działa z r.js ( RequireJS ), unittesting itp.

Jeśli chodzi o twoje wymagania:

1. Bower służy do zarządzania zależnościami
2. Bower może pracować z plikami lokalnymi, git: //, http: // i nie tylko
3. Wbudowana obsługa minifikacji i konkatenacji (nawet dla twoich obrazów)
4. Wbudowana obsługa automatycznego kompilowania CoffeeScript i Compass (z LiveReload)
5. Jak stwierdzono w procesie kompilacji: jeśli używasz AMD, przepuszczę te moduły przez r.js, więc nie musisz tego robić.

Wszystkie funkcje:

Błyskawiczne rusztowanie - łatwe tworzenie rusztowań nowych projektów za pomocą dostosowywalnych szablonów (np. HTML5 Boilerplate, Twitter Bootstrap), RequireJS i nie tylko.

Świetny proces kompilacji - nie tylko uzyskujesz minifikację i konkatenację; Optymalizuję również wszystkie twoje pliki graficzne, HTML, kompiluję pliki CoffeeScript i Compass, jeśli używasz AMD, przepuszczę te moduły przez r.js, więc nie musisz tego robić.

Automatycznie kompiluj CoffeeScript i kompas - nasz proces śledzenia LiveReload automatycznie kompiluje pliki źródłowe i odświeża przeglądarkę za każdym razem, gdy wprowadzana jest zmiana, więc nie musisz tego robić.

Automatycznie lintuj swoje skrypty - wszystkie twoje skrypty są automatycznie uruchamiane w JSHint, aby upewnić się, że przestrzegają najlepszych praktyk językowych.

Wbudowany serwer podglądu - koniec z uruchamianiem własnego serwera HTTP. Mój wbudowany można odpalić jednym poleceniem.

Niesamowita optymalizacja obrazu - optymalizuję wszystkie obrazy za pomocą OptiPNG i JPEGTran, aby użytkownicy mogli spędzać mniej czasu na pobieraniu zasobów, a więcej na korzystaniu z aplikacji.

Zabójcze zarządzanie pakietami - potrzebujesz zależności? To tylko jedno naciśnięcie klawisza. Pozwalam ci łatwo wyszukiwać nowe pakiety za pomocą wiersza poleceń (np. `Bower search jquery), instalować je i aktualizować bez konieczności otwierania przeglądarki.

Testowanie jednostkowe PhantomJS - Z łatwością przeprowadzaj testy jednostkowe w bezgłowym WebKicie za pośrednictwem PhantomJS. Kiedy tworzysz nową aplikację, dołączam również pewne rusztowania testowe dla Twojej aplikacji.

Bower może odpowiadać Twoim potrzebom (1) i (2), a pozostałe wymagania. Z pliku readme:

Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you.

Aby zainstalować pakiet:

bower install jquery
bower install git://github.com/maccman/package-jquery.git
bower install http://code.jquery.com/jquery-1.7.2.js
bower install ./repos/jquery

Spójrz na menedżera pakietów Jam . Poniżej znajduje się opis ze strony głównej

Jam jest menedżerem pakietów JavaScript dla programistów front-end, którzy pragną zasobów, które można konserwować. W przeciwieństwie do innych repozytoriów na pierwszym miejscu stawiamy przeglądarkę.

Wydaje się bardzo podobny do npm w sposobie działania.

Zainstaluj pakiet jak poniżej

jam install backbone

aktualizowanie pakietów poprzez wykonanie

jam upgrade
jam upgrade {package} 

Zoptymalizuj opakowania do produkcji

jam compile compiled.min.js

Zależności Jam można dodać w package.jsonpliku.

Pełną dokumentację można znaleźć w dokumentacji Jam

Właśnie trafiłem na inject.js

Niektóre funkcje ze strony projektu :

Inject (Apache Software License 2.0) to rewolucyjny sposób zarządzania zależnościami w sposób niezależny od biblioteki. Niektóre z jego głównych funkcji obejmują:

• Zgodność z CommonJS w przeglądarce (eksport. *)
• Zobacz pełną tabelę pomocy technicznej CommonJS
• Pobieranie plików między domenami (przez easyXDM)
• localStorage (załaduj moduł raz)

Jest kilka opcji:

• http://browserify.org/, który umożliwia importowanie modułów
• RequireJS rozwiązuje ten sam problem
• Jeden, który wydaje się być w trakcie aktywnego rozwoju, to JoinJS

Komponent może również być interesujący, nie zarządza zależnościami jako takimi, ale pozwala na użycie pociętych wersji dużych bibliotek.

Używam hem z npm i chciałem dodać kilka dodatkowych korzyści, o których myślę, że do tej pory nie zostały omówione.

• Hem ma niezależny serwer sieciowy (warstwy), dzięki czemu możesz rozwijać swój kod bez konieczności ponownej kompilacji. Nigdy nie używam, hem buildchyba że publikuję aplikację.
• Nie musisz używać Spine.js, aby używać hem, możesz go użyć do kompilacji dowolnych pakietów coffeescript, jeśli poprawnie skonfigurujesz slug.json. Oto jeden z moich pakietów, który jest automatycznie kompilowany przy użyciu pliku cakefile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Mówiąc o powyższym, hem pozwala łączyć inne zależności w systemie lokalnym za pomocą łącza npm i bezproblemowo je łączyć, nawet gdy używasz serwera warstw. W rzeczywistości nie musisz nawet używać cakepowyższej metody, możesz po prostu połączyć się bezpośrednio ze skryptem coffeescript z zależnych projektów.
• Hem obsługuje eco(wbudowany Coffeescript) dla widoków i Stylus dla CSS i kompiluje to wszystko, wraz z Twoim Coffeescript, w jeden plik JS i jeden CSS.

Oto podstawowa lista konfiguracji z aplikacją Spine, hem, coffeescript. Możesz zignorować części kręgosłupa. W rzeczywistości czasami używam spine appdo konfigurowania struktury katalogów dla aplikacji innej niż Spine, a następnie edytuję, slug.jsonaby zmienić na inną strukturę kompilacji.

1. Zainstaluj NPM: curl http://npmjs.org/install.sh | shw systemie * nix. Zakładam, że jest dostępny z linii poleceń.
2. Zainstaluj obszycie globalnie ( npm install -g hem). Rozwój rozwinął się ostatnio, więc możesz chcieć pobrać go prosto z github ( https://github.com/spine/hem ), wyewidencjonować gałąź iw npm install -g .tym folderze.
3. npm install -g spine.app udostępni kręgosłup jako polecenie globalne
4. spine app foldersprawi, że projekt o nazwie Spine appw foldergenerując odpowiednią strukturę katalogów i kilka plików szkielet zacząć.
5. cddo folderów i edycji dependencies.jsondla potrzebnych bibliotek. Dodaj je, aby slug.jsonrąbek wiedział, gdzie je znaleźć.
6. Opcjonalnie: npm linkdowolny z twoich lokalnych pakietów w fazie rozwoju do node_modulesi możesz dodać je do slug.jsonhem (albo index.jsdo dołączenia bezpośrednio, albo index.coffeejeśli chcesz, aby hem go skompilował).
7. npm install . aby pobrać wszystkie wprowadzone zależności.

8. Jeśli spojrzysz na domyślną konfigurację kręgosłupa, znajdziesz app/lib/setup.coffeetam requirewszystkie biblioteki, których potrzebujesz ze swoich zależności. Przykłady:

   # Spine.app had these as dependencies by default
   require('json2ify')
   require('es5-shimify')
   require('jqueryify')
   
   require('spine')
   require('spine/lib/local')
   require('spine/lib/ajax')
   require('spine/lib/manager')
   require('spine/lib/route')
   
   # d3 was installed via dependencies.json
   require 'd3/d3.v2'

9. W programie index.coffeewystarczy require lib/setupzaładować główny kontroler aplikacji. Ponadto potrzebujesz requireinnych klas w tych innych kontrolerach. Możesz użyć spine controller somethinglub spine model somethingdo generowania szablonów dla kontrolerów i modeli. Typowy kontroler Spine wygląda następująco, używając węzłów require:

   Spine = require('spine')
   # Require other controllers
   Payment = require('controllers/payment')
   
   class Header extends Spine.Controller
     constructor: ->
       # initialize the class
   
     active: ->
       super
       @render()
   
     render: ->
       # Pull down some eco files
       @html require('views/header')   
   
   # Makes this visible to other controllers    
   module.exports = Header

10. Wygenerowana wartość domyślna index.htmlzwykle wystarcza do załadowania aplikacji, ale w razie potrzeby zmodyfikuj ją. Zgodnie z Twoimi wymaganiami pobiera tylko jeden jsi jeden cssplik, którego nigdy nie musisz modyfikować.

11. W razie potrzeby edytuj pliki rysika w cssfolderze. Jest dużo bardziej elastyczny niż CSS :)
12. Od folderuruchom hem serveruruchomić serwer Hem, i przejdź do localhost:9294, aby zobaczyć swoją aplikację. (Jeśli zainstalowałeś hem globalnie.) Ma kilka ukrytych argumentów, na przykład --host 0.0.0.0nasłuchuje na wszystkich portach.
13. Zbuduj resztę aplikacji, używając odpowiednich technik MVC, i użyj rysika do CSS i eco do widoków. Lub w ogóle nie używaj Spine, a hem nadal będzie działał świetnie z Coffeescript i npm. Istnieje wiele przykładów projektów wykorzystujących oba modele.

Jeszcze jedno: normalnie hem serveraktualizuje się automatycznie, gdy aktualizujesz kod i zapisujesz pliki, co sprawia, że ​​debugowanie jest bardzo proste. Uruchomienie hem buildskompiluje twoją aplikację do dwóch plików application.js, które są zminimalizowane i application.css. Jeśli uruchomisz hem serverto później, użyje tych plików i nie będzie już aktualizować się automatycznie. Więc nie rób tego, hem builddopóki faktycznie nie będziesz potrzebować zminimalizowanej wersji aplikacji do wdrożenia.

Dodatkowe odniesienia: Spine.js & hem - pierwsze kroki

Oto rozwiązanie, które ma zupełnie inne podejście: spakuj wszystkie moduły do ​​obiektu JSON i wymagaj modułów, odczytując i wykonując zawartość pliku bez dodatkowych żądań.

Implementacja demo w czystej postaci: http://strd6.github.io/editor/

https://github.com/STRd6/require/blob/master/main.coffee.md

STRd6 / require zależy od posiadania pakietu JSON dostępnego w czasie wykonywania. requireFunkcja jest generowany dla tego pakietu. Pakiet zawiera wszystkie pliki, których może wymagać Twoja aplikacja. Żadne dalsze żądania http nie są wysyłane, ponieważ pakiet zawiera wszystkie zależności. Jest to tak blisko, jak tylko można uzyskać od stylu Node.js wymaganego na kliencie.

Struktura pakietu jest następująca:

entryPoint: "main"
distribution:
  main: 
    content: "alert(\"It worked!\")"
  ...
dependencies:
  <name>: <a package>

W przeciwieństwie do Node pakiet nie zna swojej nazwy zewnętrznej. To zależy od pakietu, w tym zależności, aby go nazwać. Zapewnia to całkowitą hermetyzację.

Biorąc pod uwagę całą tę konfigurację, oto funkcja, która ładuje plik z pakietu:

loadModule = (pkg, path) ->
  unless (file = pkg.distribution[path])
    throw "Could not find file at #{path} in #{pkg.name}" 

  program = file.content
  dirname = path.split(fileSeparator)[0...-1].join(fileSeparator)

  module =
    path: dirname
    exports: {}

  context =
    require: generateRequireFn(pkg, module)        
    global: global
    module: module
    exports: module.exports
    PACKAGE: pkg
    __filename: path
    __dirname: dirname

  args = Object.keys(context)
  values = args.map (name) -> context[name]

  Function(args..., program).apply(module, values)

  return module

Ten kontekst zewnętrzny zapewnia pewną zmienną, do której moduły mają dostęp.

requireFunkcja jest narażona na modułach więc mogą wymagać inne moduły.

Dodatkowe właściwości, takie jak odwołanie do obiektu globalnego i niektóre metadane, są również ujawniane.

Na koniec wykonujemy program w ramach modułu i w danym kontekście.

Ta odpowiedź będzie najbardziej pomocna dla tych, którzy chcą mieć synchroniczny styl node.js, wymagają instrukcji w przeglądarce i nie są zainteresowani rozwiązaniami do zdalnego ładowania skryptów.

Sprawdź cartero, jeśli używasz node / express na zapleczu.

Proponuję sprawdzić zestaw narzędzi dojo, który wydaje się spełniać większość Twoich wymagań. Nie jestem pewien co do CoffeeScript.

dojo współpracuje z modułami napisanymi w formacie Asynchronous Module Definition (AMD). Ma system kompilacji z pakietami i można je agregować w jednym lub kilku plikach (nazywanych warstwami). Najwyraźniej akceptuje repozytoria typu git, więcej szczegółów na temat systemu kompilacji tutaj:

http://dojotoolkit.org/documentation/tutorials/1.8/build/

Dla przypomnienia, wersja 1.9 beta spodziewana jest w przyszłym miesiącu.

Kolejny framework, który spełnia wszystkie moje ostatnio wydane kryteria: http://duojs.org/ (a także obsługuje traktowanie innych zasobów, takich jak CSS, jako zależności).

iniekcja zależności z ładowaniem asynchronicznym + browserify będzie kolejnym dobrym wyborem, w porównaniu do requirejs

asynchroniczne-zarządzanie-zależnościami-frontend-bez-AMD