Webpack и Node.js: Руководство по использованию

Webpack и Node.js: Руководство по использованию
5 (100%) 1 vote

Введение: Что такое 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 позволяет выполнять дополнительную обработку исходных файлов с помощью сторонних загрузчиков и плагинов. Имеются загрузчики и пла­гины практически для всего, что может понадобиться, от компиляции Cof­feeScript, 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.


Об авторе

Занимаюсь программированием уже более 7 лет. Часто использую JavaScript (Node.js) и Python.

Комментарии