javascript - proyecto - node js tutorial pdf

¿Cómo administrar las dependencias de JavaScript del lado del cliente?

Question

Aunque existen excelentes soluciones para administrar dependencias en el lado del servidor, no pude encontrar ninguna que satisfaga todas mis necesidades para tener un flujo de trabajo coherente de administración de dependencias de JavaScript del lado del cliente. Quiero satisfacer estos 5 requisitos:

1. Administrar mis dependencias del lado del cliente en un formato similar al paquete de npm. Json o bower.json ''s bower.json
2. Debe tener la flexibilidad para apuntar a git repo o archivos js reales (ya sea en la web o localmente) en mi archivo dependency.json para bibliotecas menos conocidas (npm le permite señalar git repos)
3. Debe minificar y namespace todas las bibliotecas en un solo archivo como ender - ese es el único archivo js que necesitaría poner en mi etiqueta <script> en el lado del cliente
4. Debería tener soporte fuera de la caja para CoffeeScript como BoxJS 4 (ahora muerto)

5. En el navegador, debería poder usar cualquiera de require dos estilos:

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

   O mejor aún, haz el estilo headjs :

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

Si no existe tal herramienta única, ¿cuál es la mejor combinación de herramientas, es decir, una cadena de herramientas que puedo combinar usando algo como volo (o grunt )?

Ya investigué todas las herramientas a las que me he vinculado aquí y solo satisfacen hasta 3 de mis requisitos de forma individual. Por lo tanto, no vuelvas a publicar sobre estas herramientas. Solo aceptaría una respuesta que proporcione una sola herramienta que satisfaga todos mis 5 requisitos o si alguien publica un flujo de trabajo concreto / script / ejemplo de trabajo de una cadena de herramientas múltiples que también satisfaga todos mis requisitos. Gracias.

Answer 1

Aquí hay una solución que adopta un enfoque muy diferente: empaquetar todos los módulos en un objeto JSON y requerir módulos leyendo y ejecutando el contenido del archivo sin solicitudes adicionales.

Implementación de demostración en el cliente puro: http://strd6.github.io/editor/

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

STRd6 / require depende de tener un paquete JSON disponible en tiempo de ejecución. La función require se genera para ese paquete. El paquete contiene todos los archivos que su aplicación podría requerir. No se realizan más solicitudes de HTTP porque el paquete agrupa todas las dependencias. Esto es lo más cercano que se puede llegar al estilo Node.js requerido en el cliente.

La estructura del paquete es la siguiente:

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

A diferencia de Node, un paquete no sabe su nombre externo. Depende del pacakge, incluida la dependencia, nombrarlo. Esto proporciona una encapsulación completa.

Dada toda esa configuración, aquí hay una función que carga un archivo desde un paquete:

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

Este contexto externo proporciona alguna variable a la que los módulos tienen acceso.

Una función de require está expuesta a los módulos, por lo que pueden requerir otros módulos.

Las propiedades adicionales como una referencia al objeto global y algunos metadatos también están expuestos.

Finalmente ejecutamos el programa dentro del módulo y el contexto dado.

Esta respuesta será más útil para aquellos que deseen tener un estilo synchronous node.js require statement en el navegador y no estén interesados ​​en las soluciones de carga de scripts remotos.

Answer 2

Bueno, estoy sorprendido de que nadie haya mencionado Browserify todavía.

1. admite el formato package.json
2. usa npm debajo que puede usar un repo github (o cualquier git) como fuente de paquete
3. minimiza y concatena todas las dependencias en un solo archivo.
4. admite coffeescript si lo incluye en sus dependencias
5. requiere estilo todo el camino.
6. admite mapas fuente

Answer 3

Como @ Guillaume86, creo que él te llevará más cerca de donde quieres estar.

En las dependencias de hem se administran usando una combinación de npm y hem. Use npm para instalar explícitamente todas las dependencias externas de sus proyectos. Use hem para especificar qué dependencias (tanto externas como locales) deben coserse juntas para las operaciones del lado del cliente.

Creé un proyecto esquemático de esto para que pueda ver cómo funcionaría esto: puede verlo en https://github.com/dsummersl/clientsidehem

Agregar dependencias

Use npm para buscar una dependencia específica y luego modifique el archivo package.json para asegurarse de que la dependencia se rastrea en el futuro. Luego, especifique la dependencia de su aplicación en slug.json.

Por ejemplo, supongamos que desea agregar la dependencia de script de café. Simplemente use npm para instalar la dependencia y guárdela en su archivo package.json:

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

Supongamos que quiere incluir su propio módulo ''bloomfilters'' y no estaba en el registro npm. Puede agregarlo a su proyecto de la siguiente manera:

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

Módulos locales

Si desea incluir su propio café o javascript, puede hacerlo agregando esos archivos a la aplicación / carpeta. Tenga en cuenta que para exponer su script mediante el método ''require'' debe hacerlo un módulo CommonJS. Es muy simple: mira los dobladillos .

Archivos locales

Si desea incluir un código que no sea ''necesario'' de CommonJS, también puede suturarlo haciendo referencia a su javascript personalizado o coffeescript a través de la lista ''libs'' en slug.json.

CSS

Hem también unirá su CSS, si lo desea. Ver los doc documentos .

edificio

Una vez que tenga sus dependencias en la lista, puede usar el dobladillo para unirlas todas juntas.

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

Notas

Hem estaba destinado para el proyecto spinejs , pero no es necesario que lo uses para eso. Ignora cualquier documento que mencione la columna vertebral como desees ...

Answer 4

Consulte cartero si usa node / express en el back-end.

Answer 5

Es posible que desee echar un vistazo a yeoman.io , que utiliza varias técnicas para ayudarlo con sus necesidades.

Nuestro flujo de trabajo se compone de tres herramientas para mejorar su productividad y satisfacción al construir una aplicación web: yo (la herramienta de andamios), grunt (la herramienta de construcción) y bower (para la administración de paquetes).

Soporte integrado para CoffeeScript, Compass y más. Funciona con r.js ( RequireJS ), pruebas RequireJS , etc.

En cuanto a sus requisitos:

1. Bower se usa para la administración de dependencias
2. Bower puede trabajar con archivos locales, git: //, http: // y más
3. Soporte integrado para minificación y concatenación (incluso para sus imágenes)
4. Soporte integrado para compilar automáticamente CoffeeScript & Compass (con LiveReload)
5. Como se indica en el proceso de compilación: si está usando AMD, pasaré esos módulos a través de r.js para que no tenga que hacerlo.

Todas las características:

Andamio rapidísimo: andamia fácilmente nuevos proyectos con plantillas personalizables (por ejemplo, HTML5 Boilerplate, Twitter Bootstrap), RequireJS y más.

Gran proceso de compilación : no solo obtienes minificación y concatenación; También optimizo todos tus archivos de imagen, HTML, compilo tus archivos de CoffeeScript y Compass, si estás usando AMD, pasaré esos módulos a través de r.js para que no tengas que hacerlo.

Compila automáticamente CoffeeScript & Compass : nuestro proceso de visualización LiveReload compila automáticamente los archivos fuente y actualiza tu navegador cada vez que se realiza un cambio para que no tengas que hacerlo.

Perfecciona automáticamente tus scripts : todos tus scripts se ejecutan automáticamente en JSHint para garantizar que sigan las mejores prácticas de idioma.

Servidor de vista previa incorporado : ya no tendrá que iniciar su propio servidor HTTP. Mi built-in uno puede dispararse con solo un comando.

Optimización impresionante de imágenes: optimizo todas tus imágenes usando OptiPNG y JPEGTran para que tus usuarios puedan perder menos tiempo descargando activos y más tiempo usando tu aplicación.

Gestión de paquetes Killer : ¿necesita una dependencia? Solo está a una tecla de distancia. Le permito buscar fácilmente paquetes nuevos a través de la línea de comandos (por ejemplo, `bower search jquery), instalarlos y mantenerlos actualizados sin necesidad de abrir su navegador.

Pruebas unitarias PhantomJS : ejecute fácilmente las pruebas de su unidad en WebKit sin cabezales a través de PhantomJS. Cuando crea una nueva aplicación, también incluyo algunos andamios de prueba para su aplicación.

Answer 6

Estoy bastante seguro de que Hem cumple con tus requisitos (utilizo un tenedor personal con compiladores adicionales, jade y stylus, es fácil de personalizar según tus necesidades). Utiliza npm para gestionar las dependencias.

Answer 7

Hay un par de opciones:

• http://browserify.org/ que te permite importar módulos
• require aborda el mismo problema
• Uno que parece estar en desarrollo activo es JoinJS

Component también puede ser de interés, no administra dependencias per se, pero le permite usar versiones fragmentadas de bibliotecas que de otro modo serían grandes.

Answer 8

Me encontré con inject.js

Algunas de las características, desde el inject.js :

Inject (Apache Software License 2.0) es una forma revolucionaria de administrar sus dependencias de una manera Agnóstica de la Biblioteca. Algunas de sus principales características incluyen:

• Cumplimiento de CommonJS en el navegador (exportaciones. *)
• Ver la matriz de soporte de CommonJS completa
• Recuperación entre dominios de archivos (a través de easyXDM)
• localStorage (cargar un módulo una vez)

Answer 9

Mira el administrador de paquetes Jam . A continuación está la descripción de su página de inicio

Para desarrolladores front-end que desean activos mantenibles, Jam es un administrador de paquetes para JavaScript. A diferencia de otros repositorios, ponemos el navegador primero.

Parece muy similar a npm en cómo funciona.

Instale el paquete como a continuación

jam install backbone

manteniendo los paquetes actualizados al ejecutar

jam upgrade
jam upgrade {package} 

Optimizar paquetes para producción

jam compile compiled.min.js

Las dependencias de Jam se pueden agregar en el archivo package.json .

Para obtener la documentación completa, lea la documentación de Jam.

Answer 10

Otro marco que satisface todos mis criterios publicados recientemente: http://duojs.org/ (y también admite el tratamiento de otros recursos como CSS como dependencias).

Answer 11

Sugiero que revises el kit de herramientas de dojo que parece cumplir con la mayoría de tus requisitos. De lo que no estoy seguro es de CoffeeScript.

dojo funciona con módulos escritos en el formato de definición de módulo asíncrono (AMD). Tiene un sistema de compilación con paquetes y puede agregarlos en uno o varios archivos (llamados capas). Aparentemente acepta repositorios tipo git, más detalles sobre el sistema de compilación aquí:

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

Para el registro, v1.9 beta se espera el próximo mes.

Answer 12

Uso dobladillo con npm, y quería agregar algunos beneficios adicionales que creo que no fueron cubiertos hasta ahora.

• Hem tiene un servidor web autónomo (estratos) para que pueda desarrollar su código sin necesidad de volver a compilarlo. Nunca uso hem build menos que publique una aplicación.
• No necesita usar Spine.js para usar hem, puede usarlo para compilar paquetes de coffeescript arbitrarios si configura slug.json correctamente. Este es uno de mis paquetes que se compila automáticamente con CakeFile: https://github.com/HarvardEconCS/TurkServer/tree/master/turkserver-js-client
• Hablando de lo anterior, el dobladillo te permite vincular otras dependencias en tu sistema local con el enlace npm y las combina a la perfección incluso cuando utilizas el servidor de estratos. De hecho, ni siquiera necesita utilizar el método de cake anterior, solo puede vincular directamente a coffeescript de proyectos dependientes.
• Hem admite eco (Coffeescript incorporado) para vistas y Stylus para CSS, y compila todo eso, junto con su Coffeescript, en un archivo JS y un archivo CSS.

Aquí hay una lista básica para configurarlo con una aplicación Spine, hem, coffeescript. Siéntase libre de ignorar las partes de la columna vertebral. De hecho, a veces uso la spine app para configurar una estructura de directorios para una aplicación que no es de Spine, luego edito slug.json para cambiar a una estructura de compilación diferente.

1. Instalar NPM: curl http://npmjs.org/install.sh | sh curl http://npmjs.org/install.sh | sh en un sistema * nix. Asumiré que está disponible desde la línea de comando.
2. Instale el dobladillo en forma global ( npm install -g hem ). El desarrollo se ha ampliado últimamente, por lo que es posible que desee obtenerlo directamente de github ( Hem ), npm install -g . una sucursal e npm install -g . en esa carpeta.
3. npm install -g spine.app hará que spine esté disponible como un comando global
4. spine app folder creará un proyecto de Spine llamado app en la folder , generando la estructura de directorios correcta y un grupo de archivos de esqueleto para comenzar.
5. cd a la carpeta y edite dependencies.json para las bibliotecas que necesita. slug.json a slug.json para que él sepa dónde encontrarlos también.
6. Opcional: npm link cualquiera de tus paquetes locales en desarrollo a node_modules , y puedes agregarlos a slug.json for hem (un index.js para incluir directamente o un index.coffee si quieres que hem lo compile).
7. npm install . para descargar todas las dependencias que acaba de ingresar

8. Si echas un vistazo a la configuración predeterminada de spine, hay una app/lib/setup.coffee donde require todas las bibliotecas que necesitas de tus dependencias. Ejemplos:

   # 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. En index.coffee , solo require lib/setup y carga el controlador principal para su aplicación. Además, necesita require cualquier otra clase en esos otros controladores. Puede usar spine controller something o spine model something para generar plantillas para controladores y modelos. El controlador típico de Spine tiene el siguiente aspecto, utilizando los require del nodo:

   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. El index.html generado por defecto generalmente estará bien para cargar su aplicación, pero modifíquelo según sea necesario. Según sus requisitos, solo extrae un archivo js y un archivo css , que nunca necesitará modificar.

11. Edite sus archivos de lápiz según sea necesario en la carpeta css . Es mucho más flexible que CSS :)
12. Desde la folder , ejecute el hem server para iniciar un servidor de dobladillo, y navegue a localhost:9294 para ver su aplicación. (Si instaló dobladillo globalmente). Tiene algunos argumentos ocultos, por ejemplo --host 0.0.0.0 escucha en todos los puertos.
13. Construya el resto de su aplicación usando las técnicas MVC apropiadas, y use stylus para CSS y eco para obtener vistas. O no use Spine para nada, y él funcionará perfectamente con Coffeescript y npm. Hay muchos ejemplos de proyectos que usan ambos modelos.

Una cosa más: normalmente, el hem server se actualizará automáticamente a medida que actualice su código y guarde los archivos, lo que hace que sea muy fácil depurarlo. Ejecutando hem build compilará su aplicación en dos archivos, application.js , que es minified y application.css . Si ejecuta el hem server después de esto, usará esos archivos y ya no se actualizará automáticamente. Entonces, no hem build hasta que realmente necesites una versión reducida de tu aplicación para su implementación.

Referencias adicionales: Spine.js & hem getting started

Answer 13

la inyección de dependencia con carga asincrónica + browserify será otra buena opción, se compara con requirejs

asynchronous-frontend-dependency-management-without-AMD

Answer 14

require hace todo lo que necesitas.

Mi respuesta a this pregunta puede ayudarte

Ejemplo:

Jerarquía de proyecto de aplicación cliente:

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

main.js es donde inicializa su aplicación cliente y configura 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
});

Dependencias utilizará el complemento cs cuando se anteponga por "cs!". El plugin cs compila el archivo coffeescript.

Cuando ingrese prod, puede r.js todo su proyecto con r.js

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

Aquí están sus requisitos:

• Administrar mis dependencias del lado del cliente en un formato similar al paquete.json de npm o al componente.json de bower. ¡Diferente pero TAN BUENO!

• Debería tener la flexibilidad para apuntar a git repo o archivos js reales (ya sea en la web o localmente) en mi archivo dependency.json para bibliotecas menos conocidas (npm vamos a apuntar a git repos). SÍ

• Debería minificar y nombrar todas las bibliotecas en un solo archivo como ender: ese es el único archivo js que necesitaría poner en mi script-tag en el lado del cliente. SÍ con r.js.

• Debería tener soporte fuera de la caja para coffeescript como Box. SÍ

• En el navegador puedo usar require style o headjs. SÍ

Answer 15

require es el que estás buscando creo

Answer 16

Bower puede adaptarse a sus necesidades (1) y (2) para el resto que necesita. Del archivo léame:

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.

Para instalar un paquete:

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