Використовуючи NPM майже 8 років, я навчився того, що хотів би знати, починаючи. Назвемо їх фокусами, речами, які різко покращили мій спосіб роботи з NPM. Сьогодні я хочу поділитися з вами своїми 10 найкращих прийомів.
1. Економте час. ⏲ Використовуйте ярлики
Це одна з найбільш корисних, але не дуже добре задокументованих функцій. Ярлик для команди може здатися дрібницею, але правда полягає в тому, що ви будете писати на 30–60% менше коду. Ви заощадите час, який можете витратити на щось значуще, наприклад, випити зайву чашку кави ☕️?
Замість npm install
писати .npm i
Замість npm install--save
писати .npm i -S
Замість npm install--save-dev
писати .npm i -D
Замість npm install--global
писати .npm i -G
? Бонусний ярлик! Хочете вразити своїх колег? ? Ось воно…
Замість npm test
писати .npm t
2. Встановіть кілька пакетів однією командою
Навіщо писати кілька рядків, коли ви можете написати один? ? Якщо ви знаєте свої пакети напам'ять, найшвидший варіант - це встановити їх всі в одній підкладці, але будьте обережні! Один помилково написаний пакет і вся команда вийде з ладу. Якщо ви не впевнені в іменах, просто встановіть їх по одному.
npm i -S react redux react-redux 3. Встановіть пакети з різних джерел
За замовчуванням при запуску npm-installNPM інсталює останню версію з реєстру npm (//registry.npmjs.org)
Але є ще! NPM може також встановлювати пакети з інших джерел, таких як URL-адреса або файл tarball.
Під час створення власних пакетів або викликів для існуючих пакетів ця функція є потужною. Наприклад, якщо у вас є власна вилка Redux, ви можете встановити свій пакет безпосередньо з вашої вилки. (Змініть usernameім’я користувача на GitHub.)
npm i Навіть краще, якщо ви використовуєте сховище GitHub, ви можете використовувати цей ярлик:
npm i username/redux
Є ще! Ви також можете встановити пакет із певної гілки. Корисно під час тестування майбутнього випуску. Просто додайте #разом із назвою філії в кінці.
npm i username/redux#? Бонусний ярлик! Ви не використовуєте GitHub? Не хвилюйтеся, є також ярлики для BitBucket та GitLab :
npm i bitbucket:username/myrepositorynpm i gitlab:username/myrepository4. Пов’язування пакетів
Іноді хочеться одночасно працювати над проектом і розробляти його пакети. Фіксація та надсилання вашого пакету до віддаленого сховища для кожної зміни, яку ви хочете спробувати, стомлює! ? Натомість ви можете використовувати функцію, яка називається посиланням на пакунки .
Зв’язування пакетів працює шляхом створення символічного посилання у вашій папці node_modules, яке вказує на локальне сховище вашого пакету. Таким чином, ви можете редагувати пакети локально, і зміни будуть миттєво доступні в проекті, використовуючи його.
Найпростіший спосіб зрозуміти посилання на пакети - спробувати!
Скажімо, у нас є проект, який називається, myprojectі пакет, який називається mypackage. Ми хочемо mypackageбути залежними від myproject.
Зайдіть в папку mypackageі напишіть
npm linkПриємно! Тепер перейдіть до папки myprojectта напишіть
npm link mypackage
Готово! Подивіться уважніше на структуру папок
Як бачите, myproject/node_modules/mypackageтепер є символічне посилання на папку mypackage! Тепер ви можете продовжувати розвиватися, mypackageі всі внесені вами зміни будуть миттєво доступні в myproject.
5. Команда npx
На NPM існує багато інструментів сценаріїв, якими ви, мабуть, скористаєтесь, але вони не будуть частиною вашого пакету виконання. Grunt, gutl, response-create-app, response-native-cli та mocha - це лише декілька.
До NPM 5.x вам потрібно було встановити ці інструменти або як глобальні пакети, або як devDependencies. Це зайняло багато часу не лише для встановлення, а й для обслуговування всіх ваших інструментів для декількох проектів. Крім того, більшість інструментів ви будете використовувати лише один-два рази.
Тут на допомогу приходить двійковий NPX, який економить нам багато роботи! Наприклад, щоб розпочати новий проект реагування, ви можете просто написати:
npx create-react-app my-new-project
Останню версію програми create-response-app буде завантажено та негайно виконано. Більше не потрібно встановлювати та підтримувати інструменти як глобальні пакети.
6. Відстежуйте та чистіть свій проект
Важливо розуміти, що відбувається під капотом під час встановлення пакунків, щоб вирішити проблеми та зробити дерево залежностей та остаточний розмір набору якомога меншими.
Перш за все, нам потрібен хороший огляд дерева залежностей та того, які версії пакета насправді були встановлені. Використовуйте команду npm list. Додайте прапор --depth=0до списку лише пакетів верхнього рівня, а додайте -gдо списку ваших глобальних пакетів.
npm listnpm list --depth=0 -g
NPM добре підтримує себе і згладжує дерево залежностей на льоту, але завжди є хорошою звичкою обробляти свій проект перед публікацією. Це може видалити кілька пакетів для вас.
npm dedupe
Також чудова ідея отримати хороший огляд ваших застарілих та відсутніх пакетів. Важко не полюбити цей погляд за його добре організовані колонки та кольорову гамму Різдва ??
npm outdated
Якщо у вас багато червоних рядків, вам потрібно запустити, npm updateщоб оновити свої пакети до останньої можливої версії відповідно до вашого package.json, що також зазначено у стовпці, що розшукується
npm update
Чудово! Тепер, якщо ви запустите npm oudatedще раз, усі червоні рядки повинні зникнути.
Якщо ви використовуєте каретку ^перед вашими версіями в package.json, основні версії не оновлюватимуться (отже, жовті рядки). Це добре, оскільки можливі невідповідні зміни при оновленні до нової основної версії.
Якщо ви все-таки хочете оновити все до останньої версії, ви можете скористатися інструментом npm-update-all. Це так само просто, як запустити цю команду у папці проекту.
npx npm-update-all
Класно! Тепер ви отримали останню версію всіх своїх залежностей. Також оновлено ваш package.json. Будьте в курсі порушень змін ⚠️
7. Перейдіть на домашню сторінку, щоб отримати пакет
Потрібно перевірити документацію на пакет? Навіщо переставати переходити на браузер і починати гуглити, коли все необхідне - це термінал? ?
Відкрийте сховище пакета у браузері
npm repo
Відкрийте домашню сторінку
npm home
Відкрийте документацію
npm docs
8. Використовуйте сценарії NPM
Я люблю npm-скрипти! Замість того, щоб використовувати програми для запуску завдань, такі як Gulp та Grunt, для автоматизації повторюваних завдань, ви можете, у більшості випадків використовувати замість них сценарії npm з кількох причин:
Менше залежностей від розробників або глобальних залежностей для підтримки.
Немає нових інструментів для навчання учасників та членів команди
➕ Менше коду та конфігурації.
Перш за все, у вас є попередньо визначені такі сценарії, start, install, test, prepublishякі мають особливе значення в NPM. Про те, як їх можна використовувати, ви можете прочитати в моєму попередньому підручнику, де ми створюємо пакет npm з нуля.
Ви також можете створити власні власні сценарії. Ось приклад сценарію, який відформатує ваш код у srcпапці за допомогою ESLint:
package.json:
"scripts":{"test": "jest","format": "eslint src --fix"}Тепер ви можете запускати, npm run formatі ESLint зробить свою роботу.
Ви можете робити багато речей за допомогою npm-скриптів, таких як запуск команд оболонки та ланцюжок сценаріїв один за одним. Перегляньте npm-скрипти, щоб глибше зрозуміти цю потужну функцію.
9. Запуск скриптів NPM у vsCode
Іноді в моєму пакеті.json є 30 npm-скриптів (без жартів). ? На щастя, якщо ви використовуєте Visual Studio Code, ви можете перерахувати всі свої npm-скрипти у провіднику та запустити свої скрипти одним натисканням кнопки! Переконайтеся, що цей параметр увімкнено:
npm.enableScriptExplorer: true
10. Встановіть значення за замовчуванням
Створюючи новий проект, ви будете працювати, npm initі вам будуть задавати запитання щодо вашого проекту. Щоб заощадити час, ви, мабуть, напишете run, npm init -yщоб заповнити package.json значеннями за замовчуванням.
Але які саме ваші значення за замовчуванням? ? Я люблю встановлювати деякі з них сам, щоб заощадити час далі! ?
налаштування npm init.author.name "Carl-Johan (CJ) Kihl"
налаштування npm init.author.email "[email protected]"
Резюме
Наразі це були мої поради щодо NPM! Якщо у вас є більше порад та підказок, якими ви хочете поділитися, додайте коментар нижче! ?
? Бонусний ярлик!
Уявіть, що сьогодні п’ятниця ввечері, і ви збираєтеся доопрацювати новий проект, але ви занадто втомилися писати npm dedupe. ?
Не хвилюйся! Збережіть три літери, написавши:
npm ddp
Дякую за читання.