Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UWDC - Модули и сборка JavaScript
Search
Mikhail Davydov
September 23, 2013
Education
0
190
UWDC - Модули и сборка JavaScript
Video
https://www.youtube.com/watch?v=zbbV3JTF8Ds
Mikhail Davydov
September 23, 2013
Tweet
Share
More Decks by Mikhail Davydov
See All by Mikhail Davydov
Back To Text UI
azproduction
3
270
Promise – это не больно
azproduction
0
190
Components Now!
azproduction
3
130
ШРИ - JavaScript Event Model
azproduction
0
180
ШРИ - Code Style
azproduction
0
99
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
270
Code Fest - Работает? Стабильно? Эффективно?
azproduction
0
140
Шаблонизация
azproduction
0
120
КРиПИ - Node.js – серверный JavaScript
azproduction
0
120
Other Decks in Education
See All in Education
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
社外コミュニティと「学び」を考える
alchemy1115
2
170
諸外国の理科カリキュラムにおけるビッグアイデアの構造比較
arumakan
0
330
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
2.4k
2025/06/05_読み漁り学習
nag8
0
150
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
20
15k
より良い学振申請書(DC)を作ろう 2025
luiyoshida
1
3.3k
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
180
2025年度春学期 統計学 第4回 データを「分布」で見る (2025. 5. 1)
akiraasano
PRO
0
100
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Agile that works and the tools we love
rasmusluckow
329
21k
GitHub's CSS Performance
jonrohan
1031
460k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Docker and Python
trallard
44
3.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
None
Михаил Давыдов JavaScript разработчик Модули и сборка JavaScript
Моя история. С чего я начинал и к чему пришел…
cat **/*.js > build.js!
5 Файлы и cat **/*.js > build.js • Это быстро и
просто • Что плохого – Собирается все без разбора – Возможны конфликты имен переменных – Результат плохо сжимается – Нужно учитывать порядок
Так жить нельзя! – Нужны модули.
7 Мне понадобились модули. Зачем? • Разделение логических частей • Управление импортом/экспортом
• Явные зависимости и их контроль • Меньше конфликтов переменных
Модуль? – нет, не слышал! Learning JavaScript Design Patterns http://clck.ru/8aLgX
include('main.js');!
10 (function ($) { var myStuff = {}; window.stuff =
myStuff; })(jQuery); IIFE и include()
11 include('common.js'); include('ru.js'); include('main.js'); IIFE и include(): Сборка includify main.js
> build.js
12 IIFE и include() • Что хорошего – Модули в замыканиях
– Можно наследовать сборки • Что плохого – RegExp – Дублирование модулей
Я встретил её…
REQUIRE JS
15 RequireJS • AMD • Асинхронные зависимости • Плагины • Оптимизация – r.js • Большое
комьюнити
16 define(['jQuery', 'lodash'], function ($, _) { var myStuff =
{}; return myStuff; }); RequireJS & AMD: Модули
17 <script data-main="js/app" src="js/require.js"> </script> RequireJS & AMD: Сборка node
r.js -o build.js
I REQUIRE JS Я думал, что это навсегда…
19 define(function () { var myStuff = {}; return myStuff;
}); Много церемоний с define() 1. Нужно писать обертку
20 define("dojo/_base/html", [ "./kernel", "../dom", "../dom-style", "../dom-attr", "../dom-prop", "../dom-class", "../dom-construct",
"../dom-geometry" ], function (dojo, dom, style, attr, prop, cls, ctr, geom) { }); Много церемоний с define() 2. Куча зависимостей – ад http://clck.ru/4b7ew
None
22 define(function () { var myStuff = {}; return myStuff;
}); Много церемоний с define() 3. Артефакты: Приходится табулировать
23 require('module'); // js? require('async!data', cb); // ? require(ComicSans); //
font? require() - God Object? 1. Возвращает что угодно, как угодно 2. Не сразу понятен результат
AMD и CJS
25 И еще AMD • Приходится поддерживать AMD – jQuery, underscore,
backbone, … – 2 версии с AMD и без • Пытаются заразить Node.js – node-requirejs – в node и так есть модульная система http://clck.ru/4b7dE
Сейчас мы друзья
Другие пути
28 Другие пути • browserify – CommonJS – хорошо –
слишком много от Node.js – плохо • просто загрузчик – headjs – yepnopejs
29 Из моего опыта • Сегодня все собирается. Даже dev
• Читаемость кода очень важна – Нужно исключить неявные конструкции • Сборок бывает много – dev, production, dev-ru, test-en_US • Нужен контроль результата сборки – Проверка целостности – Подробная информация о сборке
Я создал новый инструмент
LMD – Lazy Module Declaration LMD
Модули – CommonJS Остальное делает сборщик
33 var $ = require('$'), myStuff = {}; module.exports =
myStuff; Модули – CommonJS/Modules 1.0* http://clck.ru/4b7gO
34 Профит • Ненавязчивый формат – Нет лишней писанины –
Единообразие вида модулей • Обратная совместимость с Node.js – Без плагинов, регистрации и SMS • Оберткой модулей занимается сборщик
35 { "root": "../js", "output": "../index.js", "modules": { "main": "main.js",
"i18n": "locale/ru.json" }, "css": true, "ie": false, "worker": true } Конфиг сборки http://clck.ru/4b7gq
Проблема: Много конфигов
37 { "extends": "index.json", "output": "../index-en.js" "modules": { "i18n": "locale/en.json"
} } Операции над конфигами 1. Наследование конфигов http://clck.ru/4b7j2
38 { "modules": { "i18n": "locale/en.json" } } Операции над
конфигами 2. Миксины конфигов lmd index+en \ –output=index-en.js http://clck.ru/4b7pI
39 { "root": "../js", "modules": { "main": "main.js" }, "depends":
"*.lmd.json" } Операции над конфигами 3. Зависимости модулей main.lmd.json хранит зависимости main.js http://clck.ru/4b7sw
40 Профит • Минус – нужно писать конфиг • JSON
можно легко реиспользовать • Количество конфигов сократилось • Меньше писать сборочных скриптов • Легче понять результат сборки
Явные плагины
Гибкие плагины
Очень гибкие плагины
44 { "image": true, "promise": true, "cache": true, "stats": true
} Явный способ подключения плагинов http://clck.ru/4b7t6 Сборщик проверит плагины
45 // javascript require('module'); // css require.css('path/to.css', callback); // image+promise
require.image('path/img.png') .then(callback); LMD require – не God Object http://clck.ru/4b7tO
46 Профит • require() делает одну работу • Результат require()
стал предсказуемым • Код стало проще воспринимать
______ __ __ ! /\ ___\ /\ \ /\ \
! \ \ \____ \ \ \____ \ \ \ ! \ \_____\ \ \_____\ \ \_\ ! \/_____/ \/_____/ \/_/ ! ! http://clck.ru/4dU-0!
$ lmd -c cfg.json\ ✘! -o result.js ✘! ! $
lmd make cfg ✔! $ lmd make cfg+ru ✔! $ lmd info cfg ✔! $ lmd ✔! atch ! fg! ⇥ ⇥ ! c! w!
LMD GUI
Встроенная аналитика http://clck.ru/4b8My
Интеграция с Grunt.js https://npmjs.org/package/grunt-lmd
52 Профит LMD • Максимум автоматизации – Сборщик LMD –
Аналитика • Максимум явного кода – require.*() • Минимум писанины – CommonJS – CLI & GUI • Минимум копипаста – Операции над кофигами https://github.com/azproduction/lmd
Михаил Давыдов JavaScript разработчик
[email protected]
azproduction Спасибо
Lazy Module Declaration http://lmdjs.org