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


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

  • npm & bower son administradores de paquetes Simplemente descargan las dependencias y no saben cómo crear proyectos por sí mismos. Lo que saben es llamar webpack/gulp/grunt después de buscar todas las dependencias.
  • bower es como npm, pero construye árboles de dependencias aplastadas (a diferencia npm que lo hacen recursivamente). Sentido npm recupera las dependencias para cada dependencia (puede buscar las mismas varias veces), mientras bower espera que incluya subdependencias manualmente. A veces bower y npm se usan juntos para el front-end y el back-end respectivamente (ya que cada megabyte puede importar en el front-end).
  • grunt y gulp son los corredores de tareas para automatizar todo lo que se puede automatizar (es decir, compilar CSS / Sass, optimizar imágenes, hacer un paquete y minificar / transpilarlo).
  • grunt vs. gulp (es como maven vs. gradle o configuración vs. código). Grunt se basa en configurar tareas independientes independientes, cada tarea abre / maneja / cierra archivo. Gulp requiere menos cantidad de código y se basa en flujos de nodos, lo que le permite construir cadenas de tuberías (sin 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 que te permite olvidarte de todos los observadores de JS / CSS.
  • npm/bower + los complementos pueden reemplazar a los corredores de tareas. Sus habilidades a menudo se cruzan por lo que hay diferentes implicaciones si necesita usar gulp/grunt encima npm + complementos. Pero los corredores de tareas son definitivamente mejores para tareas complejas (por ejemplo, "en cada paquete de creación de compilación, transpile de ES6 a ES5, ejecútelo en todos los emuladores de navegadores, realice capturas de pantalla e impleméntelo en Dropbox mediante ftp").
  • browserify permite empaquetar módulos de nodos para navegadores. browserify vs nodees require es en realidad AMD vs CommonJS.

Preguntas:

  1. Que 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?
  2. Donde usarías browserify? ¿No podemos hacer lo mismo con las importaciones de nodos / ES6? 
  3. Cuándo usarías gulp/grunt encima npm + complementos?
  4. Proporcione ejemplos cuando necesite usar una combinación

1505
2018-01-28 13:28


origen


Respuestas:


Webpack y Browserify

Webpack y Browserify hacen prácticamente el mismo trabajo, que es procesar su código para ser utilizado en un entorno objetivo (principalmente navegador, aunque puede orientar otros entornos como Nodo). El resultado de tal procesamiento es uno o más manojos - scripts ensamblados adecuados para un entorno específico.

Por ejemplo, supongamos que escribió un código ES6 dividido en módulos y desea poder ejecutarlo en el navegador. Si esos módulos son módulos de nodo, el navegador no los comprenderá, ya que solo existen en el entorno de nodo. Los módulos ES6 tampoco funcionarán en navegadores más 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 simplemente arrojaría errores. Esas herramientas como Webpack y Browserify resuelven estos problemas traducir dicho código a un navegador de formularios es capaz de 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 hacerlo solo después de descargar complementos pero usando ambos lleva a resultados muy similares. Todo se reduce a las preferencias personales (Webpack es más actual). Por cierto, Webpack no es un corredor de tareas, es solo un procesador de tus archivos (los procesa mediante los llamados cargadores y complementos) y puede ser ejecutado (entre otros) por un corredor de tareas.


Servidor Dev de Webpack

Webpack Dev Server proporciona 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 inmediatamente con el servidor de desarrollo actualizando automáticamente el navegador en cambios de código o incluso propagando código cambiado al navegador sin recargar con el llamado reemplazo de módulo caliente.


Corredores de tareas vs scripts de NPM

He estado usando Gulp por su concisión y fácil escritura de tareas, pero más tarde descubrí que no necesito ni Gulp ni Grunt en absoluto. Todo lo que alguna vez necesité podría haberse hecho usando scripts de NPM para ejecutar herramientas de terceros a través de su API. Elegir entre las secuencias de comandos Gulp, Grunt o NPM depende del gusto y la experiencia de tu 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 otra herramienta más para solicitar y aprender, y yo personalmente prefiero reducir mis dependencias y simplificar las cosas. Por otro lado, reemplazar estas tareas con la combinación de scripts de NPM y scripts (JS) que ejecutan esas herramientas de terceros (por ejemplo, configuración y ejecución de scripts de nodo). rimraf para propósitos de limpieza) podría ser más desafiante. Pero en la mayoría de los casos, esos tres son iguales en términos de resultados.


Ejemplos

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

Hablando de manera más precisa, start.js crea paquetes de cliente y de servidor, inicia el servidor express y después de un inicio exitoso en su navegador sincronizado, que en el momento de escribir esto se veía así (consulte reaccionar proyecto inicial 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 quieren proxy, que podría ser http: // localhost: 3000, y Browsersync inicia un servidor escuchando http: // localhost: 3001, donde los activos generados se sirven con detección automática de cambios y reemplazo de módulos en caliente. Como puede ver, hay otra propiedad de configuración files con archivos o patrones individuales La sincronización del navegador vigila los cambios y vuelve a cargar el navegador si se produce alguno, pero como dice el comentario, Webpack se encarga de ver las fuentes js por sí mismo con HMR, por lo que cooperan allí.

Ahora no tengo ningún ejemplo equivalente de dicha configuración Grunt o Gulp, pero con Gulp (y de forma 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 básicamente harías las mismas cosas que en el kit de inicio, esta vez con el corredor de tareas, que resuelve algunos problemas para ti, 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.


795
2018-01-28 14:34



Actualización junio 2018

Aprender JavaScript moderno es difícil si no has estado allí desde el principio. Si usted es el recién llegado, recuerde verificar 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 exhaustiva del equipo 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 bastante tiempo ya que hay muchas herramientas 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 puedes escuchar sobre Yeoman or Slush. Eso no es realmente un problema, es confuso para todos tratar de 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 dependencias de proyectos, que son bibliotecas tales como: jQuery, Bootstrap, etc., todo lo que se usa en su sitio y no lo escribe usted.

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

  • NPM representa: Node JS package manager lo ayuda a administrar todas las bibliotecas en las que se basa su software. Definirías tus necesidades en un archivo llamado package.json y correr npm install en la línea de comandos ... entonces BANG, tus paquetes están descargados y listos para usar. Podría ser usado tanto para front-end and back-end bibliotecas.

  • Bower: para la administración de paquetes front-end, el concepto es el mismo con NPM. Todas sus bibliotecas se almacenan en un archivo llamado bower.json y luego corre bower install en la línea de comando.

La mayor diferencia entre Bower y NPM es que NPM anida   árbol de dependencia, mientras que Bower requiere un árbol de dependencia plana 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 en npm 3 Duplication and Deduplication,   abra el documento para más detalles.

  • Yarn: Un nuevo administrador de paquetes para JavaScript  publicado por Facebook recientemente con algunas ventajas más en comparación con NPM. Y con Yarn, todavía puedes usar ambos NPMy Bower registro para buscar el paquete. Si has instalado un paquete antes, yarn crea una copia en caché que facilita offline package installs.

  • jspm: es un administrador de paquetes para SystemJS cargador universal de módulos, construido sobre la dinámica ES6 cargador de módulos 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 GitHub y npm. Como la mayoría de los Bower los paquetes basados ​​se basan en GitHub, podemos instalar esos paquetes usando jspm también. Tiene un registro que enumera la mayoría de los paquetes de aplicaciones para el usuario de uso común para una instalación más sencilla.

Ver los diferentes entre Bower y jspm:    Administrador de paquetes: Bower vs jspm


2. Módulo cargador / paquete

La mayoría de los proyectos de cualquier escala tendrán su código dividido entre varios archivos. Puedes simplemente incluir cada archivo con un individuo <script> etiqueta, sin embargo, <script> establece una nueva conexión http, y para archivos pequeños, que es un objetivo de la 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 en la página.

  • El problema del tiempo de descarga se puede resolver en gran medida concatenando un grupo de módulos simples en un único archivo y minificándolo.

P.ej

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • Sin embargo, el rendimiento se obtiene a expensas de la flexibilidad. Si sus módulos tienen interdependencia, esta falta de flexibilidad puede ser un inconveniente.

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 hacer eso mejor que usted, y es por eso que debe usar una herramienta para agrupar automáticamente todo en un solo archivo.

Entonces escuchamos sobre RequireJS, Browserify, Webpack y SystemJS

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

P.ej: 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.js como 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>

Leer más sobre CommonJS y AMD para entenderse fácilmente    Relación entre CommonJS, AMD y RequireJS?

  • Browserify: establecido para permitir el uso de CommonJS módulos formateados en el navegador. Por consiguiente, Browserify no es tanto un cargador de módulos como un paquete de módulos: Browserify es completamente una herramienta de tiempo de compilació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 instalado 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, ejecute el comando para agrupar:

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

Browserify recursivamente encuentra todas las dependencias de entry-point y las ensambla en un solo archivo:

<script src=”bundle-name.js”></script>
  • Webpack: Agrupa todos sus activos estáticos, incluidos JavaScript, imá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 JavaScript con CommonJS o AMD sintaxis de los módulos Ataca el problema de construcción de una manera fundamentalmente más integrada y obstinada. En Browserify tu usas Gulp/Grunt y una larga lista de transformaciones y complementos para hacer el trabajo. Webpack ofrece suficiente potencia fuera de la caja que normalmente no necesita Grunt o Gulp en absoluto.

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 usado hoy (CommonJS, UMD, AMD, ES6) Está construido encima de ES6 módulo polyfill del cargador y es lo suficientemente inteligente como para detectar el formato que se utiliza y manejarlo adecuadamente. SystemJS también puede transpilar el código ES6 (con Babel o Traceur) u otros idiomas como TypeScript y CoffeeScript usando complementos

¿Quieres saber cuál es el node module y por qué no está bien adaptado a in-browser.

Artículo más útil:


Por qué jspm y SystemJS?

Uno de los principales objetivos de ES6 modularidad es hacerlo realmente simple   para instalar y usar cualquier biblioteca Javascript desde cualquier lugar del   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 referencia externa dentro de su archivo HTML.

display.js

var $ = require('jquery'); 

$('body').append("I've imported jQuery!");
  1. Luego configuras estas cosas dentro de System.config({ ... }) antes de   importando tu módulo Normalmente cuando se ejecuta jspm init, habrá un archivo   llamado config.js para este propósito.

  2. Para hacer que estos scripts se ejecuten, tenemos que cargar system.js y config.js en la página HTML. Después de eso, cargaremos el display.js archivo usando   el SystemJS cargador 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 puedes usar npm con Webpack como Angular 2 lo ha aplicado. Ya que jspm fue desarrollado para integrarse con SystemJS y funciona además de los existentes npm fuente, por lo que 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é tenemos que usarlos: en una palabra: automatización. Cuanto menos trabajo tengas que hacer cuando realices tareas repetitivas como minificación, compilación, pruebas unitarias, pelusasque anteriormente nos costaba muchas veces hacer con línea de comando 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 en Grunt es una matriz de diferentes configuraciones de complementos, que simplemente se ejecutan una tras otra, de manera 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 como Grunt pero en lugar de configuraciones, puedes escribir JavaScript con transmisiones como si fuera una aplicación de nodo. Prefiere estos días.

Esto es un Gulp declaració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 andamiaje

  • 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. Usted puede simplemente instalar yeoman y ejecuta una secuencia de comandos 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 realmente 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 lo hayan encontrado útil.


550
2017-10-03 06:23



Puedes encontrar alguna comparación técnica sobre npmcompare

Comparando browserify vs. grunt 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 20,000 estrellas en Github) Grunt parece un poco descuidado (en comparación con los demás)

Entonces, si tuviera que elegir una sobre la otra, iría con Gulp


45
2018-05-01 09:04



DE ACUERDO, todos tienen algunas similitudes, hacen las mismas cosas para ti de maneras diferentes y similares, los divido en 3 grupos principales como a continuación:


1) Envases de módulos 

webpack y browserify como populares, funcionan como corredores de tareas pero con más flexibilidad, así como agrupan todo como su configuración, por lo que puede apuntar al resultado como bundle.js, por ejemplo, en un solo archivo, incluido el 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 modernas de JavaScript. Cuando   webpack procesa su aplicación, construye recursivamente una dependencia   gráfico que incluye todos los módulos que su aplicación necesita, luego paquetes   todos esos módulos en una pequeña cantidad de paquetes, a menudo solo uno,   para ser cargado por el navegador.

Es increíblemente configurable, pero para empezar solo necesitas   comprender cuatro conceptos básicos: entrada, salida, cargadores y complementos.

Este documento está destinado a proporcionar una descripción general de alto nivel de estos   conceptos, al tiempo que proporciona enlaces a conceptos específicos detallados   casos de uso.

Más aquí

Navegar

Browserify es una herramienta de desarrollo que nos permite escribir node.js-style   módulos que se compilan para su uso en el navegador. Al igual que el nodo, escribimos   nuestros módulos en archivos separados, exportando métodos externos y   propiedades que usan el módulo. variables de exportaciones y exportaciones. Podemos incluso   requiere otros módulos que usan la función require, y si omitimos el   ruta relativa se resolverá en el módulo en el node_modules   directorio.

Más aquí


2) Corredores de tareas 

Gulp y Grunt son corredores de tareas, básicamente lo que hacen, crean tareas y las ejecutan cuando lo desees, por ejemplo, instalas un complemento para minimizar tu CSS y luego lo ejecutas cada vez para hacer minifying, más detalles sobre cada uno:

trago

gulp.js es un kit de herramientas de código abierto de JavaScript de Fractal Innovations   y la comunidad de código abierto en GitHub, utilizada como una creación en tiempo real   sistema en desarrollo web front-end. Es un corredor de tareas basado en   Node.js y Node Package Manager (npm), utilizados para la automatización de   Tareas repetitivas y que consumen mucho tiempo involucradas en el desarrollo web como   minificación, concatenación, prevención de la memoria caché, pruebas unitarias, formación de pelusas,   optimización, etc. Gulp usa un enfoque de código sobre configuración para   define sus tareas y se basa en sus pequeños complementos de propósito único para   llevarlos a cabo. gulp ecosistema tiene más de 1000 plugins de este tipo disponibles   Para escoger de.

Más aquí

gruñido

Grunt es un corredor de tareas de JavaScript, una herramienta que se usa para automatizar   realizar tareas de uso frecuente como minificación, compilación, unidad   prueba, pelusa, etc. Utiliza una interfaz de línea de comandos para ejecutar personalizado   tareas 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.   En la actualidad, hay más de cinco mil complementos disponibles en el   Ecosistema de Grunt.

Más aquí


3) Gestores de paquetes 

los gestores de paquetes, lo que hacen es administrar los complementos que necesita en su aplicación e instalarlos por usted a través de github, etc. utilizando 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. Eso   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 comando, también llamado npm, y un   base de datos en línea de paquetes públicos, llamado el registro npm. los   registro se accede a través del cliente, y los paquetes disponibles pueden ser   navegó y buscó a través del sitio web npm.

Más aquí

cenador

Bower puede administrar componentes que contienen HTML, CSS, JavaScript, fuentes   o incluso archivos de imagen. Bower no concatena ni minifica el código ni lo hace   cualquier otra cosa: simplemente instala las versiones correctas de los paquetes   usted necesita y sus dependencias.   Para comenzar, Bower trabaja buscando e instalando paquetes de   por todas partes, teniendo cuidado de buscar, encontrar, descargar y guardar   cosas que estás buscando. Bower realiza un seguimiento de estos paquetes en un   archivo de manifiesto, bower.json.

Más aquí

y el gestor de paquetes más reciente que no se debe perder, es joven y rápido en el entorno de trabajo real en comparación con npm que antes estaba usando, para volver a instalar módulos, comprueba dos veces la carpeta node_modules para comprobar 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   comparte el código con otros desarrolladores de todo el mundo. Hilo hace esto   de forma rápida, segura y confiable para que nunca tenga que preocuparse.

Yarn le permite usar soluciones de otros desarrolladores para diferentes   problemas, por lo que es más fácil para usted desarrollar su software. Si tu   tiene problemas, puede informar problemas o contribuir de nuevo, y cuando el   el problema es fijo, puede usar Hilo para mantenerlo actualizado.

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

Más aquí



42
2018-05-21 03:43



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

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


40
2018-04-14 15:53



¿Qué es webpack y 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 Webpack los desarrolladores utilizan para obtener retroalimentación inmediata de lo que hacen. Solo debe usarse durante el desarrollo.

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

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

También se puede llamar paquete de módulos 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 nodos / ES6?

Podrías usar Browserify en las mismas tareas exactas donde usarías Webpack. - Webpack es más compacto, sin embargo.

Tenga en cuenta que Características del cargador de módulo ES6 en Webpack2 están usando System.import, que ni un solo navegador admite de forma nativa.

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

Usted puede olvidar  Gulp, Grunt, Brokoli, Brunch y Bower. Utiliza directamente scripts de línea de comandos npm y puedes eliminar paquetes adicionales como estos aquí para Trago:

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 puedas usar Trago y Gruñido config generadores de archivos al crear archivos de configuración para su proyecto. De esta manera no necesita instalar Hacendado o herramientas similares.


10
2017-11-22 01:23



Yarn es un administrador de paquetes reciente que probablemente merece ser mencionado. Por lo tanto, allí : https://yarnpkg.com/

Afaik, puede buscar dependencias npm y bower y tiene otras características apreciadas.


9
2017-10-14 15:58



StackShare proporciona un lado a lado (o amontonar) de tres herramientas a la vez.

Aquí es para npm vs. Bower vs. Browserify y para gulp vs. Webpack vs. Grunt

En estas páginas de comparación, puede encontrar lo siguiente:

  • cantidad de votos que cada uno recibió de la comunidad de StackShare
  • qué empresas los utilizan en su stack tecnológico
  • nivel de interés para cada uno en el tiempo
  • profesionales para cada herramienta

4
2018-05-30 14:31



Webpack es un paquete. Me gusta Browserfy se ve en la base de código para solicitudes de módulo (require o import) y los resuelve recursivamente. Además, puedes configurar Webpack para resolver no solo los módulos tipo JavaScript, sino también CSS, imágenes, HTML, literalmente todo. Lo que especialmente me emociona Webpack, puede combinar módulos compilados y cargados dinámicamente en la misma aplicación. Por lo tanto, uno obtiene un real aumento de rendimiento, especialmente sobre HTTP / 1.x. ¿Cómo exactamente lo haces? Lo describí con ejemplos aquí http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Como una alternativa para bundler uno puede pensar en Rollup.js (https://rollupjs.org/), que optimiza el código durante la compilación, pero elimina todos los fragmentos no utilizados encontrados.

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

Además, señalaría eso npm a menudo se utiliza como una herramienta de automatización como grunt o gulp. Revisa https://docs.npmjs.com/misc/scripts. Personalmente, ahora voy con las secuencias de comandos npm solo para evitar otras herramientas de automatización, aunque en el pasado estaba muy metido grunt. Con otras herramientas, debe confiar en innumerables complementos para paquetes, que a menudo no están bien escritos y no se mantienen activamente. npm conoce 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.


4
2017-08-14 09:43