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

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

Вопросы:

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

VB_

Ответы (7)

Webpack и Browserify

Webpack и Browserify выполняют примерно одинаковую работу: обрабатывает ваш код для использования в целевой среде (в основном браузере, хотя вы можете настроить таргетинг на другие среды, такие как Node). Результатом такой обработки является один или несколько пакетов - скомпонованных скриптов, подходящих для целевой среды.

Например, предположим, вы написали код ES6, разделенный на модули, и хотите иметь возможность запускать его в браузере. Если эти модули являются модулями Node, браузер их не поймет, поскольку они существуют только в среде Node. Модули ES6 также не будут работать в старых браузерах, таких как IE11. Более того, вы могли использовать экспериментальные языковые функции (следующие предложения ES), которые браузеры еще не реализуют, поэтому запуск такого скрипта просто вызовет ошибки. Такие инструменты, как Webpack и Browserify, решают эти проблемы, переводя такой код в форму, которую браузер может выполнить. Вдобавок ко всему, они позволяют применять к этим пакетам огромное количество разнообразных оптимизаций.

Однако Webpack и Browserify во многом различаются, Webpack предлагает множество инструментов по умолчанию (например, разделение кода), а Browserify может сделать это только после загрузки плагинов, но использование обоих приводит к очень похожим результатам. Все сводится к личным предпочтениям (Webpack более модный). Кстати, Webpack - это не средство выполнения задач, это просто обработчик ваших файлов (он обрабатывает их так называемыми загрузчиками и плагинами), и он может быть запущен (среди других способов) средством запуска задач.


Сервер разработки Webpack

Webpack Dev Server предоставляет решение, аналогичное Browsersync - серверу разработки, на котором вы можете быстро развернуть приложение по мере того, как вы работаете над ним, и сразу же проверять ход разработки, при этом сервер разработки автоматически обновляет браузер при изменении кода или даже распространение измененного кода в браузер без перезагрузки с так называемой горячей заменой модуля.


Исполнители задач и сценарии NPM

Я использовал Gulp из-за его краткости и легкости написания задач, но позже обнаружил, что мне вообще не нужны ни Gulp, ни Grunt. Все, что мне когда-либо было нужно, можно было сделать с помощью сценариев NPM для запуска сторонних инструментов через их API.Выбор между сценариями Gulp, Grunt или NPM зависит от вкуса и опыта вашей команды.

• 100001 С другой стороны, замена этих задач комбинацией сценариев NPM и (вероятно, JS) сценариев, которые запускают эти сторонние инструменты (например, настройка и запуск сценария узла rimraf для очистки) может быть более сложной задачей. Но в большинстве случаев эти трое равны по своим результатам.


Примеры

Что касается примеров, я предлагаю вам взглянуть на этот стартовый проект React, который показывает вам красивую комбинацию сценариев NPM и JS, охватывающих весь процесс сборки и развертывания. Вы можете найти эти сценарии NPM в package.json в корневой папке в свойстве с именем scripts. Здесь вы в основном встретите такие команды, как babel-node tools / run start. Babel-node - это инструмент CLI (не предназначенный для производственного использования), который сначала компилирует файл ES6 tools / run (файл run.js находится в tools) - в основном утилита runner . Этот бегун принимает функцию в качестве аргумента и выполняет ее, в данном случае это start - другая утилита (start.js), отвечающая за объединение исходных файлов (как клиентских, так и серверных) и запуск сервера приложений и разработки (сервером разработки, вероятно, будет Webpack Dev Server или Browsersync).

Говоря точнее, start.js создает пакеты как на стороне клиента, так и на стороне сервера, запускает экспресс-сервер и после успешного запуска инициализирует синхронизацию браузера, которая на момент написания выглядела так (см. на реагировать на стартовый проект для новейшего кода).

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)

Важной частью является proxy.target, где они устанавливают адрес сервера, который они хотят прокси, который может быть http://localhost: 3000, а Browsersync запускает сервер, прослушивающий http://localhost: 3001, где сгенерированные активы обслуживаются с автоматическим обнаружением изменений и горячей заменой модуля. Как вы можете видеть, есть еще одно свойство конфигурации files с отдельными файлами или шаблонами. Синхронизация браузера отслеживает изменения и перезагружает браузер, если они происходят, но, как говорится в комментарии, Webpack заботится о просмотре источников js с помощью сам с HMR, поэтому они там сотрудничают.

Сейчас у меня нет эквивалентного примера такой конфигурации Grunt или Gulp, но с Gulp (и в некоторой степени аналогично с Grunt) вы бы написали отдельные задачи в gulpfile.js, например

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

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

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

Обновление за октябрь 2018 г.

Если вы все еще не уверены насчет Front-end разработчика, вы можете быстро ознакомиться с отличным ресурсом здесь.

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

Обновление за июнь 2018 г.

Изучить современный JavaScript сложно, если вы не были там с самого начала. Если вы новичок, не забудьте проверить это отличное письмо, чтобы получить лучший обзор.

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

Обновление за июль 2017 г.

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

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


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

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

Содержание

  • Содержание
  • 1. Менеджер пакетов
    • NPM
    • беседка
    • Разница между Bower и NPM
    • Пряжа
    • jspm
  • 2. Загрузчик модулей / комплектация
    • ТребоватьJS
    • Просмотр
    • Webpack
    • SystemJS
  • 3. Бегун задач
    • Ворчание
    • Глоток
  • 4. Инструменты для строительных лесов
    • Слякоть и Йомен

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

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

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

NPM

Это означает: Менеджер пакетов Node JS помогает вам управлять всеми библиотеками, на которые опирается ваше программное обеспечение. Вы должны определить свои потребности в файле с именем package.json и запустить npm install в командной строке ... затем BANG, ваши пакеты загружены и готовы к использованию. Его можно использовать как для интерфейсных, так и фоновых библиотек.

Бауэр

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

Bower рекомендуется пользователям перейти на npm или yarn. Будьте осторожны

Разница между Bower и NPM

Самая большая разница между 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

Башня

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

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

Пряжа

Новый менеджер пакетов для JavaScript недавно опубликован на Facebook с некоторыми дополнительными преимуществами по сравнению с NPM. А с Yarn вы по-прежнему можете использовать реестр NPMи Bower для получения пакета. Если вы установили пакет раньше, yarn создает кэшированную копию, которая упрощает установку автономных пакетов.

jspm

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

Посмотрите разницу между Bower и jspm: Менеджер пакетов: Bower vs jspm


2. Модуль загрузки / комплектации

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

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

Например,

<заголовок>
     Скейтборд 
    
    
    
    
    
    
    
    
    
    

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

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

Требуется JS

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

Например: myModule.js

// package / lib - это необходимая нам зависимость
define (["package / lib"], function (lib) {
  // поведение нашего модуля
  function foo () {
    lib.log («привет, мир!»);
  }

  // экспортируем (выставляем) foo в другие модули как foobar
  возвращение {
    foobar: foo,
  };
});

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

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

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


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

Browserify

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

Начните с машины сборки, на которой установлен node & npm, и получите пакет:

npm install -g –save-dev browserify

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

// точка входа.js
var foo = require ("../ foo.js");
console.log (foo (4));

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

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

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


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 и достаточно умен, чтобы определять используемый формат и обрабатывать его соответствующим образом.SystemJS также может переносить код ES6 (с Babel или Traceur) или другие языки, такие как TypeScript и CoffeeScriptс помощью плагинов.

Хотите знать, что такое модуль узла и почему он не адаптирован для работы в браузере.

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


Почему jspm и SystemJS?

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

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

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

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

display.js

var $ = require ('jquery');

$ ('body'). append («Я импортировал jQuery!»);
  1. Затем вы настраиваете эти вещи в System.config ({...}) перед импорт вашего модуля. Обычно при запуске jspm initбудет файл с именем config.js для этой цели.

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

index.html



<сценарий>
  System.import ("скрипты / display.js");

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


3. Бегун задач

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

Ворчание

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

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

grunt.initConfig ({
    чистый: {
    src: ['build / app.js', 'build / vendor.js']
    },

    copy: {
    файлы: [{
        src: 'build / app.js',
        dest: 'build / dist / app.js'
    }]
    }

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

    // ... другие конфигурации задач ...

});

grunt.registerTask ('построить', ['очистить', 'беседку', 'просмотреть', 'объединить', 'скопировать']);

Глоток

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

Это пример объявления задачи Gulp.

// импортируем необходимые плагины gulp
var gulp = require ("глоток");
var sass = require ("глоток-sass");
var minifyCss = require ("gulp-minify-css");
var rename = require ("глоток-переименовать");

// объявляем задачу
gulp.task ("sass", function (done) {
  глоток
    .src ("./ scss / ionic.app.scss")
    .pipe (sass ())
    .pipe (gulp.dest ("./www/css/"))
    .трубка(
      minifyCss ({
        keepSpecialComments: 0,
      })
    )
    .pipe (переименовать ({extname: ".min.css"}))
    .pipe (gulp.dest ("./www/css/"))
    .on ("конец", готово);
});

Подробнее: https://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/


4. Строительный инструмент

Слякоть и Йомен

С ними можно создавать стартовые проекты. Например, вы планируете создать прототип с HTML и SCSS, а затем вместо того, чтобы вручную создавать какую-то папку, такую ​​как scss, css, img, fonts. Вы можете просто установить yeoman и запустить простой скрипт. Тогда все здесь для вас.

Подробнее здесь.

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, я всегда вижу вопрос вверху, поэтому я решил ответить на него вкратце. Надеюсь, вы сочли это полезным.

Если вам понравился этот пост, вы можете прочитать больше в моем блоге по адресу trungk18.com. Спасибо за посещение :)

Yarn is a recent package manager that probably deserves to be mentioned.
So, here it is: https://yarnpkg.com/

As far as I know it can fetch both npm and bower dependencies and has other appreciated features.

Хорошо, все они имеют некоторое сходство, они делают для вас одни и те же вещи разными и похожими способами, я делю их на 3 основные группы, как показано ниже:


1) Сборщики модулей

webpack и browserify как популярные, работают как бегуны задач, но с большей гибкостью, также он объединяет все вместе в соответствии с вашими настройками, поэтому вы можете указать результат как bundle.js, например, в одном файле, включая CSS и Javascript, для получения более подробной информации о каждом, просмотрите детали ниже:

веб-пакет

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

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

Этот документ предназначен для общего обзора этих концепции, обеспечивая при этом ссылки на подробные сведения, относящиеся к конкретным варианты использования.

подробнее здесь

просмотреть

Browserify - это инструмент разработки, который позволяет нам писать в стиле node.js модули, которые компилируются для использования в браузере. Как и в случае с узлом, мы пишем наши модули в отдельных файлах, экспорт внешних методов и свойства с помощью переменных module.exports и exports. Мы можем даже требовать другие модули, использующие функцию require, и если мы опустим относительный путь, который он разрешит к модулю в node_modules каталог.

подробнее здесь


2) Задачи

gulp и grunt - это исполнители задач, в основном то, что они делают, создавая задачи и запускайте их, когда захотите, например, вы устанавливаете плагин для минимизации CSS, а затем запускаете его каждый раз для минимизации, подробнее о каждом:

глоток

gulp.js - это набор инструментов JavaScript с открытым исходным кодом от Fractal Innovations. и сообщество с открытым исходным кодом на GitHub, используемое в качестве потоковой сборки система в интерфейсной веб-разработке. Это бегун задач, построенный на Node.js и Node Package Manager (npm), используемые для автоматизации трудоемкие и повторяющиеся задачи, связанные с веб-разработкой, такие как минификация, конкатенация, очистка кеша, модульное тестирование, линтинг, оптимизация и т. д. gulp использует подход "код поверх конфигурации" для определяет свои задачи и полагается на свои небольшие одноцелевые плагины для выполнять их. В экосистеме gulp доступно более 1000 таких плагинов на выбор.

подробнее здесь

хрюканье

Grunt - это средство выполнения задач JavaScript, инструмент, используемый для автоматического выполнять часто используемые задачи, такие как минификация, компиляция, юнит тестирование, линтинг и т. д. Он использует интерфейс командной строки для запуска пользовательских задачи, определенные в файле (известном как Gruntfile). Grunt был создан Бен Алман и написан на Node.js. Распространяется через npm. В настоящее время доступно более пяти тысяч плагинов. Экосистема Grunt.

подробнее здесь


3) Менеджеры пакетов

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

npm

npm - это менеджер пакетов для языка программирования JavaScript. Это является менеджером пакетов по умолчанию для среды выполнения JavaScript. Node.js. Он состоит из клиента командной строки, также называемого npm, и онлайн-база данных общедоступных пакетов, называемая реестром npm. В доступ к реестру осуществляется через клиента, а доступные пакеты могут быть просматривали и искали через веб-сайт npm.

подробнее здесь

беседка

Bower может управлять компонентами, которые содержат HTML, CSS, JavaScript, шрифты. или даже файлы изображений. Бауэр не объединяет и не сокращает код и не выполняет что-нибудь еще - он просто устанавливает нужные версии пакетов вам нужны и их зависимости. Для начала Bower загружает и устанавливает пакеты из повсюду, заботясь об охоте, поиске, загрузке и сохранении то, что вы ищете. Bower отслеживает эти посылки в файл манифеста, bower.json.

подробнее здесь

и самый последний менеджер пакетов, который нельзя пропустить, он молодой и быстрый в реальной рабочей среде по сравнению с npm, который я в основном использовал раньше, для переустановки модулей он дважды проверяет папку node_modules, чтобы проверить наличие модуль, также кажется, установка модулей занимает меньше времени:

пряжа

Yarn - это пакетный менеджер для вашего кода. Это позволяет использовать и поделиться кодом с другими разработчиками со всего мира. Пряжа делает это быстро, безопасно и надежно, чтобы вам не о чем беспокоиться.

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

Код передается через так называемый пакет (иногда называемый как модуль). Пакет также содержит весь общий код как файл package.json, описывающий пакет.

подробнее здесь


Webpack - это сборщик. Как и Browserfy, он ищет в базе кода запросы модулей (require или import) и рекурсивно разрешает их. Более того, вы можете настроить Webpack для разрешения не только JavaScript-подобных модулей, но и CSS, изображений, HTML, буквально всего. Что особенно меня восхищает в Webpack, вы можете комбинировать как скомпилированные, так и динамически загружаемые модули в одном приложении. Таким образом достигается реальный прирост производительности, особенно по HTTP / 1.x. Как именно вы это делаете, я описал с примерами здесь http://dsheiko.com/weblog/state-of-javascript-modules-2017/ В качестве альтернативы сборщику можно подумать о Rollup.js (https://rollupjs.org/), который оптимизирует код во время компиляции, но удаляет все найденные неиспользуемые фрагменты.

Для AMDвместо RequireJS можно использовать родную модульную систему ES2016, но загруженную System.js (https://github.com/systemjs/systemjs)

Кроме того, я хотел бы указать, что npm часто используется как инструмент автоматизации, например grunt или gulp. Выезд https://docs.npmjs.com/misc/scripts. Я лично сейчас использую сценарии npm, избегая только других инструментов автоматизации, хотя в прошлом мне очень нравилось grunt. С другими инструментами вам придется полагаться на бесчисленные плагины для пакетов, которые часто плохо написаны и не поддерживаются активно.npm знает свои пакеты, поэтому вы вызываете любой из локально установленных пакетов по имени, например:

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

На самом деле вам, как правило, не требуется никаких плагинов, если пакет поддерживает CLI.

Вы можете найти техническое сравнение на npmcompare

Сравнение browserify, grunt, gulp и webpack

Как видите, webpack очень хорошо поддерживается, и новая версия выходит в среднем каждые 4 дня. Но у Gulp, похоже, самое большое их сообщество (более 20 тысяч звезд на Github). Grunt кажется немного запущенным (по сравнению с другими)

Так что, если нужно выбрать что-то одно, я бы выбрал Gulp

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

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

Этот проект в значительной степени вдохновлен инструментом модульного тестирования nof5.

Webpack, как следует из названия, создаст SINGLE packвозраст для web. Пакет будет свернут и объединен в один файл (мы все еще живем в эпоху HTTP 1.1).Webpack творит чудеса, объединяя ресурсы (JavaScript, CSS, изображения) и вставляя их следующим образом: .

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

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

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

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

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

Вы можете забыть Gulp, Grunt, Brokoli, Brunch and 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 или аналогичные инструменты.

2022 WebDevInsider