Если вы только начинаете работать с JavaScript, то вас может поразить, сколько существует различных инструментов и технологий. И вы едва ли сможете понять, какие инструменты вам на самом деле нужны.
Или, возможно, вы уже знакомы с какими-то инструментами, но при этом не задумывались, от каких проблем они вас избавляют, и какой была бы печальной ваша жизнь без них.
Лично я считаю, что программисты и разработчики должны знать, для чего нужны те инструменты, с которыми они работают ежедневно.
Именно поэтому в этой статье я решил рассказать о таких инструментах, как NPM, Babel, Webpack, ESLint и CircleCI. Я подробно рассмотрю проблемы, которые они решают, а также то, как их применять для решения этих проблем.
NPM
NPM – это стандартный менеджер пакетов, который предназначен для JavaScript-разработки. С его помощью вы можете найти и установить пакеты (программы), которые в дальнейшем сможете использовать в своих программах.
Для того, чтобы добавить npm в свой проект, просто введите команду «npm init». Когда вы запустите эту команду, в текущем каталоге будет создан файл package.json. В этом файле хранится список ваших зависимостей. Для npm этот файл выглядит как идентификационная карточка проекта.
Вы можете добавлять зависимости в этот файл. Для этого вам нужна команда «npm install (имя_пакета)».
Когда вы запустите эту команду, npm обратится к удаленному реестру и проверит, существует ли пакет с таким именем. Если он существует, то в ваш файл package.json будет добавлена новая запись о зависимости, а сам пакет со всеми его внутренними зависимостями загрузится из реестра.
Все загруженные пакеты и зависимости вы можете найти в папке «node_modules». Только учтите, что со временем эта папка может стать довольно большой, так что не забудьте добавить ее в .gitignore.
NPM не только позволяет с легкостью находить и загружать нужные пакеты, но и упрощает совместную работу над проектом.
Если бы у вас не было NPM, вам было бы сложно управлять внешними зависимостями. Поэтому, если бы вам было нужно присоединиться к уже существующему проекту, вам пришлось бы вручную загружать правильные версии всех зависимостей. Это могло бы стать настоящей головной болью.
А если у вас есть NPM, то вы можете просто запустить команду «npm install», и она установит все внешние зависимости без вашего вмешательства. А когда кто-нибудь из вашей команды добавит новую зависимость, все, что вам нужно будет сделать, это снова запустить эту команду.
Babel
Babel – это компилятор и транспайлер JavaScript, который преобразует код ECMAScript 2015+ в код, который будет понятен для более старых движков JavaScript.
Babel – это самый популярный компилятор JavaScript. Он по умолчанию используется в таких фреймворках, как Vue и React. Но концепции, о которых мы будет здесь говорить, присущи не только Babel, их можно применять к любому компилятору JavaScript.
Зачем вам компилятор?
Если вы знаете, что такое компилируемые и интерпретируемые языки, то у вас может возникнуть вопрос: «Зачем нам компилятор? Разве JavaScript не является интерпретируемым языком?»
Надо признать, мы действительно, как правило, называем «компилятором» то, что переводит код, который можем понять мы, в исполняемый двоичный файл, который может понять процессор. Но только не здесь.
Здесь более уместным будет термин «транспайлер». Это разновидность компиляторов. Транспайлер – это компилятор, который преобразует код, написанный на одном языке программирования, в код, написанный на другом языке. В нашем случае он преобразует более современный JS в более старую его версию.
JavaScript – это язык браузеров. Но в случае с браузерами есть проблема: кросс-совместимость. JavaScript, как и его инструменты, довольно быстро развиваются, и некоторые браузеры не успевают за ними. И здесь возникает проблема совместимости.
Надо полагать, вы захотите воспользоваться новыми возможностями языка и написать код с помощью самой последней версии JavaScript. Но если браузер, для которого вы пишете этот код, не реализовал эти новые функции в своем JS-движке, то код в этом браузере не сможет выполниться как положено.
Это довольно сложная проблема, поскольку все браузеры реализуют функции с разной скоростью. И даже если они реализуют их, всегда будут те, кто будет использовать старую версию браузера.
Так что же тогда делать, если вы хотите использовать новые функции, но при этом хотите, чтобы ваши пользователи могли без каких-либо проблем просматривать эти страницы?
До того, как появился Babel, разработчики использовали полифилы для того, чтобы можно было запускать определенный код в более старых версиях браузера. А теперь, когда у нас есть Babel, он использует эти же полифилы, но, так сказать, за кадром. И в таком случае от вас никаких действий не требуется.
Как работают транспайлеры/компиляторы?
Babel работает по аналогии с другими компиляторами. Он применяет синтаксический анализ кода, преобразует его и генерирует новый код.
Мы не будем так сильно углублять в то, как все это работает, поскольку компиляторы – все-таки довольно сложная вещь.
В принципе можно обойтись без знания о том, что такое плагины и пресеты Babel, но мы все же посмотрим, что это такое. Плагиты - это фрагменты кода, который Babel использует «за кадром» для того, чтобы скомпилировать ваш код в более старые версии JS. Можете представить, что все современные функции – это и есть плагины.
Список плагинов для ES5
Пресеты - это наборы плагинов. Если вы планируете использовать Babel для проекта React, то вы можете воспользоваться уже готовым пресетом @babel/preset-react. В нем есть все необходимые плагины.
Плагины пресета для проекта React
Вы можете добавить плагины самостоятельно. Для этого вам нужно отредактировать файл конфигурации Babel.
Нужен ли вам Babel для вашего React-приложения?
Для React вам определенно нужен компилятор, поскольку он использует код JSX, а он должен быть скомпилирован. К тому же его библиотека построена на концепции использования ES6-синтаксиса.
Благо, если вы создаете проект с помощью платформы create-react-app, то вам не потребуется менять конфигурацию, потому что Babel уже встроен в нее.
Компилятор в действии
На веб-сайте Babel есть онлайн-компилятор. Не лишним будет узнать, как он работает. Просто вставьте в него код и проанализируйте то, что он выведет.
Webpack
Webpack – это сборщик модулей. Когда вы создаете новый проект, большая часть фреймворков/библиотек JavaScript используют его уже в готовом виде.
Если фраза «сборщик модулей» приводит вас в замешательство, то читайте дальше. Я приготовил для вас несколько отличных примеров, которые помогут вам понять, что же это такое.
Зачем вам нужен сборщик?
В веб-приложениях у вас может быть много файлов. Речь идет, в первую очередь, об одностраничных приложениях (React, Vue, Angular), у каждого из которые есть свои собственные зависимости.
Когда я говорю о «зависимости», я имею в виду оператор import. Иными словами, если файл A для корректной работы импортирует файл B, то мы говорим, что A зависит от В.
Если у вас небольшой проект, то вы можете обрабатывать модульные зависимости с помощью тегов <script>. Однако по мере роста вашего проекта вам будет все труднее управлять этими зависимостями.
Пожалуй, что еще важнее, если вы разобьете ваш код на несколько файлов, то таким образом вы замедлите работу вашего сайта. Дело в том, что браузеру придется отправлять больше запросов, и пропускная способность вашего веб-сайта начнет падать из-за количества HTTP-запросов.
Мы, как разработчики, хотим, чтобы наш код был модульным. А все потому, что мы не хотим работать с тысячами строк, и поэтому разбиваем наш код на несколько файлов. И тем не менее, мы также хотим, чтобы у нашего веб-сайта была высокая производительность и пропускная способность, а также, чтобы наш веб-сайт быстро загружался.
Поэтому сейчас мы посмотрим на то, как Webpack может помочь решить нам эту проблему.
Как работает Webpack?
Когда мы с вами говорили о Babel, то упомянули тот факт, что прежде чем развертывать JS-код, его нужно транспилировать.
Однако Babel-компиляция – это не единственное, что нужно выполнить перед тем, как развернуть проект.
Как правило, его нужно минифицировать, транспилировать, скомпилировать SASS или SCSS в CSS (если вы используете какие-либо препроцессоры), скомпилировать TypeScript (если вы его используете)… и, как вы видите, этот список можно продолжать бесконечно.
Конечно, никто не хочет все это выполнять перед каждым развертыванием. Поэтому было бы здорово, если бы был такой волшебный инструмент, который бы делал все это за вас, да еще хорошо и в правильном порядке.
У меня для вас отличные новости! Такой есть! Это Webpack.
Webpack также предоставляет такие функции, как локальный сервер с горячим подключением (это еще называют горячей заменой модулей). Эти функции могут улучшить вашу разработку.
Итак, что же такое горячее подключение? Это значит, что каждый раз, когда вы сохраняете свой код, он компилируется и развертывается на локальном HTTP-сервере, который запущен на вашем компьютере. И затем, когда вы вносите в этот файл какие-то изменения, в ваш браузер будет отправлено соответствующее сообщение. И вам не нужно будет даже обновлять страницу.
Если вы знакомы с такими командами, как «npm run serve», «npm start» и «npm run dev», то вы должны знать, что с их помощью можно за кадром запустить dev-сервер Webpack.
Webpack начинает свою работу с точки входа вашего проекта (index) и создает дерево абстрактного синтаксического анализа вашего файла. Представьте, что он просто анализирует ваш код. Эта операция выполняется в компиляторах, которые затем в обратном порядке ищут операторы import, чтобы создать граф зависимостей.
После чего для того, чтобы разбить файлы на модули, он преобразует их в функции IIFE (Immediately-Invoked Function Expression – Функция-выражение, вызываемая сразу после создания) (помните, что если вы размещаете код внутри функции, то вы ограничиваете область его действия). IIFE разбивают файлы на модули и при этом гарантируют, что у других файлов не будет доступа к этим переменным и функциям.
Если бы этой операции не было, то было бы похоже, как будто мы просто скопировали и вставили код из импортированного файла. В таком случае у этого файла область действия осталась бы прежней.
Конечно, Webpack выполняет множество других операций «за кадром», но для того, чтобы понять основы, этого будет достаточно.
Бонус - ESLint
Качество кода – это важная составляющая вашего проекта. Если качество вашего кода находится на высоком уровне, то вам легче будет сопровождать ваши проекты и расширять их. Несмотря на это, большая часть разработчиков, хоть и понимает важность чистого кода, все же склонны к тому, чтобы игнорировать долгосрочные последствия под гнетом дедлайнов.
Многие компании определяют стандарты написания программного кода и настоятельно рекомендуют разработчикам придерживаться этих стандартов. Но как понять, соответствует ли им ваш код?
Что ж, для того, чтобы быть уверенным в том, что вы соблюдаете эти стандарты, вы можете воспользоваться таким инструментом, как ESLint. Например, вы можете создать правило, которое будет следить за тем, чтобы вы не использовали в вашем JS-коде точки с запятой. Если вдруг вы поставите точку с запятой, то ESLint покажет ошибку, и код даже не будет компилироваться. Так что игнорировать такое просто невозможно, только если вы отключите это правило.
Для того, чтобы писать такие пользовательские правила, вы можете воспользоваться, так называемым, линтерами. Но вы также можете использовать уже готовые конфигурации ESLint, которые были созданы крупными IT-компаниями для того, чтобы разработчики привыкли писать чистый код.
Да, ESLint помогает использовать всякого рода рекомендации, но это не единственное преимущество, которым облает этот инструмент. Он также может предупреждать вас о возможных багах в вашем коде, чтобы вы могли избежать самых распространенных ошибок.
Бонус – CI/CD (CircleCI)
Многие компании стали придерживается принципов Agile, что повлекло за собой то, что большую популярность приобрела непрерывная интеграция и развертывание ПО (CI/CD).
Такие инструменты, как Jenkins и CircleCI, позволяют автоматизировать развертывание и тестирование ПО. Соответственно, вы можете выполнять развертывание ПО чаще и надежнее, и при этом не нужно будет проводить сборку самостоятельно (это особенно важно с учетом того, что процессы сборки довольно сложные и часто подвержены ошибкам).
Здесь я решил упомянуть именно CircleCI, поскольку он бесплатный и его часто используют в проектах JavaScript. К тому же, он довольно прост с точки зрения использования.
Давайте рассмотрим пример. Допустим, у вас есть сервер развертывания/QA-сервер и репозиторий Git, и вы хотите развернуть свои изменения на своем сервере. Весь процесс будет выглядеть примерно так:
- Вы добавляете изменения в Git
- Подключаетесь к серверу
- Создаете контейнер в Docker и запускаете его
- Отправляете запрос на включение изменений на сервер, загружаете все зависимости (npm install)
- Запускаете тесты, чтобы убедиться, что все работает
- Проверяете качество кода с помощью ESLint/Sonar
- Если все хорошо, объединяете этот код с другим
С помощью CircleCI вы сможете выполнять весь этот процесс автоматически. Каждый раз, когда вы добавляете изменения в Git, вы можете настроить его на выполнение нескольких пунктов или всех сразу. Если вдруг что-то пойдет не так, например, тест завершится неудачно, то он отклонит добавление.
Я не буду здесь вдаваться в подробности настройки CircleCI. Все-таки эта статья больше о том, для чего эти инструменты нужны.
Заключение
Мир JavaScript развивается очень быстро, и каждый год все больше новых инструментов становятся популярными.
Как реагировать на все эти изменения? Очень просто – научитесь применять эти инструменты. Но зачастую мы слишком заняты рассуждениями о том, почему же этот инструмент стал таким популярным или для чего он нужен.
В этой статье я рассказал вам про инструменты, которые, на мой взгляд, являются самыми популярными, и поделился своими соображениями на счет их значимости. Я также хотел бы, чтобы вы думали не только о том, как их применять, но и о том, для чего они нужны.
бесплатные гайды
