ستجعلك حيل 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-install، سيقوم NPM بتثبيت أحدث إصدار من سجل npm (//registry.npmjs.org)

لكن هناك المزيد! يمكن لـ NPM تثبيت حزم من مصادر أخرى أيضًا ، مثل عنوان URL أو ملف tarball.

عند إنشاء الحزم الخاصة بك أو سحب طلبات الحزم الحالية ، تكون هذه الميزة قوية. على سبيل المثال ، إذا كان لديك مفترق خاص لـ Redux ، فيمكنك تثبيت الحزمة الخاصة بك مباشرة من مفترق الطرق. (قم بالتغيير usernameإلى اسم المستخدم الخاص بك على GitHub.)

npm i 

والأفضل من ذلك ، إذا كنت تستخدم مستودع GitHub ، فيمكنك استخدام هذا الاختصار:

npm i username/redux

هناك المزيد! يمكنك أيضًا تثبيت حزمة من فرع معين. مفيد أثناء اختبار الإصدار المستقبلي. فقط أضف #مع اسم الفرع في النهاية.

npm i username/redux#

؟ اختصار مكافأة! هل أنت لا تستخدم جيثب؟ لا داعي للقلق ، فهناك اختصارات لـ 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 و reaction-create-app و response-native-cli و mocha ليست سوى أمثلة قليلة.

قبل NPM 5.x ، كان عليك تثبيت هذه الأدوات إما كحزم عالمية أو كإعتماد على البرامج. كان هذا مضيعة للوقت ، ليس فقط للتثبيت ولكن للحفاظ على جميع الأدوات الخاصة بك لمشاريع متعددة. أيضًا ، معظم الأدوات التي ستستخدمها مرة أو مرتين فقط.

هنا ، يأتي برنامج NPX الثنائي للإنقاذ ويوفر الكثير من العمل لنا! على سبيل المثال ، لبدء مشروع رد فعل جديد ، يمكنك ببساطة كتابة:

npx create-react-app my-new-project

سيتم تنزيل أحدث إصدار من تطبيق create-react-app وتنفيذه على الفور. لا مزيد من أدوات التثبيت والصيانة كحزم عالمية.

6. مراقبة وتنظيف المشروع الخاص بك

من المهم فهم ما يحدث تحت الغطاء عند تثبيت الحزم من أجل حل المشكلات وجعل شجرة التبعية وحجم الحزمة النهائي أصغر ما يمكن.

بادئ ذي بدء ، نحتاج إلى نظرة عامة جيدة على شجرة التبعية وإصدارات الحزمة التي تم تثبيتها بالفعل. استخدم الأمر npm list. أضف العلم --depth=0لسرد حزم المستوى الأعلى فقط وأضف -gإلى قائمة الحزم العالمية الخاصة بك.

npm listnpm list --depth=0 -g

NPM جيد في الحفاظ على نفسه وتسطيح شجرة التبعية بشكل سريع ، ولكن من الجيد دائمًا التخلص من مشروعك قبل النشر. قد يزيل بعض الحزم من أجلك.

npm dedupe

إنها أيضًا فكرة رائعة للحصول على نظرة عامة جيدة على حزمك القديمة والمفقودة. من الصعب ألا تحب هذا المنظر لأعمدته المنظمة جيدًا ونظام ألوان عيد الميلاد المجيد ؟؟

npm outdated

إذا حصلت على الكثير من الصفوف الحمراء ، فستحتاج إلى تشغيل npm updateلتحديث الحزم الخاصة بك إلى أحدث إصدار ممكن وفقًا لحزمتك. json ، وهو مذكور أيضًا في العمود المطلوب

npm update

عظيم! الآن ، إذا عدت npm oudatedمرة أخرى ، يجب أن تختفي جميع الصفوف الحمراء.

إذا كنت تستخدم علامة الإقحام ^أمام إصداراتك في package.json ، فلن يتم تحديث الإصدارات الرئيسية (ومن هنا تأتي الصفوف الصفراء). هذا جيد ، لأنه قد يكون هناك تغييرات متقطعة أثناء التحديث إلى إصدار رئيسي جديد.

إذا كنت لا تزال ترغب في تحديث كل شيء إلى أحدث إصدار ، يمكنك استخدام الأداة npm-update-all. إنه سهل مثل تشغيل هذا الأمر في مجلد المشروع الخاص بك.

npx npm-update-all

رائع! الآن حصلت على أحدث إصدار من جميع تبعياتك. يتم تحديث package.json أيضًا. ⚠️ انتبه لكسر التغييرات

7. انتقل إلى الصفحة الرئيسية للحصول على حزمة

هل تحتاج إلى التحقق من وثائق الحزمة؟ لماذا تهتم بالانتقال إلى المتصفح والبدء في البحث على Google عندما يكون كل ما تحتاجه هو الجهاز؟ ؟

افتح المستودع الخاص بالحزمة في المتصفح

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 formatESLint وسيقوم بعمله.

يمكنك القيام بالكثير من الأشياء باستخدام البرامج النصية npm مثل تشغيل أوامر shell وتسلسل البرامج النصية بعد بعضها البعض. تحقق من البرامج النصية npm لفهم أعمق لهذه الميزة القوية.

9. تشغيل البرامج النصية NPM في vsCode

أحيانًا يكون لدي 30 برنامج نصي npm في package.json (لا تمزح). ؟ لحسن الحظ ، إذا كنت تستخدم Visual Studio Code ، فيمكنك سرد جميع البرامج النصية الخاصة بك في npm في المستكشف وتشغيل البرامج النصية الخاصة بك بنقرة زر واحدة! تأكد من تمكين هذا الإعداد:

npm.enableScriptExplorer: true

10. تعيين القيم الافتراضية الخاصة بك

عند إنشاء مشروع جديد ، سيتم تشغيله npm initوسيتم طرح أسئلة حول مشروعك. لتوفير الوقت ، من المحتمل أن تكتب run npm init -yلملء package.json بالقيم الافتراضية.

ولكن ما هي بالضبط القيم الافتراضية الخاصة بك؟ ؟ أحب أن أضع بعضًا من هذه الأشياء بنفسي لتوفير المزيد من الوقت! ؟

تعيين npm config init.author.name "Carl-Johan (CJ) Kihl"

تعيين تهيئة npm init.author.email "[email protected]"

ملخص

كانت تلك نصائحي لـ NPM في الوقت الحالي! إذا كان لديك المزيد من النصائح والحيل التي تريد مشاركتها ، فيرجى إضافة تعليق أدناه! ؟

؟ اختصار مكافأة!

تخيل أنها ليلة الجمعة وأنت على وشك الانتهاء من مشروع جديد ، لكنك متعب جدًا من الكتابة npm dedupe. ؟

لا داعى للقلق! حفظ ثلاثة أحرف بالكتابة:

npm ddp

شكرا لقرائتك.