Browerify
0 likes104 views
Документ обсуждает различные методы управления зависимостями JavaScript, включая браузерные инструменты, такие как Browserify и его альтернативы. Рассматриваются достоинства и недостатки использования методов, таких как AMD и ES6 модули, а также современные инструменты, такие как Webpack. В заключение, упоминается, что некоторые из рассмотренных подходов стали устаревшими и уступили место более новым решениям.
Browerify
- 1. Browserifyдоставка JS М.В. Бакулин 1/17 быстро, дёшево, надёжно
- 2. Традиционный способ добавления JS 2/17 © http://www.technology-ebay.de/the-teams/mobile-de/blog/packing-the-web-like-a-boss.html Недостаток #1: порядок имеет значение
- 3. Зависимости 3/17 Недостаток #2: зависимости плагинов vlager.edu.ru:
- 4. Область видимости 4/17 Недостаток #3: область видимости (scope) Немедленно вызываемые функции (Immediately-Invoked Function Expression) — IIFE Передача параметров в немедленно вызываемую функцию “Поднятие” (hoisting) Совет эксперта:
- 5. Шаг вперёд: шаблон модуль 5/17 Суть этого паттерна заключается с создании локальной области видимости, в которой определяются локальные, «приватные» переменные и функции. Сама же немедленно вызываемая функция возращает объект с методами, использующими приватные переменные и функции.
- 6. Способ получше - AMD модули 6/17 Самая распространённая реализация — RequireJS Асинхронная загрузка
- 7. Как бы сделал Node.js - Browserify 7/17 — пакетный менеджер node.js ● Модули имеют своё пространство имён (namespace) — быстро растущее собрание стандартов JS для разработки в областях, выходящих за рамки традиционного использования внутри браузера ● Согласно CommonJS модули определяются присваиванием объекта к module.exports
- 8. Доставка JS при помощи Browserify 8/17 https://nodejs.org/api/modules.html#modules_file_modules
- 9. Browserify и Watchify 9/17 Кто поможет автоматизировать всё на свете? Это команда считывает ваш main.js и пишет его содержимое в bundle.js (разумеется, включая пакетные зависимости). Но! Каждый раз жать комманду в консоли? Watchify поможет!
- 10. Gulp <3 Browserify 10/17 Простой вариант Добавим “мяска” Запуск
- 11. Browserify vs RequireJS 11/17 Недостатки: ● Визуально более громоздкий синтаксис ● Не лучшее решение для бекэнда ● Плохо разрешает циклические ссылки ● Lazy load делать сложнее ● Нужен nodeJS ● Не все фронтенд библиотеки есть в npm
- 12. Bower - пакентный менеджер фронтэнда 12/17 Установка Поиск Проверка актуальных версий пакетов
- 13. Мы освоили новый модный инструмент для фронтэнда! 13/17 но...
- 15. 15/17
- 16. Передовая: webpack и модули ES6 Смесь CommonJs и AMD (webpack) ES6 модуль Вызов ES6 модуля 16/17
- 17. Спасибо 17/17