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

Estou tentando resumir meu conhecimento sobre os mais populares gerenciadores de pacotes JavaScript, empacotadores e executores de tarefas. Por favor me corrija se eu estiver errado:

• npm& bowersão gerenciadores de pacotes. Eles apenas baixam as dependências e não sabem como construir projetos por conta própria. O que eles sabem é chamar webpack/ gulp/ gruntdepois de buscar todas as dependências.
• boweré como npm, mas cria árvores de dependência achatadas (ao contrário do npmque faz recursivamente). O significado npmbusca as dependências para cada dependência (pode buscar o mesmo algumas vezes), enquanto bowerespera que você inclua manualmente subdependências. Às vezes, bowere npmsão usados ​​juntos para front-end e back-end, respectivamente (já que cada megabyte pode ser importante no front-end).
• grunte gulpsão executores de tarefas para automatizar tudo o que pode ser automatizado (por exemplo, compilar CSS / Sass, otimizar imagens, criar um pacote e minimizá-lo / transpilar).
• gruntvs. gulp(é como mavenvs. gradleou código de configuração vs.). O Grunt é baseado na configuração de tarefas independentes separadas, cada tarefa abre / manipula / fecha o arquivo. O Gulp requer menos quantidade de código e é baseado nos fluxos de nó, o que permite a construção de cadeias de tubulação (sem reabrir o mesmo arquivo) e o torna mais rápido.
• webpack( webpack-dev-server) - para mim é um executor de tarefas com recarregamento quente de alterações, o que permite que você esqueça todos os observadores JS / CSS.
• npmOs bowerplugins / + podem substituir os executores de tarefas. Suas habilidades geralmente se cruzam, portanto há implicações diferentes se você precisar usar gulp/ gruntsobre npm+ plugins. Porém, os executores de tarefas são definitivamente melhores para tarefas complexas (por exemplo, "em cada compilação, crie bundle, transpile do ES6 para o ES5, execute-o em todos os emuladores de navegadores, faça capturas de tela e implante no dropbox através do ftp").
• browserifypermite empacotar módulos de nó para navegadores. browserifyvs node's requireé realmente AMD vs commonjs .

Questões:

1. O que é webpack& webpack-dev-server? A documentação oficial diz que é um empacotador de módulos, mas para mim é apenas um executor de tarefas. Qual é a diferença?
2. Onde você usaria browserify? Não podemos fazer o mesmo com as importações do nó / ES6?
3. Quando você usaria gulp/ gruntsobre npm+ plugins?
4. Forneça exemplos quando você precisar usar uma combinação

Webpack e Browserify

O Webpack e o Browserify fazem praticamente o mesmo trabalho, que está processando seu código para ser usado em um ambiente de destino (principalmente navegador, embora você possa direcionar outros ambientes como Node). O resultado de tal processamento é um ou mais feixes - Scripts montados adequado para o ambiente alvo.

Por exemplo, digamos que você escreveu o código ES6 dividido em módulos e deseja executá-lo em um navegador. Se esses módulos forem módulos de nó, o navegador não os entenderá, pois eles existem apenas no ambiente do nó. Os módulos ES6 também não funcionarão em navegadores mais antigos como o IE11. Além disso, você pode ter usado recursos de linguagem experimental (próximas propostas do ES) que os navegadores ainda não implementam, portanto, a execução desse script causaria erros. Ferramentas como Webpack e Browserify resolvem esses problemas, traduzindo esse código para um formato que um navegador é capaz de executar . Além disso, eles permitem aplicar uma enorme variedade de otimizações nesses pacotes.

No entanto, o Webpack e o Browserify diferem de várias maneiras, por padrão, o Webpack oferece muitas ferramentas (por exemplo, divisão de código), enquanto o Browserify pode fazer isso somente após o download de plug-ins, mas o uso de ambos leva a resultados muito semelhantes . Tudo se resume à preferência pessoal (o Webpack é mais moderno). Aliás, o Webpack não é um executor de tarefas, é apenas o processador de seus arquivos (os processa pelos chamados carregadores e plugins) e pode ser executado (entre outras maneiras) por um executor de tarefas.

Servidor de desenvolvimento Webpack

O Webpack Dev Server fornece uma solução semelhante ao Browsersync - um servidor de desenvolvimento em que você pode implantar seu aplicativo rapidamente enquanto trabalha nele e verificar seu progresso de desenvolvimento imediatamente, com o servidor dev atualizando automaticamente o navegador em alterações de código ou mesmo propagando códigos alterados ao navegador sem recarregar com a chamada substituição de módulo quente.

Executores de tarefas vs scripts NPM

Eu tenho usado o Gulp por sua concisão e facilidade na redação de tarefas, mas depois descobri que não preciso do Gulp nem do Grunt. Tudo o que eu precisava poderia ter sido feito usando scripts NPM para executar ferramentas de terceiros por meio de sua API. A escolha entre os scripts Gulp, Grunt ou NPM depende do gosto e da experiência da sua equipe.

Embora as tarefas no Gulp ou Grunt sejam fáceis de ler, mesmo para pessoas não familiarizadas com o JS, é mais uma ferramenta para exigir e aprender, e eu pessoalmente prefiro restringir minhas dependências e simplificar as coisas. Por outro lado, substituir essas tarefas pela combinação de scripts NPM e scripts (provavelmente JS) que executam essas ferramentas de terceiros (por exemplo, script de nó configurando e executando rimraf para fins de limpeza) pode ser mais desafiador. Mas na maioria dos casos, esses três são iguais em termos de resultados.

Exemplos

Quanto aos exemplos, sugiro que você dê uma olhada neste projeto inicial do React , que mostra uma boa combinação de scripts NPM e JS que abrangem todo o processo de compilação e implantação. Você pode encontrar esses scripts NPM em package.jsonna pasta raiz, em uma propriedade chamada scripts. Lá você encontrará principalmente comandos como babel-node tools/run start. O nó Babel é uma ferramenta CLI (não destinada ao uso em produção), que inicialmente compila o arquivo ES6 tools/run(arquivo run.js localizado nas ferramentas ) - basicamente um utilitário de execução . Esse corredor pega uma função como argumento e a executa, que neste caso é start- outro utilitário (start.js) responsável por agrupar os arquivos de origem (cliente e servidor) e iniciar o servidor de aplicativos e desenvolvimento (o servidor de desenvolvimento provavelmente será o Webpack Dev Server ou o Browsersync).

Falando com mais precisão, start.jscria os pacotes do lado do cliente e do servidor, inicia um servidor expresso e, após um lançamento bem-sucedido, inicializa a sincronização do navegador, que no momento da escrita parecia com esta (consulte o projeto inicial do novo código).

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)

A parte importante é que proxy.target, onde eles definem o endereço do servidor que desejam proxy, que pode ser http: // localhost: 3000 , e o Browsersync inicia um servidor atendendo em http: // localhost: 3001 , onde os ativos gerados são atendidos com alteração automática detecção e substituição do módulo quente. Como você pode ver, há outra propriedade de configuração filescom arquivos ou padrões individuais. A sincronização do navegador observa alterações e recarrega o navegador, se houver alguma, mas como diz o comentário, o Webpack cuida de observar as fontes js por si só com o HMR, para que elas cooperem há.

Agora não tenho nenhum exemplo equivalente dessa configuração do Grunt ou do Gulp, mas com o Gulp (e de maneira semelhante ao Grunt) você escreveria tarefas individuais no 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
});

onde você faria essencialmente praticamente as mesmas coisas do kit inicial, desta vez com o executor de tarefas, que resolve alguns problemas para você, mas apresenta seus próprios problemas e algumas dificuldades durante o aprendizado do uso, e como eu digo, o quanto mais dependências você tiver, mais pode dar errado. E é por isso que gosto de me livrar dessas ferramentas.

Atualização outubro 2018

Se você ainda não tem certeza sobre o desenvolvedor Front-end, pode dar uma olhada rápida em um excelente recurso aqui.

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

Atualização junho 2018

Aprender JavaScript moderno é difícil se você não estiver lá desde o início. Se você é o novato, lembre-se de verificar esta excelente redação para ter uma melhor visão geral.

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

Atualização julho de 2017

Recentemente, encontrei um guia realmente abrangente da equipe Grab sobre como abordar o desenvolvimento front-end em 2017. Você pode conferir como abaixo.

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

Eu também tenho procurado por isso há algum tempo, já que existem muitas ferramentas por aí e cada uma delas nos beneficia em um aspecto diferente. A comunidade é dividida em ferramentas como Browserify, Webpack, jspm, Grunt and Gulp. Você também pode ouvir sobre Yeoman or Slush. Isso não é realmente um problema, é apenas confuso para todos que tentam entender um caminho claro a seguir.

Enfim, eu gostaria de contribuir com algo.

1. Gerenciador de Pacotes

Os gerenciadores de pacotes simplificam a instalação e a atualização das dependências do projeto, que são bibliotecas como:, jQuery, Bootstrapetc - tudo o que é usado no seu site e não é escrito por você.

Navegando em todos os sites da biblioteca, baixando e descompactando os arquivos, copiando arquivos para os projetos - tudo isso é substituído por alguns comandos no terminal.

• NPMsignifica: Node JS package managerajuda você a gerenciar todas as bibliotecas nas quais seu software depende. Você definiria suas necessidades em um arquivo chamado package.jsone executaria npm installna linha de comando ... então BANG, seus pacotes serão baixados e prontos para uso. Pode ser usado para front-end and back-endbibliotecas.

• Bower: para gerenciamento de pacotes front-end, o conceito é o mesmo do NPM. Todas as suas bibliotecas são armazenadas em um arquivo chamado bower.jsone, em seguida, executadas bower installna linha de comando.

A maior diferença entre Bowere NPMé que o NPM aninha a árvore de dependência, enquanto o Bower exige uma árvore de dependência simples, como abaixo.

Citando Qual é a diferença entre Bower e 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

Existem algumas atualizações npm 3 Duplication and Deduplication, abra o documento para obter mais detalhes.

• Yarn: Um novo gerenciador de pacotes para JavaScript publicada pela Facebookrecentemente com mais algumas vantagens em comparação com NPM. E com o Yarn, você ainda pode usar os dois NPMe o Bowerregistro para buscar o pacote. Se você instalou um pacote anteriormente, yarncria uma cópia em cache que facilita offline package installs.

• jspm: é um gerenciador de pacotes para o SystemJScarregador de módulos universal, construído sobre o ES6carregador de módulos dinâmicos . Não é um gerenciador de pacotes totalmente novo com seu próprio conjunto de regras, mas funciona com base nas fontes de pacotes existentes. Fora da caixa, ele trabalha com GitHube npm. Como a maioria dos Bowerpacotes baseados é baseada GitHub, também podemos instalar esses pacotes jspm. Ele possui um registro que lista a maioria dos pacotes front-end comumente usados ​​para facilitar a instalação.

Veja as diferenças entre Bowere jspm: Gerenciador de Pacotes: Bower vs jspm

2. Carregador / Empacotamento de Módulos

A maioria dos projetos de qualquer escala terá seu código dividido entre vários arquivos. Você pode apenas incluir cada arquivo com uma <script>tag individual , no entanto, <script>estabelece uma nova conexão http e, para arquivos pequenos - que é um objetivo de modularidade - o tempo para configurar a conexão pode demorar muito mais do que transferir os dados. Enquanto os scripts estão sendo baixados, nenhum conteúdo pode ser alterado na página.

• O problema do tempo de download pode ser resolvido em grande parte concatenando um grupo de módulos simples em um único arquivo e minimizando-o.

Por exemplo

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

• O desempenho vem à custa da flexibilidade, no entanto. Se seus módulos tiverem interdependência, essa falta de flexibilidade pode ser um obstáculo.

Por exemplo

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

Os computadores podem fazer isso melhor do que você, e é por isso que você deve usar uma ferramenta para agrupar tudo automaticamente em um único arquivo.

Então ouvimos sobre RequireJS, Browserify, WebpackeSystemJS

• RequireJS: é um JavaScriptcarregador de arquivos e módulos. É otimizado para uso no navegador, mas pode ser usado em outros ambientes JavaScript, como Node.

Por exemplo: 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
    }
});

Em main.js, podemos importar myModule.jscomo dependência e usá-lo.

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

E então, no nosso HTML, podemos nos referir ao uso com RequireJS.

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

Leia mais sobre CommonJSe AMDentenda facilmente. Relação entre CommonJS, AMD e RequireJS?

• Browserify: definido para permitir o uso de CommonJSmódulos formatados no navegador. Consequentemente, Browserifynão é tanto um carregador de módulos quanto um empacotador de módulos: Browserifyé inteiramente uma ferramenta em tempo de construção, produzindo um pacote de código que pode ser carregado no lado do cliente.

Comece com uma máquina de compilação com o node & npm instalado e obtenha o pacote:

npm install -g –save-dev browserify

Escreva seus módulos em CommonJS formato

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

E quando estiver feliz, emita o comando para agrupar:

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

O Browserify encontra recursivamente todas as dependências do ponto de entrada e as reúne em um único arquivo:

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

• Webpack: Agrupa todos os seus recursos estáticos, incluindo JavaScriptimagens, CSS e muito mais, em um único arquivo. Também permite processar os arquivos através de diferentes tipos de carregadores. Você pode escrever sua sintaxe JavaScriptwith CommonJSou AMDmodules. Ele ataca o problema de construção de uma maneira fundamentalmente mais integrada e opinativa. Em Browserifyque você usa Gulp/Grunte uma longa lista de transformações e plugins para começar o trabalho feito. Webpackoferece energia suficiente para uso imediato que você normalmente não precisaGrunt ou Gulpem tudo.

O uso básico está além do simples. Instale o Webpack como o Browserify:

npm install -g –save-dev webpack

E passe ao comando um ponto de entrada e um arquivo de saída:

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

• SystemJS: é um carregador de módulo que pode importar módulos em tempo de execução em qualquer um dos formatos populares usados ​​hoje ( CommonJS, UMD, AMD, ES6). Ele é construído sobre o ES6polyfill do carregador de módulos e é inteligente o suficiente para detectar o formato que está sendo usado e manipulá-lo adequadamente. SystemJStambém pode transpilar o código ES6 (com Babelou Traceur) ou outros idiomas como TypeScripte CoffeeScriptusando plug-ins.

Deseja saber o que é node modulee por que não está bem adaptado ao navegador.

Artigo mais ú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 que jspmeSystemJS ?

Um dos principais objetivos da ES6modularidade é torná-lo realmente simples de instalar e usar qualquer biblioteca Javascript de qualquer lugar na Internet ( Github, npm, etc.). Apenas duas coisas são necessárias:

• Um único comando para instalar a biblioteca
• Uma única linha de código para importar a biblioteca e usá-la

Então jspm, você pode fazer isso.

1. Instale a biblioteca com um comando: jspm install jquery
2. Importe a biblioteca com uma única linha de código, sem necessidade de referência externa dentro do seu arquivo HTML.

display.js

var $ = require('jquery'); 

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

3. Em seguida, você configura essas coisas System.config({ ... })antes de importar seu módulo. Normalmente, quando executado jspm init, haverá um arquivo nomeado config.jspara esse fim.

4. Para executar esses scripts, precisamos carregar system.jse config.jsna página HTML. Depois disso, carregaremos o display.jsarquivo usando o SystemJScarregador de módulos.

index.html

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

Observou: Você também pode usar npmcom Webpackcomo angular 2 que tenha pedido isso. Como jspmfoi desenvolvido para integrar-se SystemJSe funciona sobre a npmfonte existente , sua resposta é sua.

3. Executor de Tarefas

Executores de tarefas e ferramentas de construção são principalmente ferramentas de linha de comando. Por que precisamos usá-los: Em uma palavra: automação . Quanto menos trabalho você executar ao executar tarefas repetitivas, como minificação, compilação, teste de unidade, fiapos, que anteriormente nos custaram muitas vezes com linha de comando ou mesmo manualmente.

• Grunt: Você pode criar automação para o seu ambiente de desenvolvimento para pré-processar códigos ou criar scripts de construção com um arquivo de configuração e parece muito difícil lidar com uma tarefa complexa. Popular nos últimos anos.

Cada tarefa Grunté uma variedade de configurações diferentes de plugins, que simplesmente são executadas uma após a outra, de maneira estritamente independente e seqüencial.

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: Automação exatamente como em Gruntvez de configurações, você pode escrever JavaScriptcom fluxos como se fosse um aplicativo de nó. Prefira estes dias.

Esta é uma Gulpdeclaração de tarefa de amostra.

//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);
});

Veja mais: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4. Ferramentas para andaimes

• Slush and Yeoman: Você pode criar projetos iniciais com eles. Por exemplo, você planeja criar um protótipo com HTML e SCSS e, em vez de criar manualmente alguma pasta, como scss, css, img, fonts. Você pode simplesmente instalar yeomane executar um script simples. Então tudo aqui para você.

Encontre mais aqui .

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

Veja mais: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

Minha resposta não é realmente compatível com o conteúdo da pergunta, mas quando estou pesquisando esses conhecimentos no Google, sempre vejo a pergunta no topo, então decidi respondê-la em resumo. Espero que vocês tenham achado útil.

OK, todos eles têm algumas semelhanças, eles fazem as mesmas coisas para você de maneiras diferentes e semelhantes, divido-os em 3 grupos principais, como abaixo:

webpack e browserify como populares, funcionam como executores de tarefas, mas com mais flexibilidade, além de agrupar tudo como sua configuração, para que você possa apontar para o resultado como bundle.js, por exemplo, em um único arquivo, incluindo CSS e Javascript, para Para obter mais detalhes de cada um, veja os detalhes abaixo:

webpack

O webpack é um empacotador de módulo para aplicativos JavaScript modernos. Quando o webpack processa seu aplicativo, ele cria recursivamente um gráfico de dependência que inclui todos os módulos que seu aplicativo precisa e empacota todos esses módulos em um pequeno número de pacotes configuráveis ​​- geralmente apenas um - a serem carregados pelo navegador.

É incrivelmente configurável, mas para começar, você só precisa entender os Quatro Conceitos Principais: entrada, saída, carregadores e plugins.

Este documento pretende fornecer uma visão geral de alto nível desses conceitos, além de fornecer links para casos de uso específicos de conceitos detalhados.

mais aqui

browserify

O Browserify é uma ferramenta de desenvolvimento que nos permite escrever módulos no estilo node.js. que são compilados para uso no navegador. Assim como o nó, escrevemos nossos módulos em arquivos separados, exportando métodos e propriedades externas usando as variáveis ​​module.exports e exporta. Podemos até exigir outros módulos usando a função require, e se omitirmos o caminho relativo, ele será resolvido no módulo no diretório node_modules.

mais aqui

2) Executores de tarefas

gulp e grunt são executores de tarefas, basicamente o que eles fazem, criando tarefas e executando-os sempre que quiser, por exemplo, você instala um plug-in para reduzir seu CSS e, em seguida, executa-o toda vez para realizar a redução, mais detalhes sobre cada um:

gole

O gulp.js é um kit de ferramentas JavaScript de código aberto da Fractal Innovations e da comunidade de código aberto do GitHub, usado como um sistema de criação de streaming no desenvolvimento web front-end. É um executor de tarefas criado no Node.js e no Node Package Manager (npm), usado para automação de tarefas demoradas e repetitivas envolvidas no desenvolvimento da web, como minificação, concatenação, bloqueio de cache, teste de unidade, fiapo, otimização etc. uma abordagem de código sobre configuração para definir suas tarefas e conta com seus pequenos plugins de propósito único para executá-los. O gulp ecossistema tem mais de 1000 plugins disponíveis para você escolher.

mais aqui

grunhido

Grunt é um executor de tarefas JavaScript, uma ferramenta usada para executar automaticamente tarefas frequentemente usadas, como minificação, compilação, teste de unidade, fiapos etc. Ele usa uma interface de linha de comando para executar tarefas personalizadas definidas em um arquivo (conhecido como Gruntfile) . Grunt foi criado por Ben Alman e está escrito em Node.js. É distribuído via npm. Atualmente, existem mais de cinco mil plugins disponíveis no ecossistema Grunt.

mais aqui

3) Gerenciadores de pacotes

gerenciadores de pacotes, o que eles fazem é gerenciar plugins necessários em seu aplicativo e instalá-los para você através do github etc usando package.json, muito útil para atualizar seus módulos, instalá-los e compartilhar seu aplicativo, mais detalhes para cada:

npm

O npm é um gerenciador de pacotes para a linguagem de programação JavaScript. É o gerenciador de pacotes padrão para o ambiente de tempo de execução JavaScript Node.js. Ele consiste em um cliente de linha de comando, também chamado npm, e um banco de dados online de pacotes públicos, chamado registro npm. O registro é acessado pelo cliente e os pacotes disponíveis podem ser pesquisados ​​e pesquisados ​​no site da npm.

mais aqui

caramanchão

O Bower pode gerenciar componentes que contêm HTML, CSS, JavaScript, fontes ou mesmo arquivos de imagem. O Bower não concatena ou reduz o código ou faz qualquer outra coisa - apenas instala as versões corretas dos pacotes necessários e suas dependências. Para começar, o Bower trabalha buscando e instalando pacotes de todas as partes, cuidando da caça, localização, download e salvamento do material que você procura. O Bower rastreia esses pacotes em um arquivo de manifesto, bower.json.

mais aqui

e o gerenciador de pacotes mais recente que não deve ser esquecido, é jovem e rápido no ambiente de trabalho real, comparado ao npm que eu estava usando antes, para reinstalar módulos, ele verifica a pasta node_modules para verificar a existência do módulo, também parece que a instalação dos módulos leva menos tempo:

fio

O Yarn é um gerenciador de pacotes para o seu código. Ele permite que você use e compartilhe códigos com outros desenvolvedores de todo o mundo. O fio faz isso de maneira rápida, segura e confiável, para que você nunca precise se preocupar.

O Yarn permite que você use as soluções de outros desenvolvedores para diferentes problemas, facilitando o desenvolvimento do seu software. Se você tiver problemas, poderá relatar problemas ou contribuir de volta e, quando o problema for resolvido, poderá usar o Yarn para manter tudo atualizado.

O código é compartilhado através de algo chamado pacote (às vezes chamado de módulo). Um pacote contém todo o código que está sendo compartilhado, além de um arquivo package.json que descreve o pacote.

mais aqui

Você pode encontrar algumas comparações técnicas no npmcompare

Comparando browserify x grunt x gulp x webpack

Como você pode ver, o webpack é muito bem mantido, com uma nova versão saindo a cada 4 dias em média. Mas Gulp parece ter a maior comunidade de todas (com mais de 20 mil estrelas no Github) Grunt parece um pouco negligenciado (comparado aos outros)

Então, se precisar escolher um sobre o outro, eu iria com o Gulp

Uma pequena observação sobre o npm: o npm3 tenta instalar dependências de maneira simples

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

O que é o webpack e o webpack-dev-server? A documentação oficial diz que é um empacotador de módulos, mas para mim é apenas um executor de tarefas. Qual é a diferença?

O webpack-dev-server é um servidor da Web de recarga ao vivo que os desenvolvedores do Webpack usam para obter feedback imediato sobre o que fazem. Só deve ser usado durante o desenvolvimento.

Este projeto é fortemente inspirado pela ferramenta de teste de unidade nof5 .

Webpack como o nome indica criará uma ÚNICA pacote de idade para a web . O pacote será minimizado e combinado em um único arquivo (ainda vivemos na era HTTP 1.1). Webpack faz a mágica de combinar os recursos (JavaScript, CSS, imagens) e injetá-los como este: <script src="assets/bundle.js"></script>.

Também pode ser chamado de empacotador de módulo, pois deve entender as dependências do módulo e como capturar as dependências e agrupá-las.

Onde você usaria o browserify? Não podemos fazer o mesmo com as importações de nó / ES6?

Você pode usar o Browserify exatamente nas mesmas tarefas em que usaria o Webpack . - O Webpack é mais compacto, no entanto.

Observe que os recursos do carregador de módulo ES6 no Webpack2 estão usando System.import , que nem um único navegador suporta nativamente.

Quando você usaria gulp / grunt sobre npm + plugins?

Você pode esquecer Gulp, Grunt, Brokoli, Brunch e Bower . Em vez disso, use diretamente scripts de linha de comando npm e você pode eliminar pacotes extras como estes aqui para o 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'),

Você provavelmente pode usar os geradores de arquivos de configuração Gulp e Grunt ao criar arquivos de configuração para o seu projeto. Dessa forma, você não precisa instalar o Yeoman ou ferramentas similares.

O Yarn é um gerenciador de pacotes recente que provavelmente merece ser mencionado.
Então, aqui está: https://yarnpkg.com/

Tanto quanto sei, ele pode buscar as dependências npm e bower e possui outros recursos apreciados.

Webpacké um empacotador. Como Browserfyele procura na base de código por solicitações de módulo ( requireou import) e as resolve recursivamente. Além disso, você pode configurar Webpackpara resolver não apenas módulos semelhantes a JavaScript, mas CSS, imagens, HTML, literalmente tudo. O que mais me deixa empolgado é que Webpackvocê pode combinar os módulos compilados e carregados dinamicamente no mesmo aplicativo. Assim, obtém-se um aumento real de desempenho, especialmente sobre HTTP / 1.x. Como exatamente você faz isso, descrevi com exemplos aqui http://dsheiko.com/weblog/state-of-javascript-modules-2017/ Como uma alternativa para empacotador, podemos pensar em Rollup.js( https://rollupjs.org/ ) , que otimiza o código durante a compilação, mas remove todos os pedaços não utilizados encontrados.

Pois AMD, em vez de RequireJSum pode ir com nativo ES2016 module system, mas carregado com System.js( https://github.com/systemjs/systemjs )

Além disso, eu apontaria que npmé frequentemente usado como uma ferramenta de automação como gruntou gulp. Confira https://docs.npmjs.com/misc/scripts . Pessoalmente, agora eu uso scripts npm, evitando apenas outras ferramentas de automação, embora no passado eu gostasse muito grunt. Com outras ferramentas, você precisa contar com inúmeros plugins para pacotes, que geralmente não são bons escritos e não são mantidos ativamente. npmconhece seus pacotes, então você chama qualquer um dos pacotes instalados localmente por nome como:

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

Na verdade, você geralmente não precisa de nenhum plug-in se o pacote suportar CLI.