Слайды доклада Дениса "Webpack: 7 бед — один ответ", MoscowJS 17

1. webpack
7 бед - один ответ
Денис Измайлов
Ведущий разработчик
Компания Netris 27 ноября 2014

2. • CommonJS?
• AMD?
• Require.js?
• Browserify?

3. Начнём издалека

4. Начало
• Глобальные проблемы веб-разработки
• Локальные проблемы проектов
• Способы решения
4

5. Глобальные проблемы веб-разработки
• Многообразие решений
• Версии
• Форматы
5

6. Глобальные проблемы веб-разработки
1. Многообразие решений (одних и тех же задач)
• jQuery/Angular/React
• Underscore/lodash/Lazy
• MVC/MVVM/Flux
6

7. Глобальные проблемы веб-разработки
2. Версии
• 1.8
• 2.1
• 3.2
• 4.5
• …10, 24, 38…
7

8. Глобальные проблемы веб-разработки
3. Форматы (пре-процессинг)
• LESS, SCSS, Stylus, …
• Handlebars, jade, EJS, …
8

9. Локальные проблемы проектов
• Сложность роста
• Функциональная
• Технологическая
• Зависимости
• Версии
9

10. Локальные проблемы проектов
• Функциональный рост
• Регистрация
• Личный кабинет
• Загрузка фотографий
• Аналитика
• Поддержка языков
10

11. Локальные проблемы проектов
• Технологический рост
• Bootstrap
• jQuery
• Knockout
• Handlebars
• React
11

12. Локальные проблемы проектов
• Зависимости
• Загружены ли стили?
• А шаблоны?
• А библиотека?
• А нужный jQuery-плагин?
• А локализация для него?
• А стили?…
12

13. Локальные проблемы проектов
• Версии
• Один плагин требует jQuery 1.8
• Второй плагин требует jQuery 2.1
• Что делать?
13

14. Способ решения
Изолированные модули
14

15. Реализации
• AMD
• CommonJS
15

16. AMD
• Asynchronous Module Definition
• Пример 1:
define(["jquery"], function ($) {
return {
// …
};
});
16

17. AMD
• Asynchronous Module Definition
• Пример 2 (CommonJS wrapping):
define(function (require, module, exports) {
var $ = require("jquery");
module.exports = {
// …
};
});
17

18. CommonJS
• www.commonjs.org
• Нативно в Node.js/Rhino
• Пример:
var $ = require("jquery");
module.exports = {
// …
};
18

19. CommonJS
Преимущества перед AMD:
• читабельность
• “писабельность”
• изоморфизм:
var _ = require("lodash");
var data = require("./stock.json");
module.exports = _.where(data, function (item) {
return item[‘count’] > 0;
});
19

20. AMD & CommonJS
• создавать изолированные модули
• использовать их
• не думать о порядке загрузки
• подключать любую статику
• собирать всё в один JS-файл
• использовать разные версии библиотек
20

21. Итого
• Глобальные проблемы веб-разработки
• многообразие решения, версии, форматы
• Локальные проблемы проектов
• функциональный и технологический
• управление зависимостями и версиями
• Способы решения
• AMD
• CommonJS - лучшее
21

22. Так что же теперь?

23. Что воплотит наши
фантазии в жизнь?

24. Что лучшее мы имеем
на сегодняшний день?

26. Любая логика

27. Любые форматы

28. Ваш проект быстро
собирается

29. Ваш проект быстро
запускается

30. Cамые современные
инструменты разработки

31. webpack
• Плагины
• Загрузчики
• Асинхронная сборка
• Чанки (chunks)
• Инструменты разработки
31

32. API для плагинов
• Логика сборки и поиска модулей
• Самое сердце процесса
• Рассмотрим примеры:
• DefinePlugin
• BowerWebpackPlugin
• ExtractTextPlugin
32

33. DefinePlugin
• Определение констант
• Настройка:
…
plugins: [
DefinePlugin({
"NODE_ENV": "production"
})
…
33

34. DefinePlugin
• Определение констант
• Использование:
if (NODE_ENV === "development") {
console.log("Debug info");
}
if (NODE_ENV === "production") {
console.log("App started");
}
34

35. DefinePlugin
• Определение констант
• Собранный код:
if ("production" === "development") {
console.log("Debug info");
}
if ("production" === "production") {
console.log("App started");
}
• После минификации:
console.log("App started");
35

36. BowerWebpackPlugin
• Прозрачное использование bower-компонент
• Настройка:
…
plugins: [
new BowerWebpackPlugin({
modulesDirectories: ["bower_components"],
manifestFiles: ["bower.json"],
includes: /.*/,
excludes: /.*.less$/
})
…
36

37. BowerWebpackPlugin
• Прозрачное использование bower-компонент
• Использование:
$ bower install jquery —save
в коде:
var $ = require("jquery");
$("body").html("Hello MoscowJS!");
• Уже более 20000 пакетов
37

38. ExtractTextPlugin
• Позволяет извлекать данные и собирать их в один файл
• Настройка:
…
module: {
loaders: {
test: /.css$/,
loader: ExtractTextPlugin.extract("style-loader",
"css-loader")
}
},
plugins: [
new ExtractTextPlugin("style.css")
]
…
38

39. Загрузчики
• Прозрачное подключение статики:
• JSON
• CoffeeScript,
• Handlebars/jade/EJS, …
• CSS/LESS/SASS/Stylus и т.д.
39

40. Загрузчики
Настройка:
…
module: {
loaders: [
{ test: /.css$/, loader: "style-loader!css-loader"},
{ test: /.json$/, loader: "json-loader"},
{ test: /.hbs$/, loader: "handlebars-loader"},
{ test: /.coffee$/, loader: "coffee-loader"},
{
test: /.(eot|woff|ttf|svg|png|jpg)$/,
loader: "url-loader?limit=30000" +
"&name=[name]-[hash].[ext]"
},
]
}
…
40

41. Загрузчики
Использование:
var $ = require("jquery");
var pageTemplate = require("./page.hbs");
var offices = require("./offices.json");
require("bootstrap/bootstrap.min.css");
require("./page.css");
$("#content").html(pageTemplate(offices));
41

42. Пример подключения JSX
Установка:
$ npm install jsx-loader —save-dev
42

43. Пример подключения JSX
Настройка:
resolve: {
extensions: ["", ".js", ".jsx"],
},
module: {
loaders: [
{ test: /.jsx$/, loader: "jsx-loader"}
]
}
…
43

44. Пример подключения JSX
Использование:
var React = require("react");
// loads toolbar.jsx
var Toolbar = require("./toolbar");
React.render(
React.createElement(Toolbar, null),
document.getElementById("toolbar")
);
44

45. webpack-dev-server
• Инструмент для ускорения разработки
• Автоматическое обновления страницы без
пересборки проекта
• Можно запускать, как модуль или CLI
45

46. webpack-dev-server
• Как это работает:
• Веб-сервер на основе assets-директории
• При подключении файла-сборки,
устанавливает соединение через socket.io
• Как только что-то изменилось -
автоматически обновляется страница
46

47. Hot Module Replacement
• Обновления изменённых частей в реальном
времени
• Без перезагрузки страниц
• Это опция webpack-dev-server
47

48. Hot Module Replacement
Как это работает с React:
• В окне IDE изменяете код компонента
• В это время через открытое socket-соединение
передаётся информация об изменённой части
• Происходит “горячая” замена компонента
(unmount + mount)
• На странице обновляется только компонент
48

49. Итого
• AMD и CommonJS
• Более 30 готовых плагинов
• Более 50 готовых загрузчиков
• Асинхронной сборка
• Чанки (chunks)
• Развитые инструменты разработки
49

50. Были ли альтернативы?
• 2009 - Require.js
• 2010 - Browserify
• 2012 - webpack
50

51. Как насчёт поддержки?
• Высокая активность разработчиков
• Коммиты в github:
51

52. Так можно доверять?
• Команда Facebook использует webpack для веб-
интерфейса Instagram
• Twitter использует webpack для своих проектов
(Fronteers 2014, Nicholas Gallagher)
52

53. Заключение
• Глобальные проблемы веб-разработки
• Многообразие, версия, форматов
• Локальные проблемы проектов
• Функциональный и технологический рост
• Управление зависимостями и версиями
• Решение
• CommonJS и webpack
53

54. Документация и примеры:
http://webpack.github.io

55. Вопросы?
webpack: 7 бед - один ответ
Денис Измайлов
http://www.facebook.com/denis.izmaylov
http://www.github.com/DenisIzmaylov