[gruntjs] NPM против Bower против Browserify против Gulp против Grunt против Webpack


3 Answers

Я также искал это довольно долгое время, так как там есть много инструментов, и каждый из них приносит нам пользу в другом аспекте. Сообщество делится на такие инструменты, как Browserify, Webpack, jspm, Grunt and Gulp . Вы также можете услышать о Yeoman or Slush . Это не проблема, это просто путано для всех, кто пытается понять четкий путь вперед.

Во всяком случае, я хотел бы что-то внести.

1. Менеджер пакетов

Менеджеры пакетов упрощают установку и обновление зависимостей проектов, таких как: jQuery, Bootstrap и т. Д. - все, что используется на вашем сайте и не написано вами.

Просмотр всех веб-сайтов библиотеки, загрузка и распаковка архивов, копирование файлов в проекты - все это заменяется несколькими командами в терминале.

  • NPM означает: Node JS package manager помогает вам управлять всеми библиотеками, на которые зависит ваше программное обеспечение. Вы должны определить свои потребности в файле с именем package.json и запустить npm install в командной строке ... затем BANG, ваши пакеты будут загружены и готовы к использованию. Может использоваться как для front-end and back-end библиотек.

  • Bower : для управления интерфейсом переднего плана концепция аналогична концепции NPM. Все ваши библиотеки хранятся в файле с именем bower.json а затем запускают bower install bower.json в командной строке.

Наибольшая разница между Bower и NPM заключается в том, что NPM выполняет вложенное дерево зависимостей, а Bower требует плоского дерева зависимостей, как показано ниже.

Цитата: от чего разница между Bower и 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

Есть некоторые обновления по npm 3 Duplication and Deduplication , пожалуйста, откройте документ для более подробной информации.

  • Yarn : новый менеджер пакетов для JavaScript published Facebook недавно с некоторыми преимуществами по сравнению с NPM . А с помощью пряжи вы по-прежнему можете использовать реестр NPM и Bower для извлечения пакета. Если вы уже установили пакет, yarn создает кешированную копию, которая облегчает offline package installs .

  • jspm : это менеджер пакетов для SystemJS универсального модуля SystemJS , построенного поверх динамического ES6 модуля ES6 . Это не совсем новый менеджер пакетов с собственным набором правил, скорее он работает поверх существующих источников пакетов. Из коробки он работает с GitHub и npm . Поскольку большинство пакетов Bower основаны на GitHub , мы можем установить эти пакеты, используя jspm . В нем есть реестр, в котором перечислены большинство распространенных интерфейсных пакетов для упрощения установки.

См. Раздел между Bower и jspm : Менеджер пакетов: Bower vs jspm

2. Загрузочный модуль / комплектация

Большинство проектов любого масштаба будут разделять их код между несколькими файлами. Вы можете просто включить каждый файл с отдельным <script> , однако <script> устанавливает новое http-соединение, а для небольших файлов - цель модульности - время для установления соединения может занять значительно больше времени, чем перенос данные. Пока скрипты загружаются, контент не может быть изменен на странице.

  • Проблема времени загрузки в значительной степени может быть решена путем объединения группы простых модулей в один файл и ее минимизации.

Например 

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>
  • Однако производительность достигается за счет гибкости. Если ваши модули имеют взаимозависимость, это отсутствие гибкости может быть showstopper.

Например 

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

Компьютеры могут сделать это лучше, чем вы можете, и именно поэтому вы должны использовать инструмент для автоматического объединения всего в один файл.

Затем мы услышали о RequireJS , Browserify , Webpack и SystemJS

  • RequireJS : это загрузчик файлов JavaScript и модулей. Он оптимизирован для использования в браузере, но его можно использовать в других средах JavaScript, например в Node .

Например: 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
    }
});

В main.js мы можем импортировать myModule.js качестве зависимости и использовать его. 

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

А затем в нашем HTML мы можем ссылаться на использование с RequireJS . 

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

Узнайте больше о CommonJS и AMD чтобы получить понимание легко. Связь между CommonJS, AMD и RequireJS?

  • Browserify : указать, чтобы разрешить использование форматированных модулей CommonJS в браузере. Следовательно, Browserify не столько загрузчик модулей, сколько блок-узел: Browserify - это инструмент времени сборки, создающий пакет кода, который затем может быть загружен на стороне клиента.

Начните с сборки, на которой установлен узел и npm, и получите пакет: 

npm install -g –save-dev browserify

Напишите свои модули в формате CommonJS 

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

И когда вы счастливы, выполните команду для объединения: 

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

Browserify рекурсивно находит все зависимости точки входа и собирает их в один файл: 

<script src=”bundle-name.js”></script>
  • Webpack : он объединяет все ваши статические активы, включая JavaScript , изображения, CSS и многое другое, в один файл. Он также позволяет обрабатывать файлы с помощью различных типов загрузчиков. Вы можете написать свой JavaScript с синтаксисом модулей CommonJS или AMD . Он атакует проблему сборки в принципиально более интегрированной и упрямой манере. В Browserify вы используете Gulp/Grunt и длинный список преобразований и плагинов, чтобы выполнить работу. Webpack предлагает достаточно мощности из коробки, в которой вам обычно не нужны Grunt или Gulp .

Основное использование не просто. Установите Webpack как Browserify: 

npm install -g –save-dev webpack

И передайте команде точку входа и выходной файл: 

webpack ./entry-point.js bundle-name.js
  • SystemJS : это загрузчик модулей, который может импортировать модули во время выполнения в любом из популярных форматов, используемых сегодня ( CommonJS, UMD, AMD, ES6 ). Он построен поверх ES6 загрузчика модуля ES6 и достаточно умен, чтобы определить используемый формат и соответствующим образом обрабатывать его. SystemJS также может транслировать код ES6 (с Babel или Traceur ) или другие языки, такие как TypeScript и CoffeeScript с помощью плагинов.

Хотите знать, что такое node module и почему он не хорошо адаптирован к браузеру.

Более полезная статья:

Почему jspm и SystemJS ?

Одной из основных целей модульности ES6 является простота установки и использования любой библиотеки Javascript из любого места в Интернете ( Github , npm и т. Д.). Требуются только две вещи:

  • Одна команда для установки библиотеки
  • Одна строка кода для импорта библиотеки и использования ее

Итак, с jspm , вы можете это сделать.

  1. Установите библиотеку с помощью команды: jspm install jquery
  2. Импортируйте библиотеку с одной строкой кода, без необходимости внешней ссылки внутри HTML-файла.

display.js 

var $ = require('jquery'); 

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

  1. Затем вы настраиваете эти вещи в System.config({ ... }) перед импортом своего модуля. Обычно при запуске jspm init для этой цели будет создан файл config.js .

  2. Чтобы эти сценарии выполнялись, нам нужно загрузить system.js и config.js на странице HTML. После этого мы загрузим файл display.js с помощью SystemJS модуля SystemJS .

index.html 

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

Отмечено: вы также можете использовать npm с помощью Webpack поскольку Angular 2 применил его. Поскольку jspm был разработан для интеграции с SystemJS он работает поверх существующего источника npm , поэтому ваш ответ зависит от вас.

3. Запуск задания

Задачи и инструменты построения - это в первую очередь инструменты командной строки. Почему мы должны их использовать: одним словом: автоматизация . Чем меньше работы вы выполняете при выполнении повторяющихся задач, таких как минификация, компиляция, модульное тестирование, листинг, который ранее стоил нам много раз, чтобы делать с командной строкой или даже вручную.

  • Grunt : вы можете создать автоматизацию для вашей среды разработки для предварительного кодирования кода или создания сценариев сборки с помощью файла конфигурации, и, похоже, очень сложно справиться с сложной задачей. Популярный в последние несколько лет.

Каждая задача в Grunt - это набор различных конфигураций плагинов, которые просто выполняются один за другим, строго независимым и последовательным образом. 

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 : Автоматизация, как и Grunt но вместо конфигураций вы можете писать JavaScript с потоками, как это приложение-узел. Предпочитаю в эти дни.

Это декларация задачи образца 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);
});

См. Больше: https://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

4. Лесные инструменты

  • Slush and Yeoman : Вы можете создавать стартовые проекты вместе с ними. Например, вы планируете создавать прототип с помощью HTML и SCSS, а затем вручную создавать некоторые папки, такие как scss, css, img, fonts. Вы можете просто установить yeoman и запустить простой скрипт. Тогда все здесь для вас.

Подробнее here . 

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

Подробнее: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

Мой ответ не совсем соответствует содержанию вопроса, но когда я ищу эти знания в Google, я всегда вижу вопрос сверху, чтобы я решил ответить на него в резюме, а также почему мы должны использовать этот инструмент ,

Недавно я нашел действительно полное руководство от команды Grab о том, как подойти к разработке интерфейса в 2017 году. Вы можете проверить это, как показано ниже.

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

Question

Я пытаюсь обобщить свои знания о самых популярных менеджерах пакетов пакетов, поставщиках пакетов и задачах. Пожалуйста, поправьте меня, если я ошибаюсь:

  • npm & bower - менеджеры пакетов. Они просто загружают зависимости и не знают, как создавать проекты самостоятельно. То, что они знают, это вызов webpack / webpack / grunt после извлечения всех зависимостей.
  • bower похожа на npm , но строит сглаженные деревья зависимостей (в отличие от npm которые делают это рекурсивно). Значение npm выбирает зависимости для каждой зависимости (может получать одно и то же несколько раз), в то время как bower ожидает, что вы вручную включите субзависимости. Иногда bower и npm используются вместе для интерфейсных и back-end соответственно (поскольку каждый мегабайт может иметь значение на интерфейсе).
  • grunt и gulp - это задачи для автоматизации всего, что может быть автоматизировано (например, скомпилировать CSS / Sass, оптимизировать изображения, сделать связку и минимизировать / перетащить ее).
  • grunt vs. gulp (похож на maven vs. gradle или конфигурацию против кода). Grunt основан на настройке отдельных независимых задач, каждая задача открывает / обрабатывает / закрывает файл. Gulp требует меньше кода и основан на потоках узлов, что позволяет ему строить цепочки труб (без повторного открытия одного и того же файла) и делает это быстрее.
  • webpack ( webpack-dev-server ) - для меня это бегун с горячей перезагрузкой изменений, который позволяет забыть обо всех наблюдателях JS / CSS.
  • npm / bower + плагины могут заменить задачи. Их способности часто пересекаются, поэтому есть разные последствия, если вам нужно использовать gulp / grunt над npm + плагинами. Но бегуны задач, безусловно, лучше подходят для сложных задач (например, «на каждом сборке создайте пакет, перейдете с ES6 на ES5, запустите его во всех эмуляторах браузеров, сделайте скриншоты и развернитесь в Dropbox через ftp»).
  • browserify позволяет упаковывать узловые модули для браузеров. browserify vs node на самом деле является AMD против CommonJS .

Вопросов:

  1. Что такое webpack & webpack-dev-server ? Официальная документация говорит, что это модуль-модуль, но для меня это просто задача. Какая разница?
  2. Где вы будете использовать browserify ? Разве мы не можем сделать то же самое с импортом узлов / ES6?
  3. Когда вы будете использовать gulp / grunt над npm + плагинами?
  4. Приведите примеры, когда вам нужно использовать комбинацию


Что такое webpack & webpack-dev-server? Официальная документация говорит, что это модуль-модуль, но для меня это просто задача. Какая разница?

webpack-dev-server - это живой перезагружающийся веб-сервер, который разработчики Webpack используют для немедленной обратной связи с тем, что они делают. Его следует использовать только во время разработки.

Этот проект сильно вдохновлен nof5 тестовым инструментом nof5 .

Webpack, как следует из названия, создаст единый возраст пакета для Интернета . Пакет будет сведен к минимуму и объединен в один файл (мы все еще живем в возрасте HTTP 1.1). Webpack делает магию объединения ресурсов (JavaScript, CSS, изображения) и впрыскивает их следующим образом: <script src="assets/bundle.js"></script> .

Его также можно назвать модулятором пакетов, потому что он должен понимать зависимости модулей и как захватывать зависимости и связывать их вместе.

Где вы будете использовать браузер? Разве мы не можем сделать то же самое с импортом узлов / ES6?

Вы можете использовать Browserify в тех же самых задачах, где вы бы использовали Webpack . Однако Webpack более компактен.

Обратите внимание, что функции загрузчика модуля ES6 в Webpack2 используют System.import , который не поддерживает один браузер.

Когда вы будете использовать gulp / grunt над npm + плагинами?

Вы можете forget Gulp, Grunt, Brokoli, Brunch и Bower . Непосредственно используйте сценарии командной строки npm, и вы можете исключить дополнительные пакеты, подобные этим здесь для 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'),

Вероятно, вы можете использовать генераторы файлов конфигурации Gulp и Grunt при создании файлов конфигурации для вашего проекта. Таким образом, вам не нужно устанавливать Yeoman или подобные инструменты.





StackShare предоставляет бок о бок (или стек ) из трех инструментов за один раз.

Здесь он предназначен для npm против Bower vs. Browserify и для gulp vs. Webpack vs. Grunt

На этих страницах сравнения вы можете найти следующее:

  • количество голосов, полученных каждым из сообщества StackShare
  • какие компании используют их в своем техническом стеке
  • уровень интереса для каждого со временем
  • профи для каждого инструмента


Share

Twitter   Google+   Facebook  

Related


Tags

gruntjs   npm npm   gulp gulp   bower   webpack webpack