Про використання в проєктах DevDependencies

Сьогодні разом із компанією FoxmindED розбираємося, devdependencies що це, їхню сутність і важливу роль у проєктах на JavaScript, а також – чому це важливо для розробки та тестування.

У світі JavaScript залежності (dependencies) є необхідними пакетами коду, необхідними не тільки для запуску програми, а й для її повноцінної роботи. До цих залежностей входять різні модулі, функції, бібліотеки та інші елементи, що використовуються в процесі виконання програми.

З іншого боку, залежності процесу розроблення (DevDependencies) являють собою спеціальний вид залежностей, необхідних винятково під час розроблення та збирання проєкту. Сюди можуть входити інструменти для тестування, системи складання коду, лінтери, документація та інші засоби, які полегшують роботу розробників над проектом.

Такі залежності відіграють важливу роль у проєктах на JavaScript, оскільки дають змогу розробникам використовувати різні інструменти та бібліотеки для підвищення якості та ефективності розробки.

Відмінність між Dependencies і DevDependencies

Чим відрізняються Dependencies і DevDependencies? Це два типи залежностей, які використовуються в проєктах на JavaScript, і основна їхня відмінність між собою в тому, що Dependencies необхідні для запуску програми, а DevDependencies – ні.

• Dependencies – це ті пакети і бібліотеки, які необхідні для роботи вашого застосунку в робочому режимі. Це можуть бути фреймворки, бібліотеки, утиліти та інші компоненти, які забезпечують функціональність вашого застосунку. Наприклад, якщо ви розробляєте веб-додаток з використанням фреймворка Express, то він є залежністю, тому що ваш додаток не буде функціонувати без нього.

Наприклад:

"dependencies": {

"express": "^4.17.1",

"react": "^17.0.2",

"axios": "^0.21.1"

}

Фрагмент являє собою розділ залежностей (dependencies) у файлі package.json.

• DevDependencies представляють інструменти та бібліотеки, необхідні виключно на етапі розробки та тестування. Вони не впливають на працездатність застосунку в продакшені та не потрапляють у кінцевий бандл або дистрибутив. Приклади DevDependencies включають тестові фреймворки, лінтери коду, транспайлери та інші засоби, які полегшують розробку і забезпечують високий стандарт коду.

Наприклад:

"devDependencies": {

"jest": "^26.6.3",

"eslint": "^7.16.0",

"babel/core": "^7.12.3"

}

У цьому прикладі, Jest використовується для тестування коду, ESLint – для статичного аналізу, а Babel – для транспіляції коду. Ці інструменти необхідні тільки в процесі розробки і не впливають на виконання програми у виробничому середовищі.

Таким чином, Dependencies забезпечують базову функціональність вашого застосунку, тоді як DevDependencies надають інструменти для ефективного розроблення, тестування та підтримки високого стандарту коду.

Приклади 

Розглянемо кілька популярних залежностей процесу розробки та їх застосування.

• Jest – тестовий фреймворк для перевірки JavaScript, що надає повний інструментарій для написання та виконання тестів, а також вбудовані можливості для створення фіктивних об’єктів і перевірки асинхронного коду. Він полегшує створення тестів завдяки простому і зрозумілому синтаксису. Тести можуть бути організовані у файли та групи, забезпечуючи структурування коду тестів для кращого читання.

Для запуску тестів фреймворк надає зручні засоби, як у режимі розробки, так і в процесі безперервної інтеграції. Автоматичне виявлення та запуск тестів спрощують процес розробки та зменшують трудовитрати. Jest також включає потужні інструменти для мокування, які створюють імітації об’єктів і функцій. Це корисно для ізоляції коду, що тестується, і перевірки його взаємодії із залежностями.

Приклад:

"devDependencies": {

  "jest": "^27.0.6"

}

• Mocha – гнучкий і розширюваний тестовий фреймворк для JavaScript, що надає різноманітні інтерфейси для написання тестів, включно з BDD, TDD і QUnit. Гнучкість фреймворка проявляється в можливості організовувати тести на розсуд розробників, особливо у великих проєктах із різноманітними вимогами. Він також має вбудовану підтримку асинхронних тестів і промісів, що спрощує тестування асинхронного JavaScript коду.

Приклад:

"devDependencies": {

  "mocha": "^9.1.3"

}

Управління

Управління DevDependencies є важливою частиною процесу розробки на JavaScript. Це включає додавання нових інструментів, оновлення наявних і видалення тих, які більше не потрібні. Робота здійснюється через файл package.json і npm – менеджер пакетів для Node.js.

• Додавання

Додавання нових DevDependencies починається з використання команди npm install з прапором –save-dev або скороченим записом -D. Цей прапор вказує npm додати пакет у розділ devDependencies файлу package.json:

npm install --save-dev jest

Або більш скорочена форма:

npm install -D jest

Після виконання цієї команди, Jest буде додано до розділу devDependencies вашого package.json.

• Оновлення

Оновлення DevDependencies відбувається за допомогою команди npm update. Якщо ви хочете оновити конкретний пакет, ви можете вказати його ім’я після команди:

npm update jest

Ця команда оновить версію Jest до останньої стабільної версії.

• Видалення

Видалення DevDependencies здійснюється з використанням команди npm uninstall або її скороченої форми npm r:

npm uninstall jest

Або більш скорочена форма:

npm r jest

Після виконання цієї команди, Jest буде видалено з вашого package.json.

Файл package.json – це файл, який містить інформацію про ваш проєкт, включно із залежностями, версіями залежностей та іншими метаданими. Відповідно, щоб додати, оновити або видалити DevDependency, необхідно внести зміни до файлу package.json. Після кожної з дій, цей файл автоматично оновлюється.

Приклад секції devDependencies у файлі package.json:

"devDependencies": {

  "jest": "^27.0.6",

  "eslint": "^8.0.0",

  "babel/core": "^7.15.0"

}

NPM – це менеджер пакетів, який використовується для встановлення та керування залежностями в проектах на JavaScript. Наведемо кілька команд npm, які можуть бути корисними під час роботи з DevDependencies:

• npm install (або npm i): встановлює всі залежності, перелічені у файлі package.json.
• npm update: оновлює всі залежності до їхніх останніх версій.
• npm uninstall [пакет] (або npm r [пакет]): видаляє вказаний пакет із node_modules і оновлює файл package.json.

Важливість у проєктах

Важливість DevDependencies проявляється, насамперед, у сфері тестування. Наприклад, тестові фреймворки, такі, як Jest і Mocha, входять до DevDependencies. Вони допомагають створювати і запускати тести, що дає змогу знаходити і виправляти помилки на ранніх етапах розробки. Цей підхід збільшує впевненість у працездатності коду та забезпечує стабільність розробки.

DevDependencies також впливають на якість коду через інструменти статичного аналізу, такі як ESLint. Вони допомагають виявляти потенційні проблеми, стежити за стандартами кодування, що покращує читабельність і загальну підтримуваність коду.

Транспіляція коду з використанням інструментів на кшталт Babel теж належить до DevDependencies. Це дає змогу використовувати сучасні можливості мови JavaScript, залишаючись сумісним із різними браузерами. Такий підхід не тільки забезпечує зручність розробки, а й підтримує актуальність коду на різних платформах.

Керування залежностями, включно зі встановленням і оновленням пакетів через npm, також пов’язане з DevDependencies. Це необхідно для підтримки однаковості версій пакетів, запобігання конфліктам залежностей і забезпечення стабільності середовища розробки.

Збірка проекту

DevDependencies впливають на процес складання та розгортання проєкту кількома способами:

• Розмір: збільшують розмір збірки, тому що містять код і ресурси, необхідні тільки для розробки, але не для роботи застосунку в продакшені. Це може уповільнити процес розгортання і збільшити його вартість.

• Складність: можуть ускладнити процес складання, вимагаючи додаткових налаштувань і конфігурацій. Це може спричинити помилки та уповільнити процес складання.

• Час: збільшують час складання, тому що повинні бути встановлені та налаштовані перед тим, як почнеться складання програми. Це може призвести до затримок у розробці.

Процес складання з DevDependencies відрізняється від процесу без них:

• Додаткові кроки: необхідно додати додаткові кроки для встановлення та налаштування DevDependencies, що вимагає додаткових знань у розробників.

• Додаткові залежності: необхідно встановити додаткові залежності, необхідні для роботи DevDependencies, що може спричинити помилки та уповільнити процес складання.

Найкращі практики використання 

Ось кілька порад щодо ефективного управління DevDependencies:

• Використовуйте тільки ті залежності, які необхідні для вашого проєкту. Це може збільшити розмір збірки, складність і час.
• Якщо ви використовуєте залежності, які значно збільшують розмір збірки, подумайте про те, щоб використовувати їх тільки в процесі розробки.
• Уважно читайте документацію, щоб дізнатися про можливі додаткові налаштування або конфігурації. Деякі з них можуть ускладнити процес складання.
• Використовуйте інструменти збірки, які підтримують автоматичне встановлення та ініціалізацію залежностей. Це може допомогти вам уникнути помилок і прискорити процес складання.

Ось кілька поширених помилок, яких слід уникати під час роботи з DevDependencies:

• DevDependencies мають бути додані до списку DevDependencies, а не до списку залежностей. Це гарантує, що вони будуть встановлені тільки в процесі розробки.
• DevDependencies не повинні використовуватися в продакшені, оскільки вони можуть збільшити розмір застосунку і ускладнити його розгортання.
• Перед оновленням DevDependencies уважно прочитайте документацію, щоб переконатися, що оновлення не призведе до помилок у вашому проєкті.

Висновок

У сучасній розробці DevDependencies стали невід’ємною частиною процесу. Їхнє правильне використання покращує якість коду, полегшує розробку і піднімає рівень професіоналізму проєкту. А, уважне управління цими залежностями – це крок до більш ефективної та стійкої розробки на JavaScript.