المشتركة استنسل مطبات CLI وكيفية تجنبها

تعد Stencil Command Line Interface أداة قوية تتيح لك معاينة تغييرات سمات BigCommerce في الوقت الفعلي وتجميع ملفاتك في مظهر مضغوط يمكنك تحميله إلى متجرك. قد يبدو من الصعب بعض الشيء الغوص في هذا النوع من التطوير إذا كنت جديدًا على Stencil.

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

هل أحتاج إلى الاستنسل CLI؟

أولاً ، وربما الأهم من ذلك ، يجب عليك تحديد ما إذا كنت تحتاج فعلاً إلى تثبيت Stencil CLI لإجراء تغييرات التصميم التي تريدها في متجرك. العمل الذكي ليس من الصعب!

إليك بعض السيناريوهات للمساعدة في إرشادك في اتخاذ هذا القرار.

س: أرغب في عرض مزيد من التفاصيل للعملاء على صفحات المنتج الخاصة بي - مثل معلومات الضمان - ولا يعرض هذا الموضوع الخاص بي أصلاً. هل أحتاج إلى تثبيت Stencil CLI؟

ج: كلا! يمكنك إضافة مراجع إلى خصائص كائن Stencil إضافية مثل {{product.warranty}} في ملف قالب دون استخدام CLI. يحتوي BigCommerce على محرر ملفات موضوع مدمج يمكنك استخدامه لإجراء التغييرات التي تحتاج إليها. راجع دليلنا للوصول إلى ملفات السمات الخاصة بك وإجراء التغييرات مباشرة في لوحة المعلومات هنا.

راجع وثائقنا للحصول على قائمة بالكائنات المتاحة والأجزاء التي يمكن الرجوع إليها. (لا تنسَ أن تعلن عن أشياء جديدة في قالب ذي أهمية أمامية.)

س: هل أحتاج إلى تثبيت Stencil CLI لترجمة متجري إلى لغات إضافية؟

ج: نعم ، هذا هو الموقف الذي ستحتاج فيه إلى تثبيت CLI ، لأنك ستضيف ملفًا جديدًا لترجمة json ، ويجب تضمينها في السمة.

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

ج: نعم ، يتطلب إنشاء ملف قالب مخصص تثبيت Stencil CLI. ستحتاج إلى CLI لمعاينة القالب المخصص بصفحة المنتج أثناء العمل ، ولجمع الملف الجديد مع نسختك.

تثبيت CLI

لدينا دليل مباشر لتثبيت CLI هنا في مركز تطوير BigCommerce ، لكنني أريد أن أتناول بضع نقاط أثناء عملية التثبيت حيث يميل الناس إلى التعثر.

تثبيت التبعيات باستخدام Git و npm

لقد لاحظت أن مستخدمي Windows سيصلون في بعض الأحيان إلى طريق مسدود عندما يحين الوقت لسحب Stencil وتبعياته من npm. للقيام بذلك ، ستحتاج إلى أداة سطر أوامر shell يمكنها تشغيل أوامر Unix. في مستنداتنا ، نوصي Git Bash ولكن يمكنك استخدام Powershell أو برامج أخرى.

بمجرد تثبيت Node مع التبعيات المطلوبة لتشغيل Stencil ، ستتمكن من استخدام الأمر npm.

تخصيص سمة موجودة

في مستنداتنا ، نوصيك بسحب أحدث إصدار من Cornerstone من GitHub ، لكن هذا ليس ضروريًا إذا كان لديك بالفعل سمة تريد إجراء تغييرات عليها.

في هذا السيناريو ، كل ما عليك فعله هو تنزيل المظهر الخاص بك من لوحة معلومات BigCommerce. ضمن واجهة المتجر> سماتي ، انقر فوق تنزيل السمة الحالية لتنزيل ملف مضغوط من السمة الخاصة بك.

(ملاحظة: بالنسبة إلى سمات Pixel Union ، ستحتاج إلى إعداد مفاتيح BitBucket SSH قبل هذه الخطوة.)

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

cd / files / my_theme

ثم اركض

تثبيت npm

انتبه إلى إصدارات التبعية

المشكلة الأولى التي لاحظت أن المستخدمين واجهوها عند تثبيت Stencil CLI هو أنهم لا يستخدمون الإصدار الموصى به من Node أو Python ، أو أنهم لا يستخدمون أحدث إصدار من CLI نفسه.

إذا قمت بتنزيل CLI منذ فترة ، فسيكون الوقت مناسبًا لتثبيت أحدث إصدار. للتأكد من أن هذا يسير بسلاسة ، تشغيل

npm uninstall -g @ bigcommerce / stencil-cli

ثم

npm install -g @ bigcommerce / stencil-cli

يؤدي هذا إلى إلغاء تثبيت CLI وإعادة تثبيته على مستوى العالم.

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

خطأ فادح: لم يتم العثور على ملف "sass / context.h"

حسنا ماذا الان أولاً ، nuke مجلد الوحدات النمطية Node الخاص بك.

rm-rf node_modules

الآن قم بتشغيل nvm install 7.6.0

بمجرد تثبيت الإصدار المدعوم بنجاح ، استخدم nvm 7.60 ثم تحقق مرة أخرى من أنك تستخدمه عن طريق تشغيل العقدة - v. يجب أن ترى الآن أنك تستخدم الإصدار المدعوم

الآن باستخدام العقدة v7.6.0 (npm v6.8.0)

أخيرًا ، قم بتشغيل npm install في دليل السمات الخاص بك ، وستتمكن من تثبيت جميع وحدات Node بنجاح ، وعندما تقوم بتشغيل stencil init ، فلن ترى أي أخطاء. عندما تكون مستعدًا لبدء التطوير ، قم بتشغيل الاستنسل!

أسئلة مكررة

س: أرى خطأً عند تشغيل تثبيت npm: npm ERR! يرجى محاولة تشغيل هذا الأمر مرة أخرى كجذر / مسؤول.

A: ستحتاج إلى محاولة فرض ذاكرة التخزين المؤقت npm نظيفة كمسؤول:

سودو مخبأ نظيفة و

ثم قم بتشغيل npm installagain.

س: أرى خطأ 500 عند تشغيل الحرف الاستنسل. هل هذا بسبب خطأ في نهاية BigCommerce؟

ج: هناك بعض الأشياء التي يجب التحقق منها عند حدوث ذلك:

  • تأكد من أنك تستخدم إصدارًا موصى به من Node
  • سترى هذا الخطأ إذا لم يكن لديك تطبيق Stencil theme على متجر BigCommerce.
  • قد يكون ذلك من الآثار الجانبية لتقديم طلب إلى متجر باستخدام خدمة مجال قائمة على الوكيل مثل Cloudflare أو Amazon Cloudfront. إذا كنت تشك في أن هذا هو الجاني ، فقم بتعديل ملف hosts على جهازك لتعيين مضيفك المحلي على BigCommerce IP في متجرك.

س: لقد تمكنت من تثبيت Stencil وإعداده ، لكني رأيت خطأ 404 عند محاولة معاينة ملف قالب مخصص!

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

"المنتج": {
"البديل-product.html": "/ اختبار رابط /"
}

يجب تسجيل الدخول إلى لوحة التحكم في متجر BigCommerce وإنشاء منتج باستخدام عنوان URL / test-url /.

افكار اخيرة

بمجرد تعطل عملية التثبيت ، يصبح استكشاف كل خطوة وإصلاحها أسهل. إذا كنت لا تزال تضيع أو لديك إعداد محدد ، أو ترغب فقط في الدردشة مع مطورين آخرين حول تطوير الاستنسل المتقدم ، فانتقل إلى مجتمع مطوري البرامج. هل لديك مشروع Stencil مثير للاهتمام تعمل عليه؟ TweetBigcommerceDevs - نريد أن نسمع عن ذلك!