Jak Mogę używać npm Dla zależności front-end?
Chcę zapytać, czy jest możliwe (i ogólnie dobry pomysł) użycie npm do obsługi zależności front-end (Backbone, jQuery).
Odkryłem, że Backbone, jQuery i tak dalej są dostępne przez npm, ale musiałbym ustawić inny punkt ekstrakcji (domyślnie jest to node_modules) lub symlink lub coś innego...
Co muszę zmienić w package.json?
5 answers
Krótka odpowiedź: Rodzaj.
To w dużej mierze zależy od autora modułu, aby to wspierać, ale nie jest to powszechne. Socket.io jest przykładem takiego modułu wspierającego, jak pokazano na ich stronie docelowej. Istnieją jednak inne rozwiązania. To są te dwa, o których właściwie nic nie wiem:
- http://ender.no.de / - Ender JS, opisywany przez siebie analogowy npm dla modułów klienckich. Trochę zbyt zaangażowany dla mojego smaki.
- https://github.com/substack/node-browserify - Browserify, narzędzie, które będzie poruszać zależności i pozwala na wyjście pojedynczego skryptu poprzez emulację węzła.wzór modułu js. Możesz użyć skryptu jake / cake|rake|make build, aby wypluć swoją aplikację.js, a nawet zautomatyzować go, jeśli chcesz uzyskać fantazyjne. Użyłem tego krótko, ale uznałem, że jest trochę niezgrabny i stał się denerwujący do debugowania. Ponadto nie wszystkie moduły npm z podwójnym środowiskiem lubią być uruchamiane przez browserify.
Osobiście obecnie decyduję się na używanie RequireJS (http://requirejs.org / ) i ręczne zarządzanie moimi modułami, podobnie jak Mozilla z przykładową aplikacją BrowserQuest ( https://github.com/mozilla/BrowserQuest ). Zwróć uwagę, że wiąże się to z wyzwaniem polegającym na ewentualnym pominięciu modułów takich jak backbone lub underscore, które usunęły obsługę ładowarek modułów AMD style. Możesz znaleźć przykład tego, co jest zaangażowane w shimming tutaj: http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript
Naprawdę wydaje się, że będzie bolało bez względu na wszystko, dlatego natywne wsparcie modułów jest tak gorącym tematem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-07 05:38:42
+1 za korzystanie z Browserify. Używamy go tutaj w diy.org i uwielbiam to. Najlepsze wprowadzenie i uzasadnienie Browserify można znaleźć w podręczniku Browserify. Poruszane są tam takie tematy jak CommonJS i AMD solutions, build pipelines i testing.
Głównym powodem, dla którego Browserify działa tak dobrze, jest przezroczyste działanie w / NPM. Tak długo, jak moduł może być wymagany, może być przeglądany (choć nie wszystkie moduły są przystosowane do pracy w przeglądarka).
Podstawy:
npm install jquery-browserify
Main.js
var $ = require('jquery-browserify');
$("img[attr$='png']").hide();
Następnie uruchom:
browserify main.js > bundle.js
Następnie dołącz bundle.js do dokumentu HTML, a kod w main.js zostanie wykonany.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-20 04:08:14
Nasz zespół posiada narzędzie o nazwie Lineman do budowania projektów front-end. Narzędzie jest oparte na węzłach, więc projekt opiera się na wielu modułach npm, które działają Po stronie serwera, aby zbudować swoje zasoby, ale od razu oczekuje, że znajdzie twoje Po stronie klienta zależności w skopiowanych i zobowiązanych do vendor/js.
Jednak grupa ludzi (w tym ja) próbowała zintegrować się z browserify i napotkaliśmy wiele złożoności i problemów, począwszy od (A) npm Moduły utrzymywane przez stronę trzecią, które są nieaktualne lub dodają niechciane zmiany, do (B) rzeczywistych bibliotek, które zaczynają zawodzić po załadowaniu tradycyjnie, gdy zdefiniowana jest funkcja najwyższego poziomu o nazwie require, ze względu na AMD/Require.bagaż js.
Moim krótkoterminowym zaleceniem jest wstrzymanie się i trzymanie się starej, dobrej konkatenacji scenariusza, dopóki nie opadnie kurz. Dopóki nie będziesz miał problemów na tyle dużych lub na tyle złożonych, aby to uzasadnić, podejrzewam, że wydasz więcej czas debugowania i naprawy kompilacji niż w przeciwnym razie. I myślę, że większość z nas zgadza się, że najlepszym wykorzystaniem twojego czasu jest skupienie się na kodzie aplikacji, a nie na narzędziach do budowania.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-02 19:06:36
Osobiście używam webmake do moich małych projektów. Jest to alternatywa dla browserify, ponieważ wprowadza zależności npm do przeglądarki i jest najwyraźniej lżejszy.
Nie miałem okazji porównywać szczegółowo browserify i webmake, ale zauważyłem, że webmake nie działa dobrze z modułami wewnętrznie używającymi zmiennych globalnych, takich jak socket.io (która I tak jest pełna wzdęć IMO).
Byłbym ostrożny w kwestii RequireJS, który został zalecony powyżej. Ponieważ jest to AMD loader , twoja przeglądarka ładuje pliki JS asynchronicznie. Spowoduje to większą wymianę między Klientem a serwerem i może pogorszyć UX osób przeglądających z sieci komórkowych / pod złym WiFi. Co więcej, jeśli uda Ci się utrzymać prosty i mały kod JS, asynchroniczne ładowanie nie jest absolutnie potrzebne !
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-02 22:04:48
Możesz rzucić okiem na http://jspm.io/ który jest menedżerem pakietów przeglądarki. Ma też dobrą obsługę ES6.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-02 22:35:19