الحيل 13 دورة في الدقيقة لتوفير الوقت

كل يوم ، يتحول ملايين المطورين ، عند إنشاء تطبيقات JavaScript الخاصة بهم ، إلى npm (أو إلى Yarn). أصبح تشغيل أوامر مثل npm init أو npx create-react-app طريقة مألوفة لبدء العمل في أي مشروع JavaScript تقريبًا. يمكن أن يكون خادم أو عميل أو حتى تطبيق سطح مكتب.

لكن الأداة المساعدة npm ليست فقط قادرة على تهيئة المشروعات أو تثبيت الحزم. يريد مؤلف المادة ، التي نُنشر ترجمتها اليوم ، أن يتحدث عن 13 حيلة في الدقيقة والتي ستتيح لك الضغط على كل شيء ممكن من هذا النظام. سننظر هنا في تقنيات ذات أحجام مختلفة - من استخدام الاختصارات إلى تخصيص سلوك npm init .



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

إذا لم تكن معتادًا على npm تمامًا - فاحرص على تثبيت البرنامج الذي يهمنا مع Node.js. إذا كنت تعمل على Windows ، فمن المستحسن أن تقوم بتثبيت Git Bash من أجل إعادة إنتاج بعض ما تمت مناقشته هنا.

1. خيارات موجزة لتسجيل الأوامر الأساسية

لنبدأ بالأساسيات. من خلال قضاء بعض الوقت في استكشاف إصدارات مختصرة من أوامر npm الأكثر شيوعًا ، ستوفر على نفسك الكثير من الوقت في المستقبل.

• تثبيت الحزم. الخيار العادي: npm install . اختصار: npm i .
• تشغيل الاختبارات. الخيار العادي: npm test . اختصار: npm t .
• مساعدة الاتصال. الخيار المشترك: npm --help . اختصار: npm -h .
• وضع العلم العالمي. الخيار المشترك: - --global . الاختصار:
• علم تثبيت الحزمة باعتباره تبعية تطوير. الخيار المعتاد هو --save-dev . الاختصار:
• npm init الإعدادات npm init الافتراضية. الخيار المعتاد هو npm init --yes أو npm init --force . اختصار: npm init -y أو npm init -f .

الآن لا تحتاج إلى استخدام - --save أو علامة -S لحفظ الحزم. يتم حفظ الحزم بشكل افتراضي. ولتثبيت حزمة دون حفظها ، يمكنك استخدام العلامة --no-save .

خيارات التسجيل القصيرة لأوامر أقل شيوعًا

فيما يلي بعض الاختصارات المفيدة ، والتي ، مع ذلك ، لا يتم استخدامها على نطاق واسع كتلك التي استعرضناها للتو.

• حفظ حزمة كتبعية اختيارية. الخيار المعتاد: --save-optional . الاختصار:
• حفظ المعلومات حول الإصدار الدقيق للحزمة. الخيار المعتاد هو --save-exact . الاختصار:

يؤدي استخدام الأمر npm install مع --save-bundle أو bundledDependencies -B ظهور إدخالات في الحزم المثبتة في package.json ، في قسم bundledDependencies . سيتم حزم هذه الحزم مع المشروع عند النشر. لإنشاء ملف tarball يحتوي على ملفات المشروع bundledDependencies المدرجة في bundledDependencies ، يمكنك استخدام الأمر npm pack .

▍ اختصار للدليل الجذر

عادةً ما يتم استخدام الرمز dot ( . ) لتمثيل الدليل الجذر للتطبيق ، أو (حسب السياق) لتمثيل نقطة إدخال للتطبيق. في npm ، هذا هو ما تم تعيينه كقيمة للخاصية main في ملف package.json :

 {  "main": "index.js" } 

يمكن استخدام هذا الاختصار ، على سبيل المثال ، مع أوامر مثل npx create-react-app . لذا ، بدلاً من تشغيل هذا الأمر في شكل تطبيق npx create-react-app my-app (والذي سيؤدي إلى إنشاء مجلد my-app جديد) ، يمكنك تشغيل هذا الأمر مثل هذا: npx create-react-app . (انتبه إلى النقطة التي تأتي بعد الأمر). سيتيح لك ذلك إنشاء مشروع قالب تطبيق React في المجلد الذي أنت فيه الآن يعمل الأمر.

2. تحديد القيم الافتراضية ل npm init

من خلال تشغيل أمر npm init باستمرار لإنشاء مشروع جديد ، ستجد على الأرجح أنك تدخل البيانات نفسها مرارًا وتكرارًا ردًا على أسئلة النظام. على سبيل المثال - من المحتمل أنك مؤلف معظم المشاريع التي تنشئها. لتوفير الوقت عند إدخال نفس البيانات ، يمكنك تعيين القيم الافتراضية الخاصة بك للحقول المقابلة:

 npm config set init.author.name "Joe Bloggs" npm config set init.author.email "joebloggs@gmail.com" npm config set init.author.url  "joebloggs.com" npm config set init.license   "MIT" 

للتحقق من صحة إضافة هذه المعلومات إلى النظام ، أدخل الأمر npm config edit . سيؤدي هذا إلى فتح ملف التكوين في محرر النظام. إذا كنت ترغب في تحرير معلمات npm العمومية ، استخدم الأمر npm config edit -g .

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

 echo "" > $(npm config get userconfig) npm config edit 

يعيد البرنامج النصي أعلاه تعيين القيم الافتراضية للمستخدم. يقوم البرنامج النصي التالي بإعادة تعيين الإعدادات الافتراضية العامة:

 echo "" > $(npm config get globalconfig) npm config --global edit 

3. البرامج النصية عبر منصة

قد تواجه أي تعليمات برمجية يتم تنفيذها على سطر الأوامر مشاكل التوافق. ينطبق هذا بشكل خاص على عدم التوافق بين الأنظمة المستندة إلى Windows والأنظمة المستندة إلى Unix (بما في ذلك Mac و Linux). هذه ليست مشكلة إذا كنت أنت وحدك تعمل في مشروع معين. ولكن في العديد من الحالات ، يكون توافق البرمجة النصية عبر الأنظمة مهمًا. على سبيل المثال ، يعد العمل بشكل مستقل عن نظام التشغيل ميزة إضافية لأي مشروع مفتوح المصدر أو التدريب أو العرض التوضيحي.

لحسن الحظ ، حل مشكلة توافق البرنامج النصي ليس بالأمر الصعب. لدينا العديد من الخيارات تحت تصرفنا. ومع ذلك ، أود هنا أن أتحدث عن أحدهم ، حول استخدام أفضل النتائج. هذه حزمة عبر env . يجب تثبيته كعنصر تبعية تطوير باستخدام الأمر npm i -D cross-env . ثم تحتاج إلى وضع cross-env أمام كل متغير بيئة. على سبيل المثال ، قد يبدو كالتالي:

 {  "scripts": {    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" } 

لقد وجدت أن حزمة cross-env هي الأداة الأكثر ملاءمة لتحقيق توافق البرمجة النصية عبر الأنظمة الأساسية. ولكن سيكون من المفيد لك إلقاء نظرة على الأدوات الشائعة التالية التي يمكن أن تساعد في حل هذه المشكلة:

• حزمة Rimraf . إنه ، لتشغيل البرامج النصية عبر النظام الأساسي ، يمكن تثبيته على مستوى العالم.
• حزمة ShellJS . هذا تطبيق Node.js محمول من shell أمر Unix.

4. تنفيذ البرنامج النصي الموازي

من أجل تنظيم التنفيذ المتسلسل للأوامر في shell Linux ، يتم استخدام && . ماذا عن تشغيل البرامج النصية المتوازية؟ لتحقيق ذلك ، يمكنك اختيار حزمة npm المناسبة. الحزم الأكثر شعبية من هذا النوع هي متزامنة و npm-run-all . هنا نوضح استخدام الحزمة في وقت واحد.

أولاً ، يجب تثبيت الحزمة المحددة على تبعية التطوير: npm i -D concurrently . ثم في package.json يمكنك استخدام بناء النموذج التالي:

 {  "start": "concurrently \"command1 arg\" \"command2 arg\"" } 

5. تشغيل البرامج النصية الموجودة في الدلائل المختلفة

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

للبدء ، يمكنك استخدام cd للتنقل تلقائيًا إلى الدليل المطلوب. قد يبدو شيء مثل هذا:

 cd folder && npm start && cd .. 

ولكن هذه المشكلة يمكن حلها بطريقة أكثر إثارة للاهتمام. تتمثل في استخدام علامة - --prefix ، والتي يمكنك من خلالها تحديد المسار:

 npm start --prefix path/to/your/folder 

فيما يلي مثال لتطبيق هذا الحل من تطبيق حقيقي. هنا نحتاج إلى تشغيل npm start العميل والخادم الخاصة بالمشروع. الكود الخاص بهم ، على التوالي ، موجود في مجلدات client server .

 "start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"", 

6. تأخير بدء تشغيل البرنامج النصي حتى يتوفر مورد

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

على سبيل المثال ، هناك برنامج نصي مطور يُستخدم في تطبيق Electron مكتوب بواجهة باستخدام React. يعمل البرنامج النصي ، concurrently ، على تشغيل طبقة العرض التقديمي للتطبيق ونافذة الإلكترون بشكل متوازٍ. ولكن باستخدام wait-on يمكنك جعل نافذة Electron مفتوحة فقط عندما تكون طبقة React Presentation جاهزة للاستخدام ومتاحة على http://localhost:3000 . إليك ما يبدو عليه استخدام wait-on :

 "dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"", 

بالإضافة إلى ذلك ، يتمثل السلوك القياسي لمشاريع React في فتح نافذة مستعرض تلقائيًا. إذا كنت تستخدم React with Electron ، فهذا ليس ضروريًا. يمكن BROWSER=none باستخدام BROWSER=none متغير بيئة ، وقبل ذلك ، من أجل التوافق عبر النظام الأساسي للحل ، يوجد أمر cross-env .

7. قائمة والعمل مع البرامج النصية المتاحة

من أجل سرد البرامج النصية المتوفرة في package.json ، ما عليك سوى الانتقال إلى الدليل الجذر للمشروع وتنفيذ أمر npm run في الجهاز الطرفي.

ولكن هناك طريقة أكثر ملاءمة لسرد البرامج النصية. عند استخدامه ، يمكن تحديد البرنامج النصي المطلوب على الفور من القائمة وتشغيله. من أجل استخدام هذه الطريقة في العمل مع البرامج النصية ، نحتاج إلى تثبيت الوحدة النمطية ntl (قائمة مهام Npm) عالميًا:

 npm i -g ntl 

ثم في مجلد المشروع تحتاج إلى تشغيل الأمر ntl . سيعرض قائمة من البرامج النصية المتاحة وسيمنحك الفرصة لتحديد البرنامج النصي لتشغيله. هنا هو كيف يبدو.


باستخدام الأمر NTL

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

8. تشغيل البرامج النصية قبل وبعد البرامج النصية

قد تكون معتادًا على البرامج النصية postbuild و postbuild التي تسمح لك بتشغيل بعض التعليمات البرمجية قبل وبعد تشغيل البرنامج النصي build . يمكن تعريف البرامج النصية السابقة واللاحقة لأي نص آخر. بما في ذلك أولئك الذين تمت إضافة ackage.json إلى p ackage.json بواسطة المبرمج.

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

9. التحكم في إصدار التطبيق

بدلاً من تغيير إصدار التطبيق يدويًا ، يمكن للمبرمج استخدام أوامر npm الخاصة. من أجل زيادة الجزء المقابل من رقم إصدار التطبيق ، يمكنك استخدام الأمر npm version متبوعًا npm version أو minor أو patch :

 // 1.0.0 npm version patch // 1.0.1 npm version minor // 1.1.0 npm version major // 2.0.0 

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

 {  "predeploy": "npm version patch" } 

10. تحرير package.json من سطر الأوامر

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

 npm install -g json 

ثم يمكن استخدام الأداة المساعدة json لتحرير الملف بسرعة باستخدام -I . على سبيل المثال ، لإضافة برنامج نصي جديد foo مع bar القيمة إلى الملف ، يمكنك استخدام الأمر التالي:

 json -I -f package.json -e 'this.scripts.foo="bar"' 

في القسم التالي ، سترى مثالًا أكثر عملية لاستخدام الأداة المساعدة json .

11. أتمتة الإعداد وفتح مستودع

إذا كان هناك إدخال "repository" في ملف package.json الخاص بك ، فهذا يعني أنه يمكنك فتح صفحة المستودع في المستعرض الذي يستخدمه النظام افتراضيًا. للقيام بذلك ، استخدم الأمر npm repo .

إذا كان مشروعك متصلًا بالفعل بمستودع بعيد وكان لديك أداة سطر الأوامر git مثبتة ، فهذا يعني أنه يمكنك معرفة عنوان مستودعك باستخدام الأمر التالي:

 git config --get remote.origin.url 

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

 json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\"" 

12. إنشاء البرنامج النصي الخاص بك للسيطرة على الأمر init npm

الآن دعنا نتحدث عن حل مهمة أكبر. وهي ، سنقوم بتطوير البرنامج النصي الخاص بنا الذي يتحكم في تشغيل أمر npm init ، الذي يقبل عنوان URL الخاص بمستودع GitHub ويرسل تلقائيًا الالتزام الأول إليه. هنا نتحدث عن كيفية إنشاء مثل هذه البرامج النصية. وفي القسم التالي ، الذي سيكون آخر نصيحة لنا ، سنتحدث عن العمل مع git .

يمكنك تخصيص سلوك أمر npm init باستخدام .npm-init.js . لنقم بإنشاء مثل هذا الملف في الدليل الرئيسي للمستخدم الحالي (في نظام Windows ، يكون عادةً C:/Users/<username> ، وعلى نظام التشغيل Mac يكون /Users/<username> ). بعد ذلك ، قم بتنفيذ الأمر التالي الذي يخبر npm أين يوجد هذا الملف بالضبط:

 npm config set init-module ~\.npm-init.js 

قبل الدمج مع git ، دعونا ننظر إلى مثال بسيط .npm-init.js ، الذي يعيد إنتاج الأسئلة التي يطرحها النظام على المستخدم عند استخدام الأمر npm init بدون إعدادات إضافية:

 module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),   main: prompt('entry point', 'index.js'),  repository: prompt('git repository', ''),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC') } 

يعتمد كل سؤال على القالب التالي:

 nameInPackage: prompt('nameInPrompt', 'defaultValue') 

للإشارة إلى قيمة معينة وعدم طرح سؤال على المستخدم ، ما عليك سوى إزالة طريقة prompt .

إذا كنت ترغب في العودة إلى إعدادات npm init القياسية npm init ، ما .npm-init.js سوى حذف .npm-init.js .

13. إرسال الالتزام الأول إلى مستودع GitHub باستخدام npm init

من أجل تنفيذ أوامر git في .npm-init.js نحتاج إلى إيجاد طريقة للعمل مع سطر الأوامر. يمكنك استخدام وحدة child_process لهذا child_process . نقوم بتوصيله في الجزء العلوي من الملف ، وبما أننا نحتاج فقط إلى وظيفة execSync ، فإننا execSync فقط ، باستخدام التدمير:

 const { execSync } = require('child_process'); 

بالإضافة إلى ذلك ، سننشئ وظيفة مساعدة تعرض نتائج وظيفتنا في وحدة التحكم:

 function run(func) {  console.log(execSync(func).toString()) } 

وأخيرًا ، دعنا ننشئ كتلة المطالبة المناسبة للتعامل مع عنوان URL لمستودع جيثب. إذا كان النص يحتوي على عنوان URL ، فسنقوم بإنشاء ملف README.md وإرسال الالتزام الأول إلى المستودع.

لذلك ، يجب أن يكون أحد عناصر الكائن .npm-init.js هو الكود التالي:

 repository: prompt('github repository url', '', function (url) {  if (url) {    run('touch README.md');    run('git init');    run('git add README.md');    run('git commit -m "first commit"');    run(`git remote add origin ${url}`);    run('git push -u origin master');   return url; }) 

في ما يلي كيفية قيام الكود الكامل .npm-init.js بهذه الإضافة:

 const { execSync } = require('child_process'); function run(func) {  console.log(execSync(func).toString()) } module.exports = {  name: prompt('package name', basename || package.name),  version: prompt('version', '0.0.0'),  decription: prompt('description', ''),  main: prompt('entry point', 'index.js'),  keywords: prompt(function (s) { return s.split(/\s+/) }),  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),  license: prompt('license', 'ISC'),  repository: prompt('github repository url', '', function (url) {    if (url) {      run('touch README.md');      run('git init');      run('git add README.md');      run('git commit -m "first commit"');      run(`git remote add origin ${url}`);      run('git push -u origin master');       return url;  }), } 

هذا هو ما يبدو عليه ملف package.json الذي يقوم النظام بإنشائه باستخدام .npm-init.js هذا:

 {  "name": "Custom npm init",  "version": "0.0.0",  "decription": "A test project, to demonstrate a custom npm init script.",  "main": "index.js",  "keywords": [],  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",  "license": "ISC",  "repository": {    "type": "git",    "url": "git+https://github.com/JoeBloggs/custom.git"  },  "bugs": {    "url": "https://github.com/JoeBloggs/custom/issues"  },  "homepage": "https://github.com/JoeBloggs/custom#readme" } 

من خلال إعداد عملية تهيئة المشاريع الجديدة ، يمكنك المضي قدمًا. على سبيل المثال ، للتأكد من أنه عند إنشاء مشروع ، سيتم إنشاء مستودع جديد له.

النتائج

آمل أن تكون هذه المادة قد ساعدك على رؤية ما يمكنك تحقيقه باستخدام npm. أريد أن أصدق أنك قد وجدت شيئًا هنا يتيح لك العمل بشكل أكثر إنتاجية - سواء كنا نتحدث عن استخدام إصدارات مختصرة من الأوامر أو حول البرامج النصية من package.json أو حول إعداد npm init لتناسب احتياجاتك.

أعزائي القراء! هل أتمتة العمل مع npm؟