Тези NPM трикове ще ви направят професионалист

След като използвах 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/myrepository

4. Свързване на пакети

Понякога искате да работите по даден проект и да разработите неговите пакети едновременно. Ангажирането и изпращането на вашия пакет в отдалечено хранилище за всяка промяна, която искате да изпробвате, е уморително! ? Вместо това можете да използвате функция, наречена свързване на пакети .

Свързването на пакети работи чрез създаване на символна връзка във вашата папка node_modules, която сочи към локалното хранилище на вашия пакет. По този начин можете да редактирате пакети локално и промените ще бъдат незабавно достъпни в проекта, като го използвате.

Най-лесният начин да разберете свързването на пакети е да го изпробвате!

Да кажем, че имаме проект, наречен myprojectи пакет, наречен mypackage. Искаме mypackageда бъдем зависими от myproject.

Отидете в папката mypackageи напишете

npm link

Хубаво! Сега отидете в папката myprojectи напишете

npm link mypackage

Свършен! Погледнете по-отблизо структурата на папките

Както можете да видите, myproject/node_modules/mypackageсега е символна връзка към папката mypackage! Сега можете да продължите да се развивате mypackageи всички промени, които правите, ще бъдат незабавно достъпни в myproject.

5. Командата npx

Има много инструменти за скриптове в NPM, които вероятно ще използвате, но няма да бъдат част от вашия пакет за изпълнение. Grunt, gulp, 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-скриптове вместо това поради няколко причини:

➕ По-малко dev-зависимости или глобални зависимости за поддържане.

➕ Няма нови инструменти за научаване на сътрудници и членове на екипа

➕ По-малко код и конфигурация.

На първо място, имате предварително дефинирани скриптове, 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

Понякога имам 30 npm-скрипта в моя пакет.json (без майтап). ? За щастие, ако използвате Visual Studio Code, можете да изброите всичките си npm-скриптове в Explorer и да стартирате вашите скриптове с едно щракване! Уверете се, че тази настройка е активирана:

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

Благодаря ви, че четете.