Введение: Что такое Webpack
Разрабатывая приложения для платформы Node.js, старайтесь не использовать систем модулей, отличных от той, что предлагается по умолчанию. В идеале нужно продолжать писать модули как обычно, используя require() и module.exports, а затем применять инструмент для преобразования кода в пакет, который будет нормально работать в браузере. К счастью, эта задача имеет множество решений, самым попуярным из которых является Webpack (https://webpack.github.io).
Webpack позволяет создавать модули с использованием соглашений о модулях Node.js, с последующей компиляцией в пакет (единственный JavaScript-файл), содержащий все необходимое для работы в браузере (в том числе абстрактные функции require()). Такой пакет затем можно включить в веб-страницу, как обычно, и выполнить в браузере. Webpack рекурсивно сканирует исходный код, отыскивает ссылки на функцию require(), разрешает их и добавляет нужные модули в пакет.
Установка и знакомство с Webpack
Для быстрой демонстрации волшебства Webpack рассмотрим, как будет выглядит обычный Node.js модуль при использовании этого инструмента. Во-первых, необходимо установить сам Webpack, что можно сделать с помощью следующей простой команды:
npm install webpack -g
Параметр -g указывает npm, что необходимо установить Webpack глобально, чтобы его можно было использовать из консоли, как будет показано ниже.
Далее, создадим новый проект и попробуем написать модуль. Вот так будет выглядеть его реализация для платформы Node.js (файл sayHello.js):
var mustache = require('mustache'); var template = '<h1>Hello <i>{{name}}</i></h1>'; mustache.parse(template); module.exports.sayHello = function(toWhom) { return mustache.render(template, {name: toWhom}); };
Теперь создадим файл main.js, то есть точку входа в код для браузера:
window.addEventListener('load', function(){ var sayHello = require('./sayHello').sayHello; var hello = sayHello('Browser!'); var body = document.getElementsByTagName("body")[0]; body.innerHTML = hello; });
В приведенном выше коде загрузка модуля sayHello выполняется точно так же, как в Node.js, нет никаких дополнительных сложностей при управлении зависимостями и настройке путей, поскольку всю работу выполняет обычная функция require().
Добавим зависимость mustache в проект:
npm install mustache
А теперь волшебное действие. Запустим следующую команду в терминале:
webpack main.js bundle.js
Она скомпилирует модуль main и соберет все необходимые зависимости в один файл bundle.js, готовый к использованию в браузере!
Чтобы быстро проверить работоспособность получившегося пакета, создадим HTML-страницу magic.html со следующим кодом:
<html> <head> <title>Webpack magic</title> <script src="bundle.js"></script> </head> <body> </body> </html>
Этого достаточно для выполнения кода в браузере. Попробуйте открыть страницу и взгляните сами. Ура!
Преимущества использования Webpack
Волшебство Webpack этим не ограничивается. Вот (неполный) перечень функцио нальных возможностей, которые упрощают совместное использование кода с браузером:
- Webpack автоматически предоставляет версии многих модулей ядра Node.js, совместимые с браузером. Это означает, что в браузере можно использовать такие модули, как http, assert, events, и многие другие!
- Если имеется модуль, несовместимый с браузером, его можно исключить из сборки, заменить пустым объектом или другим модулем с альтернативной реализацией, которая совместима с браузером. Это играет решающую роль, и данная возможность будет использоваться в примере ниже;
- Webpack может генерировать пакеты для различных модулей;
- Webpack позволяет выполнять дополнительную обработку исходных файлов с помощью сторонних загрузчиков и плагинов. Имеются загрузчики и плагины практически для всего, что может понадобиться, от компиляции CoffeeScript, TypeScript и ES2015 до поддержки загрузки AMD, пакетов Bower (http://bower.io) и Component (http://component.github.io), использующих require(), от минификации до компиляции и упаковки других ресурсов, таких как шаблоны и таблицы стилей;
- Webpack с легкостью можно вызывать из диспетчеров заданий, таких как Gulp (https://npmjs.com/package/gulp-webpack) и Grunt (https://npmjs.org/package/grunt-webpack);
- Webpack позволяет управлять и выполнять предварительную обработку ресурсов проекта, причем не только JavaScript-файлов, но и таблиц стилей, изображений, шрифтов и шаблонов;
- кроме того, Webpack можно настроить для разделения дерева зависимостей на несколько частей, которые будут загружаться по требованию, когда они понадобятся браузеру.
Потенциал и гибкость Webpack настолько привлекательны, что многие разработчики начали использовать его даже для управления кода, предназначенного только для выполнения на стороне клиента. Это стало возможным потому, что многие клиентские библиотеки начали по умолчанию поддерживать CommonJS и npm, что открывает новые и очень интересные перспективы. Например, можно установить библиотеку jQuery:
npm install jquery
а затем загрузить ее с помощью простой строки кода:
const $ = require('jquery');
Вы будете удивлены, как много клиентских библиотек уже поддерживают CommonJS и Webpack.
Комментарии