Добро пожаловать во вторую часть этого обзора курса Pluralsight Создание модулей JavaScript с помощью Browserify Джеффа кодирование со спайком Валоре.
Джефф имеет более чем 15-летний опыт разработки программного обеспечения, включая Java, C#, JavaScript, CoffeeScript и TypeScript.
Его вера в то, что чистый, хорошо организованный код является ключом к тому, чтобы сделать программное обеспечение удобным в сопровождении, побудила его сосредоточиться на модульном тестировании и надежных методах и принципах программирования в качестве краеугольного камня повседневного кодирования.
Он также является автором книги Требуется JS: внедрение зависимостей и загрузка модулей.
Упрощение процесса разработки: введение
Нам приходится делать слишком много шагов только для того, чтобы внести и протестировать простые изменения. Как мы можем сделать это проще?
Исходные карты
Может быть очень сложно отследить проблемы в связанном коде, особенно если он также минимизирован. Исходные карты реконструируют исходные файлы для вас и поддерживаются всеми современными браузерами. У Treehouse есть хорошее введение в исходные карты здесь, и Джефф также объясняет их для вас в этом ролике.
Browserify может сгенерировать исходную карту для нас. Джефф объясняет, что, в отличие от некоторых других инструментов, которые создают их как внешний файл, он помещает исходную карту в наш файл bundle.js.
Мы видим, что сгенерированная исходная карта находится в виде специально отформатированного комментария в конце этого файла.
Поскольку это увеличивает размер пакета, Джефф рекомендует исключить исходные карты из наших производственных сборок.
Смотреть
Это отслеживает набор файлов на наличие изменений и повторно запускает Browserify при обнаружении изменения. Устанавливается используя npm.
После установки мы используем команду watchify вместо browserify. Джефф демонстрирует это, и мы видим, как watchify оживает и воссоздает пакет при сохранении любого отслеживаемого файла.
Grunt Browserify
Средства запуска задач сборки, такие как Grunt и Gulp, могут быть полезны по мере усложнения процесса сборки. (В качестве альтернативы можно использовать Webpack — подробности см. в разделе Основы Webpack).
Джефф обычно использует Grunt с Browserify и знакомит нас с основами здесь, объясняя, что это такое и как его установить.
Мы видим, как узнать, какую версию Grunt мы используем, и знакомимся с gruntfile.js.
Когда Джефф пишет gruntfile.js, мы видим, что он похож на наш предыдущий код браузера, потому что оба используют синтаксис модуля CommonJS.exports.
Поняв основы, Джефф объясняет, как использовать Grunt с Browserify. Устанавливаем пакет grunt-browserify.
Джефф демонстрирует и объясняет, как обновить grunt.initConfig для настройки браузера. Когда это будет сделано, мы можем запустить grunt, набрав «grunt» в командной строке, и увидим, что теперь он выполняет ту же работу, что и браузер.
Полное руководство по использованию Grunt JS можно найти в курсе Дэвида Мошера Процесс сборки, рабочие процессы и инструменты с Grunt.js и не только.
Хрюкающие часы
Хотя можно запустить watchify из grunt, Джефф предпочитает использовать плагин Grunt Watch, который является более мощным, поскольку он также может автоматически запускать другие задачи grunt при изменении любого отслеживаемого файла.
Джефф показывает, как обновить наш файл gruntfile.js с параметрами конфигурации часов.
Теперь в командной строке набираем «grunt watch», чтобы запустить его. Мы видим, что он повторно запускает задачи grunt, когда мы сохраняем изменение в taskRenderer.js.
Локальный веб-сервер
Джефф представляет Grunt Connect, инструмент для обслуживания статических файлов с локального веб-сервера. Он объясняет, как его установить, как добавить задачу подключения в grunt и какие параметры конфигурации установить в grunt.initConfig.
Живая перезагрузка
Если вам надоело устанавливать плагины для grunt, вы будете рады услышать, что функция перезагрузки в реальном времени является частью grunt watch, которую мы уже установили ранее.
Все, что нам нужно сделать, это добавить:
варианты: {
livereload: true
}
в нашу конфигурацию grunt, как демонстрирует Джефф. Это создает новый порт.
Однако лучше всего установить хотя бы еще один пакет. Нам нужно указать браузеру подключиться к серверу, внедрив JavaScript в HTML-страницу.
Хотя есть несколько разных способов добиться этого, Джефф рекомендует установить промежуточное ПО connect-livereload, так как это самый простой способ заставить его работать.
Джефф показывает нам, как обновить наш файл grunt.
Теперь, когда все настроено, мы видим, как все это работает вместе: изменения файлов, запуск часов ворчания и перезагрузка в реальном времени, происходящая в конце нашей сборки.
