javascript - que - node js tutorial pdf
¿Cómo puedo usar npm para dependencias de front-end? (5)
Quiero preguntar si es posible (y generalmente es una buena idea) usar npm para manejar dependencias de front-end (Backbone, jQuery).
He descubierto que Backbone, jQuery, etc. están disponibles a través de npm, pero tendría que establecer otro punto de extracción (el valor predeterminado es node_modules ) o enlace simbólico o algo más ...
¿Alguien ha hecho esto antes?
¿Es posible?
¿Qué debo cambiar en package.json ?
+1 para usar Browserify. Lo usamos aquí en diy.org y nos encanta. La mejor introducción y razonamiento detrás de Browserify se puede encontrar en el Manual de Browserify . Aquí se tratan temas como CommonJS y soluciones de AMD, creación de tuberías y pruebas.
La razón principal por la cual Browserify funciona tan bien es que funciona de manera transparente con NPM. Siempre que se requiera un módulo, puede ser Browserified (aunque no todos los módulos están diseñados para funcionar en el navegador).
Lo esencial:
npm install jquery-browserify
main.js
var $ = require(''jquery-browserify'');
$("img[attr$=''png'']").hide();
Entonces corre:
browserify main.js > bundle.js
Luego incluya bundle.js en su documento HTML y se ejecutará el código en main.js
Es posible que desee echarle un vistazo a http://jspm.io/ que es un gestor de paquetes del navegador. Tiene un buen soporte para ES6 también.
Nuestro equipo mantiene una herramienta llamada Lineman para construir proyectos frontales. La herramienta está basada en nodos, por lo que un proyecto depende de una gran cantidad de módulos npm que operan en el servidor para construir sus activos, pero listo para usar espera encontrar las dependencias del lado del cliente copiadas y comprometidas con el vendor/js .
Sin embargo, un grupo de personas (yo incluido) han intentado integrarse con browserify, y hemos encontrado una gran cantidad de complejidad y problemas, que van desde (a) módulos de npm que son mantenidos por un tercero que están desactualizados o que agregan cambios no deseados, a (b) bibliotecas reales que comienzan a fallar cuando se cargan tradicionalmente cada vez require se define una función de alto nivel llamada require , debido al equipaje de AMD / Require.js.
Mi recomendación a corto plazo es esperar y mantener la buena concatenación de scripts hasta que el polvo se asiente. Hasta que tenga problemas lo suficientemente grandes o complejos como para justificarlo, sospecho que pasará más tiempo depurando y remediando su construcción de lo que lo haría de otra manera. Y creo que la mayoría de nosotros estamos de acuerdo en que el mejor uso de su tiempo es centrarse en su código de aplicación, no en sus herramientas de compilación.
Respuesta corta: más o menos.
En gran medida depende del autor del módulo apoyar esto, pero no es común. Socket.io es un ejemplo de dicho módulo de soporte, como se demuestra en su página de inicio. Sin embargo, hay otras soluciones. Estos son los dos de los que realmente sé algo:
- http://ender.no.de/ - Ender JS, autodescrito análogo de NPM para módulos de clientes. Un poco demasiado complicado para mi gusto.
- https://github.com/substack/node-browserify - Browserify, una utilidad que recorrerá sus dependencias y le permitirá generar un solo script emulando el patrón del módulo node.js. Puedes usar un script jake | cake | rake | make para escupir tu application.js, e incluso automatizarla si quieres ser elegante. Lo usé brevemente, pero decidí que era un poco torpe, y me molesté en depurarlo. Además, no todos los módulos npm de doble ambiente gustan de ejecutarse a través de browserify.
Personalmente, actualmente estoy optando por usar RequireJS ( http://requirejs.org/ ) y administrar mis módulos manualmente, de forma similar a cómo lo hace Mozilla con su aplicación de ejemplo BrowserQuest ( https://github.com/mozilla/BrowserQuest ). Tenga en cuenta que esto viene con el desafío de tener que calzar potencialmente los módulos como la red troncal o el guión bajo que eliminó la compatibilidad con los cargadores de módulos de estilo AMD. Puede encontrar un ejemplo de lo que implica el uso de shimming aquí: http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript
Realmente parece que va a doler, pase lo que pase, por eso el soporte de módulos nativos es un tema candente.
Yo personalmente uso webmake para mis pequeños proyectos. Es una alternativa para browserify en la forma en que trae dependencias npm en su navegador, y es aparentemente más ligero.
No tuve la oportunidad de comparar en los detalles browserify y webmake, pero noté que webmake no funciona bien con los módulos internamente usando variables globales como socket.io (que está lleno de bloat de todos modos IMO).
Sería cauteloso con RequireJS, que se ha recomendado anteriormente. Debido a que es un cargador AMD , su navegador cargará sus archivos JS de forma asíncrona. Inducirá más intercambios entre su cliente y servidor y puede degradar el UX de personas que navegan desde redes móviles / bajo WiFi malo. Además, si consigues mantener tu código JS simple y pequeño, ¡la carga asíncrona no es absolutamente necesaria!