gruntjs - page - webpack vs gulp español

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

Question

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 y npm son 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 / grunt después de buscar todas las dependencias.
• npm es como npm , pero crea árboles de dependencias aplanados (a diferencia de npm que lo hace de forma recursiva). Lo que significa que npm obtiene las dependencias para cada dependencia (puede obtener las mismas varias veces), mientras que bower espera que usted incluya manualmente las subdependencias. A veces, npm y npm se usan juntos para el front-end y el back-end respectivamente (ya que cada megabyte podría importar en el front-end).
• grunt y gulp son 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).
• grunt gulp (es como maven gradle o configuración gradle ). 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 secuencias 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.
• npm / npm + pueden reemplazar a los corredores de tareas. Sus habilidades a menudo se cruzan, por lo que hay diferentes implicaciones si necesita usar gulp / grunt sobre npm + plugins. Pero los corredores de tareas son definitivamente mejores para tareas complejas (por ejemplo, "en cada compilación, cree un paquete, transpile de ES6 a ES5, ejecútelo en todos los emuladores de navegadores, realice capturas de pantalla e implemente en Dropbox a través de ftp").
• browserify permite empaquetar módulos de nodo para navegadores. browserify vs node require es en realidad AMD vs CommonJS .

Preguntas:

1. ¿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?
2. ¿Dónde browserify ? ¿No podemos hacer lo mismo con las importaciones de nodo / ES6?
3. ¿Cuándo npm gulp / grunt sobre npm + plugins?
4. Proporcione ejemplos cuando necesite usar una combinación

Answer 1

¿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 en la herramienta de prueba de unidad nof5 .

El paquete web, como su nombre lo indica, creará un paquete único para la web . El paquete se minimizará y se combinará en un solo archivo (todavía vivimos en la edad HTTP 1.1). Webpack 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 donde 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 forget 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.

Answer 2

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ó un código ES6 dividido en módulos y desea poder ejecutarlo en el 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. Esas herramientas como Webpack y Browserify resuelven estos problemas traduciendo dicho código a un formulario que el 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 el 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 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 que actualiza automáticamente el navegador en los cambios de código o incluso propaga el código cambiado al navegador sin recargar con el llamado reemplazo del módulo en caliente.

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 (posiblemente 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 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 scripts NPM y JS que cubren todo el proceso de compilación y despliegue. Puede encontrar esos scripts NPM en package.json en la carpeta raíz, en una propiedad llamada scripts . Allí, en su mayoría, encontrará comandos como babel-node tools/run start . Babel-node es una herramienta CLI (no pensada para uso de producción), que al principio compila tools/run archivos ES6 (archivo run.js ubicado en tools ), básicamente una utilidad de tools/run . 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 fuente (tanto el cliente como el servidor) e iniciar la aplicación y el servidor de desarrollo (el servidor de desarrollo será probablemente ya sea Webpack Dev Server o Browsersync).

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

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 se sirven los activos generados con detección automática de cambios y reemplazo de módulos calientes. Como puede ver, hay otros files propiedades de configuración con archivos o patrones individuales. La sincronización del navegador vigila los cambios y recarga el navegador si se producen algunos, pero como dice el comentario, Webpack se encarga de ver las fuentes js por sí solo con HMR, por lo que cooperar 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.

Answer 3

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 20,000 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

Answer 4

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

Answer 5

Yarn es un administrador de paquetes reciente que probablemente merece ser mencionado. Entonces, allí: Yarn

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

Answer 6

Webpack es un paquete. Al igual que Browserfy , busca en el código base solicitudes de módulos ( require o import ) y las resuelve de forma recursiva. Además, puede configurar Webpack para resolver no solo módulos similares a JavaScript, sino también CSS, imágenes, HTML, literalmente todo. Lo que me entusiasma especialmente de Webpack es que puede combinar módulos compilados y cargados dinámicamente en la misma aplicación. Por lo tanto, uno obtiene un aumento de rendimiento real, especialmente sobre 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 bundler, se 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.

Para AMD , en lugar de RequireJS uno puede ir con nativo ES2016 module system , pero cargado con System.js ( SystemJS )

Además, señalaría que a npm menudo se usa como una herramienta de automatización como grunt o 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. 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.

Answer 7

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:

1) Paquetes de módulos

webpack y browserify como populares, funcionan como corredores de tareas pero con más flexibilidad, también agrupará 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, al tiempo que proporciona enlaces a casos de uso específicos de conceptos detallados.

mas here

browserify

Browserify es una herramienta de desarrollo que nos permite escribir módulos de estilo node.js que se compilan para usar en el navegador. Al igual que el nodo, escribimos nuestros módulos en archivos separados, exportando métodos y propiedades externos 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 here

2) corredores de tareas

gulp and gruñido son corredores de tareas, básicamente lo que hacen, crean tareas y las ejecutan cuando lo desean, por ejemplo, instalan un complemento para minimizar su CSS y luego lo ejecutan cada vez que lo hacen, 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 here

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 here

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 NPM

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.

mas Bower

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 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 here

Answer 8

Actualización octubre 2018

Si aún no está seguro acerca del desarrollo 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 se divide 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 gestores de paquetes simplifican la instalación y actualización de dependencias de proyectos, que son bibliotecas como: jQuery, Bootstrap , etc., todo lo que se utiliza 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.

• NPM significa: Node JS package manager ayuda a administrar todas las bibliotecas en las que se basa su software. npm install sus necesidades en un archivo llamado package.json y ejecutaría npm install en la línea de comando ... luego BANG, sus paquetes están descargados y listos para usar. Podría usarse tanto para bibliotecas de aplicaciones para front-end and back-end como para aplicaciones front-end and back-end .

• 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.json y luego ejecutan bower.json bower install en la línea de comandos.

La mayor diferencia entre Bower y NPM es 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

Bower

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 para JavaScript published recientemente por Facebook con algunas ventajas más en comparación con NPM . Y con Yarn, aún puede usar el registro NPM y Bower para obtener el paquete. Si ha instalado un paquete anteriormente, yarn crea una copia en caché que facilita la offline package installs .

• jspm : es un administrador de paquetes para el cargador de módulos universal SystemJS , construido sobre el cargador de módulos dinámico ES6 . 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 paquetes basados ​​en Bower se basan en GitHub , también podemos instalar esos paquetes usando 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 las diferencias entre Bower y 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. Puede incluir cada archivo con una etiqueta <script> individual, 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 los datos. Mientras se descargan los scripts, no se puede cambiar el contenido de la página.

• El problema del tiempo de descarga se puede resolver 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.

Luego escuchamos sobre RequireJS , Browserify , Webpack y SystemJS

• RequireJS : es un cargador de archivos y módulos de JavaScript . Está optimizado para el uso en el navegador, pero se puede usar en otros entornos de 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.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>

Lea más sobre CommonJS y AMD para obtener una comprensión fácil. Relación entre CommonJS, AMD y RequireJS?

• Browserify : configurado para permitir el uso de módulos formateados CommonJS en el navegador. En consecuencia, Browserify no es tanto un cargador de módulos como un paquete de módulos: Browserify es completamente una herramienta de tiempo de construcción, que produce un paquete de código que luego se puede cargar 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 formato CommonJS

//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, 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. Puede escribir su JavaScript con la sintaxis de los módulos CommonJS o AMD . Ataca el problema de compilación de una manera fundamentalmente más integrada y obstinada. En Browserify 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 utilizados en la actualidad ( CommonJS, UMD, AMD, ES6 ). Está construido sobre el polyfill del cargador de módulos ES6 y es lo suficientemente inteligente como para detectar el formato que se utiliza y manejarlo adecuadamente. SystemJS también puede transpilar código ES6 (con Babel o Traceur ) u otros lenguajes como TypeScript y CoffeeScript utilizando complementos.

Quiere saber qué es el node module y 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é jspm y SystemJS ?

Uno de los principales objetivos de la modularidad ES6 es hacer que sea realmente simple instalar y usar cualquier biblioteca Javascript desde cualquier lugar de 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 dentro de System.config({ ... }) antes de importar su módulo. Normalmente cuando se ejecuta jspm init , habrá un archivo llamado config.js para este propósito.

4. Para ejecutar estos scripts, necesitamos cargar system.js y config.js en la página HTML. Después de eso, SystemJS el archivo display.js usando el cargador de módulos SystemJS .

index.html

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

Nota: También puede usar npm con Webpack ya que Angular 2 lo ha aplicado. Dado que jspm se desarrolló para integrarse con SystemJS y funciona sobre la fuente npm 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 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 al igual que Grunt pero en lugar de configuraciones, puede escribir JavaScript con secuencias como si fuera una aplicación de nodo. Prefiero estos días.

Esta es una declaración de tarea de muestra de Gulp .

//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 : puedes crear proyectos iniciales con ellos. Por ejemplo, planea crear un prototipo con HTML y SCSS, luego, en lugar de crear manualmente alguna carpeta como scss, css, img, fonts. Simplemente puede instalar yeoman y ejecutar un script simple. Entonces todo aquí para ti.

Encuentra más here .

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.