Возможно, вы уже знаете о модульной архитектуре приложений в JavaScript. В процессе разработки удобно, когда каждый модуль находится в отдельном файле. В этой статье поговорим о том, как «собрать» их в один скрипт. Для этого будем использовать профессиональную систему сборки Webpack.
Рассмотрим простую сборку нескольких модулей в один файл.
Собираем окружение для работы с Webpack
Для начала нам нужно установить NodeJS и сконфигурировать будущую сборку.
npm init
В терминале нужно ввести необходимые данные, из которых будет собран файл package.json, содержащий описание приложения и его зависимостей.
Для установки зависимостей используется команда.
npm install packageName
По умолчанию, модули устанавливаются в папку node_modules. Для того, чтобы зафиксировать устанавливаемый модуль в package.json, используются флаги --save или --save-dev.
Если ваш проект использует сторонние библиотеки, следует устанавливать соответствующие пакеты с флагом --save. Если какие-то пакеты используются только для разработки, например модуль uglifier, который минифицирует код в сборке, то при установке используйте ключ --save-dev
Установим Webpack:
npm install webpack --save-dev
Теперь можем приступить к самому интересному — конфигурации сборщика.
Конфигурация Webpack
Создадим конфигурационный файл webpack.config.js
module.exports = {
entry: './app.js',
output: {
filename: './bundle.js',
library: 'myApp'
}
};
Webpack принимает 2 основных параметра — entry, output.
В entry мы указываем файл, в котором подключаются все модули, так называемую «точку входа». В нашем случае, это файл app.js.
В output указываем выходной файл, в котором соберутся все модули.
filename— название файла. У нас — bundle.js.Library — это переменная в которую запишется вся сборка.
Простейшая конфигурация готова. Чтобы запустить `webpack` от имени nodejs, добавьте в ваш файл package.json новый скрипт, который можно назвать как угодно. Например, build.
Теперь его можно вызвать.
"scripts" : {
"build" : "webpack"
}
npm run build
Готово, эта команда запустит от имени npm скрипт webpack, который соберет подключенные модули в один файл.
Как писать модули
Существует несколько способов оформить код в виде модулей: AMD, CommonJS, ES6 Modules и другие . Мы рассмотрим CommonJS.
Каждый модуль указывает, что передать во внешний скрипт, с помощью module.exports
// moduleA.js
var a = 10;
var b = 20;
var c = 30;
module.exports = b;
Подключаем скрипты с помощью функции require:
var moduleA = require('./moduleA.js');
в переменную moduleA попадет значение b. Чтобы передать все переменные модуля moduleA можно написать так:
// moduleA.js
var a = 10;
var b = 20;
var c = 30;
module.exports = {
a : a,
b : b,
c : c
}
// moduleB.js
var moduleB = function() {
var log = function( message ){
console.log('log: ' + message);
};
return {
log: log
}
}();
module.exports = moduleB;
В module.exports можно передать объект с любыми методами вашего модуля.
Оформление точки входа
Создадим файл app.js и посмотрим, как подключать модули.
// app.js
var app = (function () {
var importedModuleA = require('./moduleA.js');
var importedModuleB = require('./moduleB.js');
return {
moduleA : importedModuleA,
moduleB : importedModuleB
}
})();
module.exports = app;
В функцию require передается путь к файлу. Точка означает, что путь начинается с текущей директории. Если указать в кавычках просто название модуля, то nodeJS будет искать в директории node_modules.
Обратите внимание, что точку входа тоже нужно экспортировать. Именно это значение Webpack запишет в переменную myApp, которую мы указали как library на этапе конфигурации.
Давайте запустим сборку и посмотрим на результат — содержимое bundle.js.
var myApp =
/*************************************/
/*************************************/
/***** Системные функции Webpack *****/
/*************************************/
/***/ function(module, exports, __webpack_require__) {
// точка входа
// app.js
var app = (function () {
var importedModuleA = __webpack_require__(1);
var importedModuleB = __webpack_require__(2);
return {
moduleA : importedModuleA,
moduleB : importedModuleB
}
})();
module.exports = app;
/***/ },
/* 1 */
/***/ function(module, exports) {
// moduleA.js
var a = 10;
var b = 20;
var c = 30;
module.exports = b;
/***/ },
/* 2 */
/***/ function(module, exports) {
// moduleB.js
var moduleB = function(){
var log = function( message ){
console.log('log: ' + message);
};
return {
log: log
}
}();
module.exports = moduleB;
/***/ }
/******/ ]);
Обращаться к методам модуля можно через переменную myApp.
myApp.moduleA.log('It works!');
Осталось подключить скрипт bundle.js, полученный в результате сборки. В следующей статье мы расскажем о более продвинутой конфигурации Webpack — сжатие кода, проверка синтаксиса или установка переменной окружения.