NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Estoy tratando de resumir mi conocimiento sobre los gestores de paquetes, paquetes y corredores de tareas de JavaScript más populares. Por favor corrígeme si estoy equivocado:

• npm& bowerson administradores de paquetes. Simplemente descargan las dependencias y no saben cómo construir proyectos por su cuenta. Lo que saben es llamar a webpack/ gulp/ gruntdespués de buscar todas las dependencias.
• boweres como npm, pero construye unos árboles de dependencia aplanados (a diferencia de npmlo que lo hace recursivamente). El significado npmrecupera las dependencias para cada dependencia (puede obtener las mismas varias veces), mientras bowerespera que incluya manualmente las subdependencias. A veces, bowery npmse usan juntos para el front-end y el back-end respectivamente (ya que cada megabyte podría importar en el front-end).
• grunty gulpson corredores de tareas para automatizar todo lo que se puede automatizar (es decir, compilar CSS / Sass, optimizar imágenes, hacer un paquete y minificarlo / transpilarlo).
• gruntvs. gulp(es como mavenvs. gradleo configuración vs. código). Grunt se basa en la configuración de tareas independientes separadas, cada tarea abre / maneja / cierra el archivo. Gulp requiere menos cantidad de código y se basa en flujos de Nodo, lo que le permite construir cadenas de tuberías (sin volver a abrir el mismo archivo) y lo hace más rápido.
• webpack( webpack-dev-server) - para mí es un corredor de tareas con recarga de cambios en caliente que le permite olvidarse de todos los observadores JS / CSS.
• npmLos bowercomplementos / + pueden reemplazar a los corredores de tareas. Sus habilidades a menudo se cruzan, por lo que hay diferentes implicaciones si necesita usar gulp/ gruntover npm+ plugins. Pero los corredores de tareas son definitivamente mejores para tareas complejas (por ejemplo, "en cada paquete de creación de compilación, transpilar de ES6 a ES5, ejecutarlo en todos los emuladores de navegadores, hacer capturas de pantalla e implementar en Dropbox a través de ftp").
• browserifypermite empaquetar módulos de nodo para navegadores. browserifyvs node's requirees realmente AMD vs CommonJS .

Preguntas:

1. ¿Qué es webpacky webpack-dev-server? La documentación oficial dice que es un paquete de módulos, pero para mí es solo un corredor de tareas. ¿Cual es la diferencia?
2. ¿Dónde lo usarías browserify? ¿No podemos hacer lo mismo con las importaciones de nodo / ES6?
3. ¿Cuándo usarías gulp/ gruntover npm+ plugins?
4. Proporcione ejemplos cuando necesite usar una combinación

Webpack y Browserify

Webpack y Browserify hacen casi el mismo trabajo, que es procesar su código para usarlo en un entorno de destino (principalmente el navegador, aunque puede dirigirse a otros entornos como Node). El resultado de dicho procesamiento es uno o más paquetes : scripts ensamblados adecuados para el entorno objetivo.

Por ejemplo, supongamos que escribió el código ES6 dividido en módulos y desea poder ejecutarlo en un navegador. Si esos módulos son módulos Node, el navegador no los comprenderá, ya que existen solo en el entorno Node. Los módulos ES6 tampoco funcionarán en navegadores antiguos como IE11. Además, es posible que haya utilizado funciones de lenguaje experimental (próximas propuestas de ES) que los navegadores aún no implementan, por lo que ejecutar dicho script solo arrojaría errores. Herramientas como Webpack y Browserify resuelven estos problemas traduciendo dicho código a un formulario que un navegador pueda ejecutar . Además de eso, hacen posible aplicar una gran variedad de optimizaciones en esos paquetes.

Sin embargo, Webpack y Browserify difieren de muchas maneras, Webpack ofrece muchas herramientas por defecto (por ejemplo, división de código), mientras que Browserify puede hacer esto solo después de descargar complementos, pero el uso de ambos conduce a resultados muy similares . Se trata de preferencias personales (Webpack es más moderno). Por cierto, Webpack no es un corredor de tareas, es solo un procesador de sus archivos (los procesa mediante los llamados cargadores y complementos) y puede ser ejecutado (entre otras formas) por un corredor de tareas.

Servidor de desarrollo webpack

Webpack Dev Server ofrece una solución similar a Browsersync: un servidor de desarrollo donde puede implementar su aplicación rápidamente mientras trabaja en ella y verificar su progreso de desarrollo de inmediato, con el servidor de desarrollo que actualiza automáticamente el navegador en los cambios de código o incluso propaga el código modificado al navegador sin recargar con el llamado reemplazo de módulo activo.

Corredores de tareas vs scripts NPM

He estado usando Gulp por su concisión y tarea fácil de escribir, pero luego descubrí que no necesito ni a Gulp ni a Grunt. Todo lo que siempre he necesitado podría haberse hecho usando scripts NPM para ejecutar herramientas de terceros a través de su API. Elegir entre guiones Gulp, Grunt o NPM depende del gusto y la experiencia de su equipo.

Si bien las tareas en Gulp o Grunt son fáciles de leer incluso para personas que no están tan familiarizadas con JS, es una herramienta más para requerir y aprender, y personalmente prefiero reducir mis dependencias y simplificar las cosas. Por otro lado, reemplazar estas tareas con la combinación de secuencias de comandos NPM y secuencias de comandos (probablemente JS) que ejecutan esas herramientas de terceros (por ejemplo, configuración de secuencias de comandos de nodo y ejecución de rimraf para fines de limpieza) podría ser más difícil. Pero en la mayoría de los casos, esos tres son iguales en términos de sus resultados.

Ejemplos

En cuanto a los ejemplos, le sugiero que eche un vistazo a este proyecto de inicio React , que le muestra una buena combinación de secuencias de comandos NPM y JS que cubren todo el proceso de construcción e implementación. Puede encontrar esos scripts NPM package.jsonen la carpeta raíz, en una propiedad llamada scripts. Allí encontrarás principalmente comandos como babel-node tools/run start. Babel-node es una herramienta CLI (no pensada para uso de producción), que al principio compila el archivo ES6 tools/run(archivo run.js ubicado en las herramientas ), básicamente una utilidad de corredor. Este corredor toma una función como argumento y la ejecuta, que en este caso es startotra utilidad (start.js) responsable de agrupar los archivos de origen (tanto del cliente como del servidor) e iniciar la aplicación y el servidor de desarrollo (el servidor de desarrollo probablemente sea Webpack Dev Server o Browsersync).

Hablando con mayor precisión, start.jscrea paquetes del lado del cliente y del servidor, inicia un servidor express y después de un lanzamiento exitoso inicializa la sincronización del navegador, que en el momento de la escritura se veía así (consulte el proyecto de inicio de reacción para el código más nuevo).

const bs = Browsersync.create();  
bs.init({
      ...(DEBUG ? {} : { notify: false, ui: false }),

      proxy: {
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      },

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
}, resolve)

La parte importante es proxy.target, donde establecen la dirección del servidor que desean proxy, que podría ser http: // localhost: 3000 , y Browsersync inicia un servidor que escucha en http: // localhost: 3001 , donde los activos generados se sirven con cambio automático detección y reemplazo de módulos calientes. Como puede ver, hay otra propiedad de configuración filescon archivos o patrones individuales. La sincronización del navegador busca cambios y recarga el navegador si ocurre algo, pero como dice el comentario, Webpack se encarga de ver las fuentes js por sí solo con HMR, por lo que cooperan allí.

Ahora no tengo ningún ejemplo equivalente de esa configuración Grunt o Gulp, pero con Gulp (y algo similar con Grunt) escribiría tareas individuales en gulpfile.js como

gulp.task('bundle', function() {
  // bundling source files with some gulp plugins like gulp-webpack maybe
});

gulp.task('start', function() {
  // starting server and stuff
});

donde estaría haciendo prácticamente las mismas cosas que en el kit de inicio, esta vez con el corredor de tareas, que resuelve algunos problemas para usted, pero presenta sus propios problemas y algunas dificultades durante el aprendizaje del uso, y como digo, el Cuantas más dependencias tenga, más puede salir mal. Y esa es la razón por la que me gusta deshacerme de esas herramientas.

Actualización octubre 2018

Si aún no está seguro sobre el desarrollo de Front-end, puede echar un vistazo rápido a un excelente recurso aquí.

https://github.com/kamranahmedse/developer-roadmap

Actualización junio 2018

Aprender JavaScript moderno es difícil si no has estado allí desde el principio. Si eres el recién llegado, recuerda revisar este excelente escrito para tener una mejor visión general.

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

Actualización de julio de 2017

Recientemente encontré una guía realmente completa del equipo de Grab sobre cómo abordar el desarrollo front-end en 2017. Puede consultarlo a continuación.

https://github.com/grab/front-end-guide

También he estado buscando esto desde hace bastante tiempo, ya que hay muchas herramientas disponibles y cada una de ellas nos beneficia en un aspecto diferente. La comunidad está dividida en herramientas como Browserify, Webpack, jspm, Grunt and Gulp. También puede escuchar sobre Yeoman or Slush. Eso no es realmente un problema, es confuso para todos los que intentan entender un camino claro hacia adelante.

De todos modos, me gustaría contribuir con algo.

1. Administrador de paquetes

Los administradores de paquetes simplifican la instalación y actualización de las dependencias del proyecto, que son bibliotecas como:, jQuery, Bootstrapetc., todo lo que se usa en su sitio y no está escrito por usted.

Navegando por todos los sitios web de la biblioteca, descargando y desempacando los archivos, copiando archivos en los proyectos, todo esto se reemplaza con algunos comandos en el terminal.

• NPMsignifica: lo Node JS package managerayuda a administrar todas las bibliotecas en las que se basa su software. Definiría sus necesidades en un archivo llamado package.jsony ejecutado npm installen la línea de comando ... luego BANG, sus paquetes están descargados y listos para usar. Podría usarse tanto para front-end and back-endbibliotecas.

• Bower: para la gestión de paquetes front-end, el concepto es el mismo con NPM. Todas sus bibliotecas se almacenan en un archivo llamado bower.jsony luego se ejecutan bower installen la línea de comando.

La mayor diferencia entre Bowery NPMes que NPM hace un árbol de dependencia anidado, mientras que Bower requiere un árbol de dependencia plano como se muestra a continuación.

Citando de ¿Cuál es la diferencia entre Bower y npm?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

Cenador

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

Hay algunas actualizaciones sobre npm 3 Duplication and Deduplication, abra el documento para obtener más detalles.

• Yarn: Un nuevo administrador de paquetes JavaScript publicadoFacebook recientemente por con algunas ventajas más en comparación con NPM. Y con Yarn, aún puede usar ambos NPMy el Bowerregistro para obtener el paquete. Si ha instalado un paquete anteriormente, yarncrea una copia en caché que facilita offline package installs.

• jspm: es un administrador de paquetes para el SystemJScargador de módulos universal, construido sobre el ES6cargador de módulos dinámico . No es un administrador de paquetes completamente nuevo con su propio conjunto de reglas, sino que funciona sobre las fuentes de paquetes existentes. Fuera de la caja, funciona con GitHuby npm. Como la mayoría de los Bowerpaquetes basados ​​se basan GitHub, también podemos instalar esos paquetes jspm. Tiene un registro que enumera la mayoría de los paquetes front-end comúnmente utilizados para una instalación más fácil.

Vea la diferencia entre Bowery jspm: Administrador de paquetes: Bower vs jspm

2. Módulo cargador / agrupación

La mayoría de los proyectos de cualquier escala tendrán su código dividido entre varios archivos. Solo puede incluir cada archivo con una <script>etiqueta individual , sin embargo, <script>establece una nueva conexión http, y para archivos pequeños, que es un objetivo de modularidad, el tiempo para configurar la conexión puede llevar mucho más tiempo que la transferencia de datos. Mientras se descargan los scripts, no se puede cambiar el contenido de la página.

• El problema del tiempo de descarga puede resolverse en gran medida concatenando un grupo de módulos simples en un solo archivo y minimizándolo.

P.ej

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

• Sin embargo, el rendimiento viene a expensas de la flexibilidad. Si sus módulos tienen interdependencia, esta falta de flexibilidad puede ser un éxito espectacular.

P.ej

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

Las computadoras pueden hacerlo mejor que tú, y es por eso que debes usar una herramienta para agrupar automáticamente todo en un solo archivo.

Entonces oímos acerca de RequireJS, Browserify, WebpackySystemJS

• RequireJS: es un JavaScriptcargador de archivos y módulos. Está optimizado para el uso en el navegador, pero se puede usar en otros entornos JavaScript, como Node.

Por ejemplo: myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

En main.js, podemos importar myModule.jscomo dependencia y usarlo.

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Y luego en nuestro HTML, podemos referirnos al uso con RequireJS.

<script src=“app/require.js” data-main=“main.js” ></script>

Lea más sobre CommonJSy AMDpara comprender fácilmente. Relación entre CommonJS, AMD y RequireJS?

• Browserify: establecido para permitir el uso de CommonJSmódulos formateados en el navegador. En consecuencia, Browserifyno es tanto un cargador de módulos como un paquete de módulos: Browserifyes una herramienta de tiempo de construcción que produce un paquete de código que luego puede cargarse en el lado del cliente.

Comience con una máquina de compilación que tenga instalados node & npm y obtenga el paquete:

npm install -g –save-dev browserify

Escribe tus módulos en CommonJSformato

//entry-point.js
var foo = require('../foo.js');
console.log(foo(4));

Y cuando esté contento, emita el comando para agrupar:

browserify entry-point.js -o bundle-name.js

Browserify encuentra recursivamente todas las dependencias del punto de entrada y las ensambla en un solo archivo:

<script src=”bundle-name.js”></script>

• Webpack: Agrupa todos sus activos estáticos, incluidas JavaScriptimágenes, CSS y más, en un solo archivo. También le permite procesar los archivos a través de diferentes tipos de cargadores. Podrías escribir tu JavaScriptcon CommonJSo AMDsintaxis de módulos. Ataca el problema de compilación de una manera fundamentalmente más integrada y obstinada. En el Browserifyuso Gulp/Grunty una larga lista de transformaciones y complementos para hacer el trabajo. Webpackofrece suficiente potencia fuera de la caja que normalmente no necesita Grunto no necesita Gulp.

El uso básico es más que simple. Instale Webpack como Browserify:

npm install -g –save-dev webpack

Y pase el comando un punto de entrada y un archivo de salida:

webpack ./entry-point.js bundle-name.js

• SystemJS: es un cargador de módulos que puede importar módulos en tiempo de ejecución en cualquiera de los formatos populares utilizados hoy en día ( CommonJS, UMD, AMD, ES6). Está construido en la parte superior del ES6cargador de módulos polyfill y es lo suficientemente inteligente como para detectar el formato que se utiliza y manejarlo adecuadamente. SystemJSTambién puede transpilar el código ES6 (con Babelo Traceur) u otros idiomas, como TypeScripty CoffeeScriptutilizando complementos.

Quiere saber qué es node moduley por qué no está bien adaptado al navegador.

Artículo más útil:

• https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4
• http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/
• https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

¿Por qué jspmy SystemJS?

Uno de los principales objetivos de ES6 la modularidad es hacer que sea muy simple de instalar y utilizar cualquier librería Javascript desde cualquier lugar en Internet ( Github, npm, etc.). Solo se necesitan dos cosas:

• Un solo comando para instalar la biblioteca
• Una sola línea de código para importar la biblioteca y usarla

Entonces con jspm , puedes hacerlo.

1. Instale la biblioteca con un comando: jspm install jquery
2. Importe la biblioteca con una sola línea de código, sin necesidad de referencias externas dentro de su archivo HTML.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");

3. Luego configura estas cosas System.config({ ... })antes de importar su módulo. Normalmente cuando se ejecuta jspm init, habrá un archivo llamado config.jspara este propósito.

4. Para ejecutar estos scripts, necesitamos cargar system.jsy config.jsen la página HTML. Después de eso, cargaremos el display.jsarchivo usando el SystemJScargador de módulos.

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Nota: también se puede usar npmcon WebpackAngular 2 como lo ha aplicado. Dado que jspmfue desarrollado para integrarse SystemJSy funciona sobre la npmfuente existente , su respuesta depende de usted.

3. Corredor de tareas

Los corredores de tareas y las herramientas de compilación son principalmente herramientas de línea de comandos. Por qué necesitamos usarlos: en una palabra: automatización . Cuanto menos trabajo tenga que hacer al realizar tareas repetitivas como minificación, compilación, pruebas unitarias, linting, que anteriormente nos costó muchas veces hacer con la línea de comandos o incluso manualmente.

• Grunt: Puede crear automatización para su entorno de desarrollo para preprocesar códigos o crear scripts de compilación con un archivo de configuración y parece muy difícil manejar una tarea compleja. Popular en los últimos años.

Cada tarea Gruntes un conjunto de configuraciones de complementos diferentes, que simplemente se ejecutan una tras otra, de forma estrictamente independiente y secuencial.

grunt.initConfig({
  clean: {
    src: ['build/app.js', 'build/vendor.js']
  },

  copy: {
    files: [{
      src: 'build/app.js',
      dest: 'build/dist/app.js'
    }]
  }

  concat: {
    'build/app.js': ['build/vendors.js', 'build/app.js']
  }

  // ... other task configurations ...

});

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

• Gulp: Automatización igual que, Gruntpero en lugar de configuraciones, puede escribir JavaScriptcon secuencias como si fuera una aplicación de nodo. Prefiero estos días.

Esta es una Gulpdeclaración de tarea de muestra.

//import the necessary gulp plugins
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');

//declare the task
gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

Ver más: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4. Herramientas de andamios

• Slush and Yeoman: Puede crear proyectos iniciales con ellos. Por ejemplo, planea construir un prototipo con HTML y SCSS, luego, en lugar de crear manualmente una carpeta como scss, css, img, fonts. Simplemente puede instalar yeomany ejecutar un script simple. Entonces todo aquí para ti.

Encuentra más aquí .

npm install -g yo
npm install --global generator-h5bp
yo h5bp

Ver más: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

Mi respuesta no coincide con el contenido de la pregunta, pero cuando busco estos conocimientos en Google, siempre veo la pregunta en la parte superior, así que decidí responderla en resumen. Espero que les haya resultado útil.

OK, todos tienen algunas similitudes, hacen lo mismo por ti de maneras diferentes y similares, los divido en 3 grupos principales de la siguiente manera:

webpack y browserify como populares, funcionan como corredores de tareas, pero con más flexibilidad, también agruparán todo como su configuración, por lo que puede señalar el resultado como bundle.js, por ejemplo, en un solo archivo que incluye CSS y Javascript, para más detalles de cada uno, mira los detalles a continuación:

paquete web

webpack es un paquete de módulos para aplicaciones JavaScript modernas. Cuando webpack procesa su aplicación, construye recursivamente un gráfico de dependencia que incluye todos los módulos que su aplicación necesita, luego empaqueta todos esos módulos en una pequeña cantidad de paquetes, a menudo solo uno, para que el navegador los cargue.

Es increíblemente configurable, pero para comenzar solo necesita comprender Cuatro conceptos básicos: entrada, salida, cargadores y complementos.

El objetivo de este documento es proporcionar una visión general de alto nivel de estos conceptos, a la vez que proporciona enlaces a casos de uso específicos de conceptos detallados.

mas aqui

browserify

Browserify es una herramienta de desarrollo que nos permite escribir módulos de estilo node.js que se compilan para su uso en el navegador. Al igual que el nodo, escribimos nuestros módulos en archivos separados, exportando métodos y propiedades externas utilizando las variables module.exports y export. Incluso podemos requerir otros módulos usando la función require, y si omitimos la ruta relativa, se resolverá en el módulo en el directorio node_modules.

mas aqui

2) corredores de tareas

gulp and gruñido son corredores de tareas, básicamente lo que hacen, creando tareas y ejecutándolas cuando lo desee, por ejemplo, instala un complemento para minimizar su CSS y luego lo ejecuta cada vez que lo hace, más detalles sobre cada uno:

trago

gulp.js es un kit de herramientas JavaScript de código abierto de Fractal Innovations y la comunidad de código abierto de GitHub, que se utiliza como un sistema de compilación de transmisión en el desarrollo web front-end. Es un corredor de tareas creado en Node.js y Node Package Manager (npm), utilizado para la automatización de tareas repetitivas y que consumen mucho tiempo involucradas en el desarrollo web, como minificación, concatenación, almacenamiento en caché, pruebas de unidades, linting, optimización, etc. un enfoque de código sobre configuración para definir sus tareas y se basa en sus pequeños complementos de un solo propósito para llevarlos a cabo. gulp ecosistema tiene más de 1000 complementos disponibles para elegir.

mas aqui

gruñido

Grunt es un corredor de tareas de JavaScript, una herramienta utilizada para realizar automáticamente tareas de uso frecuente, como minificación, compilación, pruebas unitarias, linting, etc. Utiliza una interfaz de línea de comandos para ejecutar tareas personalizadas definidas en un archivo (conocido como Gruntfile) . Grunt fue creado por Ben Alman y está escrito en Node.js. Se distribuye a través de npm. Actualmente, hay más de cinco mil complementos disponibles en el ecosistema Grunt.

mas aqui

3) Gerentes de paquete

administradores de paquetes, lo que hacen es administrar los complementos que necesita en su aplicación e instalarlos para usted a través de github, etc., usando package.json, muy útil para actualizar sus módulos, instalarlos y compartir su aplicación, más detalles para cada uno:

npm

npm es un administrador de paquetes para el lenguaje de programación JavaScript. Es el administrador de paquetes predeterminado para el entorno de tiempo de ejecución de JavaScript Node.js. Consiste en un cliente de línea de comandos, también llamado npm, y una base de datos en línea de paquetes públicos, llamada registro npm. Se accede al registro a través del cliente, y los paquetes disponibles se pueden navegar y buscar a través del sitio web npm.

mas aqui

cenador

Bower puede administrar componentes que contienen HTML, CSS, JavaScript, fuentes o incluso archivos de imagen. Bower no concatena ni minimiza el código ni hace nada más, solo instala las versiones correctas de los paquetes que necesita y sus dependencias. Para comenzar, Bower trabaja buscando e instalando paquetes de todas partes, ocupándose de buscar, encontrar, descargar y guardar lo que está buscando. Bower realiza un seguimiento de estos paquetes en un archivo de manifiesto, bower.json.

más aqui

y el administrador de paquetes más reciente que no debe perderse, es joven y rápido en un entorno de trabajo real en comparación con npm, que estaba usando principalmente antes, para reinstalar módulos, verifica dos veces la carpeta node_modules para verificar la existencia del módulo, También parece que la instalación de los módulos lleva menos tiempo:

hilo

Yarn es un administrador de paquetes para su código. Le permite usar y compartir código con otros desarrolladores de todo el mundo. Yarn hace esto de forma rápida, segura y confiable para que nunca tenga que preocuparse.

Yarn le permite utilizar las soluciones de otros desarrolladores para diferentes problemas, lo que facilita el desarrollo de su software. Si tiene problemas, puede informar problemas o contribuir de nuevo, y cuando se solucione el problema, puede usar Yarn para mantener todo actualizado.

El código se comparte a través de algo llamado paquete (a veces denominado módulo). Un paquete contiene todo el código que se comparte, así como un archivo package.json que describe el paquete.

mas aqui

Puede encontrar alguna comparación técnica en npmcompare

Comparando browserify vs gruñido vs gulp vs webpack

Como puede ver, el paquete web está muy bien mantenido con una nueva versión que sale cada 4 días en promedio. Pero Gulp parece tener la comunidad más grande de todas (con más de 20K estrellas en Github) Grunt parece un poco descuidado (en comparación con los demás)

Entonces, si necesito elegir uno sobre el otro, iría con Gulp

Una pequeña nota sobre npm: npm3 intenta instalar dependencias de manera plana

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution

¿Qué es webpack & webpack-dev-server? La documentación oficial dice que es un paquete de módulos, pero para mí es solo un corredor de tareas. ¿Cual es la diferencia?

webpack-dev-server es un servidor web de recarga en vivo que los desarrolladores de Webpack usan para obtener comentarios inmediatos sobre lo que hacen. Solo debe usarse durante el desarrollo.

Este proyecto está fuertemente inspirado por el herramienta de prueba de unidad nof5 .

El paquete web, como su nombre lo indica, creará una era de paquete SIMPLE para la web . El paquete se minimizará y se combinará en un solo archivo (todavía vivimos en la edad HTTP 1.1).Paquete web hace la magia de combinar los recursos (JavaScript, CSS, imágenes) e inyectarlos así:<script src="assets/bundle.js"></script> .

También se puede llamar módulo bundler porque debe comprender las dependencias de los módulos y cómo tomar las dependencias y agruparlas.

¿Dónde usarías browserify? ¿No podemos hacer lo mismo con las importaciones de nodo / ES6?

Puede usar Browserify en las mismas tareas exactas en las que usaría Webpack . - Webpack es más compacto, sin embargo.

Tenga en cuenta que las funciones del cargador del módulo ES6 en Webpack2 están utilizando System.import , que ningún navegador admite de forma nativa.

¿Cuándo usarías gulp / grunt sobre npm + plugins?

Puedes olvidarte de Gulp, Grunt, Brokoli, Brunch y Bower . Utilice directamente los scripts de línea de comando npm en su lugar y puede eliminar paquetes adicionales como estos aquí para Gulp :

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

Probablemente pueda usar los generadores de archivos de configuración Gulp y Grunt al crear archivos de configuración para su proyecto. De esta manera, no necesita instalar Yeoman o herramientas similares.

Yarn es un administrador de paquetes reciente que probablemente merece ser mencionado.
Entonces, aquí está: https://yarnpkg.com/

Hasta donde sé, puede obtener dependencias npm y bower y tiene otras características apreciadas.

WebpackEs un bundler. Como Browserfyse ve en la base de código para solicitudes de módulo ( requireo import) y las resuelve de forma recursiva. Además, puede configurarlo Webpackpara resolver no solo módulos similares a JavaScript, sino también CSS, imágenes, HTML, literalmente todo. Lo que me entusiasma especialmente es Webpackque puedes combinar módulos compilados y cargados dinámicamente en la misma aplicación. Por lo tanto, uno obtiene un aumento de rendimiento real, especialmente a través de HTTP / 1.x. Cómo lo hace exactamente, lo describí con ejemplos aquí http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Como alternativa para el paquete se puede pensar Rollup.js( https://rollupjs.org/ ) , que optimiza el código durante la compilación, pero elimina todos los fragmentos no utilizados encontrados.

Para AMD, en lugar de RequireJSuno puede ir con nativo ES2016 module system, pero cargado con System.js( https://github.com/systemjs/systemjs )

Además, señalaría que a npmmenudo se usa como una herramienta de automatización como grunto gulp. Echa un vistazo a https://docs.npmjs.com/misc/scripts . Personalmente, ahora uso scripts npm solo para evitar otras herramientas de automatización, aunque en el pasado me gustaba mucho grunt. Con otras herramientas, debe confiar en innumerables complementos para paquetes, que a menudo no están bien escritos y no se mantienen activamente. npmconoce sus paquetes, por lo que llama a cualquiera de los paquetes instalados localmente por su nombre como:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

En realidad, por regla general, no necesita ningún complemento si el paquete es compatible con CLI.