Npm и бауэр и browserify против gulp против грунт и webpack

Как работает Webpack

В любом веб-проекте есть файлы HTML, CSS, JavaScript, ресурсы, как шрифты, изображения и т.д. Таким образом, рабочий процесс webpack включает в себя настройку файла index.html с соответствующими ссылками на CSS, JavaScript и необходимые ресурсы.

При выполнении задач webpack опирается на конфигурацию. Они прописаны в файле webpack.config.js. В нем указано, как файлы и ресурсы следует трансформировать.

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

Если модуль содержит зависимости, процесс выполняется рекурсивно для каждой зависимости. Затем webpack объединяет все модули проекта в небольшое количество бандлов (обычно только один), чтобы их можно было загрузить в браузер.

Сравнительная статистика

Даты выхода проектов

Grunt появился в конце 2011 года. Потребовалось около года, чтобы этот проект заметили. Gulp вышел в середине 2013 года. Он был замечен аудиторией в начале 2014 года и число пользователей Gulp постоянно растет.

Аудитория

Статистика Grunt:

Количество загрузок	14 миллионов
Количество загрузок за последний месяц	1.3 миллиона
Среднее количество загрузок в день	42,075

Статистика Gulp:

Количество загрузок	5.9 миллионов
Количество загрузок за последний месяц	~929,000
Среднее количество загрузок в день	32,479

Количество плагинов

Grunt и Gulp имеют официальные каталоги плагинов. Grunt имеет 4,663 плагинов. Gulp — 1,561 плагинов. Grunt имеет почти в 3 раза больше плагинов, чем Gulp. Но надо иметь ввиду, что у Grunt есть значительная фора во времени.

Активность разработки

Чтобы оценить программное обеспечение, можно посмотреть как часто оно обновляется. Если над инструментом постоянно ведется работа, в нем исправляются ошибки, то он получатся более качественным. Глядя на Github репозитории Grunt и Gulp мы можем получить представление об уровне активности разработчиков. Коммиты (commits) происходят каждый раз, когда код был обновлен. Это может показать насколько активно разработчики работают над проектом.

Setup

Создайте новый проект с помощью npm и установите webpack и webpack-cli.

mkdir hello-webpack && cd hello-webpack
npm init -y
npm install --save-dev webpack webpack-cli

Теперь, в вашей корневой папке проекта, сделайте каталоги src и public. Папка src будет содержать наш необработанный исходный код, и мы дадим указание Webpack сгенерировать собранный код в папку public. Вам также необходимо создать файл с именем webpack.config.js — но об этом позже. Ваш проект должен выглядеть так:

hello-webpack/
├── src/
├── public/
├── webpack.config.js
└── package.json

package.json

{
  "name": "hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../src/game.js" defer></script>
  <script src="../src/main.js" defer></script>
  <link rel="stylesheet" href="style.css" />
  <title>Click Me</title>
</head>
<body>
  <button id="button">Click Me!</button>
</body>
</html>

public/style.css

button {
  height: 300px;
  width: 300px;
  font-size: 40px;
  background-color: goldenrod;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

src/game.js

  let numTimesClicked = 0;

  function win() {
    alert('You win!');
    reset();
  }

  function reset() {
    numTimesClicked = 0;
  }

  function click() {
    numTimesClicked++;
    console.log(`You've been clicked!`);
    if (numTimesClicked === 10) win();
  }

src/main.js

const button = document.getElementById('button');

button.addEventListener('click', function() {
  click();
});

Возможности

Компонентый подход к работе: структура файлов компонентов реализована по БЭМ
Автоматические создание директории компонента с файлами при помощи инструмента .
Использование Html-препроцессора Pug
Использование Css-препроцессора Sass
Использование Webpack для сборки javascript-модулей
Сборка иконок в спрайты: svg, png
Использование полифила Babel для поддержки старых браузеров при использовании современного синтаксиса ES6 в javaScript
Включен фреймворк Bootstrap последней версии по умолчанию
Проверка js-кода на наличие ошибок линтером Eslint
Автоматическое исправление ошибок в js-коде линтером Eslint
Конвертация изображений в современный веб-формат webp
Автоматическая генерация фавиконок для разных устройств с файлом манифеста приложения
Стартовый шаблон для быстрого начала верстки

Менеджер Пакетов

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

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

NPM

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

Беседка

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

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

Пряжа

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

jspm

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

Создание базовой конфигурации Browserify

Продолжаем осваивать основы Browserify. Сделаем небольшую конфигурацию Browserify, способную:

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

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

Мы будем использовать скрипты npm для настройки проекта (в следующем разделе мы сделаем это же с помощью Gulp).

Приступим.

Установка зависимостей

Нам надо установить несколько пакетов:

Caching-Coffeify для поддержки Coffeescript в ходе работы сервера;
Coffeeify для поддержки Coffeescript при сборке проекта;
Beefy для перезагрузки в реальном времени;
Minifyify для минификации нашего проекта.

Beefy у нас уже установлен, все остальное мы поставим одной командой:

Теперь приступим к сборке наших скриптов. Откройте , в нем вы найдете объект , в котором должен быть ключ .

Сразу после него добавьте задачу :

Готовый вы найдете в моем репозитории на GitHub. И, да, если в предыдущих примерах вам пришлось использовать опцию , то вам придется использовать ее и сейчас.

Сохранитесь, вернитесь в терминал и запустите . Вы увидите тот же вывод, что и ранее с Beefy.

Вы можете получить ошибку ENOSPC. В этом случае запустите и попытайтесь еще раз. Если и это не поможет, вам стоит попробовать .

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

Начало неплохое. Перейдем к завершению.

Откройте еще раз и измените скрипт :

При использовании Beefy опция позволяет передавать опции для запуска Browserify. Первая из этих опций , говорящая о том, что при сборке будет трансформация, в нашем случае это Caching-Coffeeify, компиляция Coffeescript в Javascript, оптимизированная для перекомпиляции только того, что поменялось, в отличие от стандартной опции трансформации Coffeeify.

Теперь мы можем использовать Coffeescript в нашем проекте. Вы можете увидеть это в действии, создав отдельно от :

И исправив, соответственно, :

Теперь запустите , перейдите на http://localhost:9966 — все будет работать.

Задание по сборке

Теперь добавим в задание по сборке минифицированного проекта с отдельными картами источников:

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

Webpack и Browserify

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

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

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

Примеры

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

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

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

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

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

3 отличный ответ! Не могли бы вы описать, пожалуйста, каким образом webpack / browserify управляет модулями повторного использования узлов в браузере?
4 Webpack собирает зависимости (экспортированные значения модулей) в объект (installedModules). Следовательно, каждый модуль является свойством этого объекта, а имя такого свойства представляет его идентификатор (например, 1, 2, 3 … и т. Д.). Каждый раз, когда вам требуется такой модуль в вашем источнике, webpack преобразует значение в вызов функции с идентификатором модуля в аргументе (например, __webpack_require __ (1)), который возвращает правильную зависимость на основе поиска в установленных модулях по идентификатору модуля. Я не уверен, как Browserify с этим справляется.
@Dan Sko dopole Не могли бы вы рассказать подробнее?
1 Я не согласен с описанием базового использования gulp или grunt, эти два параметра легко сравнить с помощью google, webpack-dev-server требует, чтобы сначала понять webpack, и это выходит за рамки этого вопроса / ответа, но у меня есть представил некоторую конфигурацию Browsersync. Вы правы со стартовым комплектом, и я подробно остановился на нем.
5 +1 за сокращение зависимостей для упрощения работы, а не следование (более) популярному мнению о необходимости использования каждого нового пакета!

Обновление октябрь 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

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

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

Препорцессинг с Gulp

Мы можем компилировать Sass в Css с помощью плагина gulp-sass. Для установки gulp-sass надо запустить команду:

$ npm install gulp-sass —save-dev

1	$npm install gulp-sass—save-dev

В gulpfile.js необходимо записать:

var sass = require(‘gulp-sass’);

1	varsass=require(‘gulp-sass’);

Создадим задачу sass()

gulp.task(‘sass’, function(){
gulp.src(‘source-files’)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination’))
});

1
2
3
4
5
6

crayon-61bb602060994208584189inline=»true»

gulp.task(‘sass’,function(){

gulp.src(‘source-files’)

.pipe(sass())// Using gulp-sass

.pipe(gulp.dest(‘destination’))

});

Далее нам необходимо создать файл

styles.scss

1	styles.scss

в папке app/scss и указать путь к этому файлу в gulp.src. Скомпилированный файл styles.css будет лежать в папке app/css. Укажем эту папку в gulp.dest.

gulp.task(‘sass’, function(){
gulp.src(‘source-files’)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination’))
});

1
2
3
4
5

gulp.task(‘sass’,function(){

gulp.src(‘source-files’)

.pipe(sass())// Using gulp-sass

.pipe(gulp.dest(‘destination’))

});

Для проверки правильности настройки задачи, добавим функцию sass в файл styles.scss .

// styles.scss
.testing {
width: percentage(5/7);
}

1
2
3
4

// styles.scss

.testing {

widthpercentage(5/7);

}

Если вы запустите команду gulp sass в командной строке, то вы увидите, что в папке app/css появится файл styles.css , в котором будет следующий код:

/* styles.css */
.testing {
width: 71.42857%;
}

1
2
3
4

/* styles.css */

.testing {

width71.42857%;

}

Теперь мы знаем, как работает задача sass.

Если вам необходимо выбрать несколько файлов в gulp.src, то можно использовать специальные выражения.

*.scss : Символ * — означает, что будут выбраны все файлы с расширением .scss в указанной директории;
**.scss — будут выбраны все файлы с указанным расширением в корневой папке и всех дочерних папках;
**.scss . Символ ! указывает, что данный файл надо исключить из выполнения задачи;
*.+(scss|sass) — позволяет выбрать для выполнения задач файлы с несколькими расширениями. В данном случае будут выбраны все файлы с расширениями .scss и .sass из указанной директории.

Теперь мы можем заменить app/scss/styles.scss на scss/ **/*.scss.

gulp.task(‘sass’, function() {
return gulp.src(‘app/scss/**/*.scss’) // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest(‘app/css’))
})

1
2
3
4
5

gulp.task(‘sass’,function(){

returngulp.src(‘app/scss/**/*.scss’)// Gets all files ending with .scss in app/scss and children dirs

.pipe(sass())

.pipe(gulp.dest(‘app/css’))

})

Любой файл с расширением .scss находящийся в папке app/scss будет скомпилирован. Например, если добавить print.scss, то мы увидим, что в папке app/css появится скомпилированный файл print.css.

Управление ресурсами

Далее мы рассмотрим пример с изображениями. Сначала нужно установить загрузчик файлов:

npm install file-loader --save-dev

Затем добавить новое правило в файл webpack.config.js:

{
  test: /.(png|jpg|gif)$/,
  use: ,
},

Чтобы протестировать загрузчик, создадим файл image-component.js в каталоге src со следующим кодом:

import image from "./image.png"

const img = document.createElement("img")
img.src = image
document.body.appendChild(img)

Здесь мы импортируем изображение как модуль и используем его в теге <img/>. Нужно поместить это изображение в каталог src.

После этого импортируем компонент изображения в файл app.js:

import './image-component'

Теперь, когда мы запустим webpack и откроем страницу, над сообщением Hello webpack будет выводиться изображение.

Инструменты Монтаж

Слякоть и безупречная

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

Узнайте больше здесь .

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

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

Gulp vs Grunt vs webpack vs Browserify

It’s obvious that webpack is the most popular tool for JavaScript app development. As you can see, it has 53.4K Github stars (at the time of this writing), which highlight how popular it has become for developers.

Browserify is older that webpack but a strong point is the frequent updates.

Gulp has much less open pull requests and issues, it’s at a very stable place.

The main difference between these workflows is that Browserify needs the help of Gulp or Grunt while webpack already has all the important features available. However, Browserify is much easier to learn and utilize.

Also, using Gulp/Grunt + Browserify, you can separate tasks and, as a result, get more comprehensible build. Browserify offers an extensive plugin base that allows doing everything you want.

However, if you want to save time and use only one workflow automation tool, webpack is the best option in my opinion. Its biggest advantage is that you don’t need to configure everything from scratch. You just have to set up some details and then get a good ready-made build. According to my experience, utilizing webpack takes approximately half a time compared to using Gulp.

Wrapping up this article, with choosing a technology stack for web apps you need to consider tools to automate routine tasks. webpack is one of the best automation workflow tools and its popularity is constantly growing. It’s happened because this tool combines the features of both task runner and module bundler. Of course, you can always use Gulp/Grunt + Browserify during JavaScript development. The only important thing is how well you know the tools and your personal preferences.

Обработка стилей

Webpack у нас уже умеет собирать JS-модули в один файл, попутно транспилируя ES6 в ES5. Для более-менее работоспособного приложения осталось добавить обработку CSS стилей и картинок.

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

Для демонстрации создадим в папке файл и добавим туда какой-нибудь заметный стиль, например:

body {
   background: teal;
   color: white;
}

Импортируем этот файл в src/index.js:

import './style.css';

Теперь подберем нужный лоадер. Их нужно сразу два: css-loader и style-loader. Первый превратит css-файл в js-модуль, а второй вставит на страницу тег с содержимым этого файла.

yarn add css-loader style-loader --dev
(npm i -D css-loader style-loader)

Теперь нужно добавить новые лоадеры в секцию в конфигурационном файле:

module: {
  rules: [
    // …
    {
      test: /\.css$/,
      use: 
    }
  ]
}

Перезапустите сервер – () – вуа-ля – стили применились. Откройте документ в панели разработчика и найдите в секции добавленный тег .

Обратите внимание, в секции use у нас теперь не просто строка, а массив строк. Таким образом можно задать сразу несколько обработчиков для одного типа файлов

Применяться они будут с конца, то есть сначала css-loader, а потом style-loader. Порядок очень важен, так как каждый лоадер работает с определенным состоянием файла.

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

Сборка в реальном времени

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

И мы можем обойтись без этого.

Есть куча инструментов для Browserify, отслеживающих изменения в ваших файлах и перезапускающих сборку в случае изменений. Мы рассмотрим пару из них: Watchify и Beefy.

Watchify

Watchify это стандартный инструмент для автоматической пересборки вашего при обновлении файлов исходников.

Сначала установите его с помощью NPM:

Затем удалите ваш

После чего в терминале перейдите в ваш рабочий каталог и выполните команду:

Флаг приказывает Watchify уведомлять вас о каждой пересборке проекта. Все будет работать и без него, но вы не будете знать, когда запускалась и сколько времени заняла сборка.

И обратите внимание, что использование Watchify идентично использованию Browserify! Проводится точно та же работа и в вашем рабочем каталоге будет обновленный. Теперь откройте и сохраните его без каких-либо изменений

Вы увидите, что Watchify пересобирает ваш проект и выводит сообщения об этом — это все, что требуется для пересборки вашего проекта при изменении исходников

Теперь откройте и сохраните его без каких-либо изменений. Вы увидите, что Watchify пересобирает ваш проект и выводит сообщения об этом — это все, что требуется для пересборки вашего проекта при изменении исходников.

В репозитории Watchify есть вся информация по продвинутому использованию, типа совместного использования с exorcist.

Если вы сейчас проверяли работу Watchify на практике, не забудьте прибить процесс Watchify перед переходом к следующему примеру (закрыв терминал, выполнив ).

Beefy

Круто, что нам не надо каждый раз перезапускать сборку после изменений, но нам по-прежнему приходится обновлять браузер вручную. Это кошмар!

Или просто лень.

Независимо от причин, Beefy позволит с легкостью реализовать автоматическое обновление браузера сразу после пересборки. У этого пакета есть две функции:

запуск локального сервера;
отслеживание изменений в ваших файлах-исходниках.

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

Если вам больше ничего не надо, то с Beefy у вас не будет проблем.

Для начала установите этот пакет:

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

В любом случае, дальше все просто. Сначала удалите . Затем в терминале перейдите в рабочий каталог и выполните:

Beefy выведет информацию о том, что он прослушивает http://127.0.0.1:9966.

А если он будет ругаться на ошибку: “Error: Could not find a suitable bundler!”, выполните следующую команду.

Команда дает указание использовать Beefy использовать глобальную версию Browserify. Если вы не столкнулись с указанной ошибкой, то вам это не надо.

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

Рассмотрим это в действии. В вашем браузере перейдите по адресу http://localhost:9966. Вы увидите ту же самую домашнюю страницу, что и в предыдущих примерах.

Теперь откройте , и измените значение :

Сохраните и проверьте страницу. Вы увидите обновленную версию:

И если вы смотрели на страницу до сохранения, то вы заметили, что она обновилась в реальном времени.

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

Итак, мы разобрались с Beefy, более подробная информация, как всегда, в документации пакета.

Что такое Webpack?

Webpack — это инструмент, позволяющий скомпилировать, например, JavaScript модули в единый JS-файл. Webpack также известен как сборщик модулей.

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

Он также способен выполнять множество иных операций:

помогает собрать воедино ваши ресурсы
следит за изменениями и повторно выполняет задачи
может выполнить транспиляцию JavaScript следующего поколения до более старого стандарта JavaScript (ES5) с помощью Babel, что позволит использовать новейшие функции JavaScript, не беспокоясь о том, поддерживает их браузер или нет
может выполнить транспиляцию CoffeeScript в JavaScript
может конвертировать встроенные изображения в data:URI
позволяет использовать require() для CSS файлов
может запустить webpack-dev-server (в нём встроен локальный сервер и livereload (“живая перезагрузка браузера”))
может работать с Hot Module Replacement (замена горячего модуля)
может разделить выходной файл (output file) на несколько файлов, чтобы избежать медленной загрузки страницы из-за большого размера JS-файла
может выполнить Tree Shaking

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

У Webpack есть предшественники, у которых он перенял многие идеи. Основное различие заключается в том, что те инструменты известны как task runners (такс-раннеры), в то время как Webpack ничто иное, как сборщик модулей.

Webpack — это более целенаправленный инструмент. Вам достаточно указать точку входа в ваше приложение (это может быть даже HTML-файл с тегами <script>), а webpack проанализирует файлы и объединит их в один выходной JavaScript-файл, содержащий все необходимое для запуска приложения.

Загрузчик/Комплектация модулей

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

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

E.g

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

E.g

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

Затем мы услышали о , , и

RequireJS

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

E.g: myModule.js

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

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

Browserify

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

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

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

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

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

Webpack

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

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

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

SystemJS

Это загрузчик модулей, который может импортировать модули во время выполнения в любом из популярных форматов, используемых сегодня ( ). Он построен поверх полифилла загрузчика модулей и достаточно умен, чтобы определить используемый формат и обработать его соответствующим образом. также может транспилировать код ES6 (с или ) или другие языки, такие как и , с помощью плагинов.