توسعه پیشرفته با استفاده wp-scripts در وردپرس

• ۸ بهمن ۱۴۰۳
• دسته بندی ها: وردپرس

کار توسعه وردپرس برای آژانس‌ها می‌تواند کاملا رقابتی باشد که نیاز به کارایی عالی و سازگاری در پروژه‌های مشتری متعدد دارد. این مطلب به توسعه پیشرفته با استفاده wp-scripts در وردپرس می‌پردازد و تکنیک‌هایی را برای فرآیندهای ساخت شما بررسی می‌کند.

صرف نظر از اینکه شما به عنوان یک توسعه‌دهنده چقدر با تجربه هستید، مدیریت مجموعه کاملی از تم‌ها و افزونه‌های سفارشی به تلاش همیشگی برای ساده‌سازی گردش کار نیاز دارد. wp-scripts چیست؟ مجموعه ای قدرتمند از ابزارهای کمکی که می‌تواند نحوه رویکرد شما به توسعه وردپرس را متحول کند.

مفهوم فرایند ساخت (build process)

قبل از اینکه به ویژگی‌های wp-scripts بپردازیم، بیایید مفهوم گسترده‌تر فرآیند ساخت توسعه وب را درک کنیم که شامل یک سری وظایف خودکار است که به شما کمک می‌کند سورس کد را به یک برنامه یا وب‌سایت آماده تولید، منتقل کنید.

به عنوان مثال، مشاغل زیادی وجود دارند که از این طریق از اتوماسیون سود می‌برند:

• کامپایل کردن جاوا اسکریپت مدرن در کدهای سازگار با مرورگر
• تبدیل زبان‌های پیش پردازنده CSS (به عنوان مثال Sass) به CSS استاندارد
• کوچک سازی (Minifying) و بهینه سازی دارایی‌هایی مانند جاوا اسکریپت، CSS و رسانه
• در حال اجرا برای تشخیص خطاهای احتمالی و اجرای استانداردهای کدگذاری
• اجرای تست یونیت (Unit Test) برای اطمینان از عملکرد بهتر کد

اینها جنبه‌های خوب خودکارسازی برای هر گردش کار توسعه هستند، اما برای آژانس‌ها، این فرآیند کاملا حیاتی است. برای شروع، می‌توانید یکپارچگی را در چندین پروژه حفظ کنید.

همچنین می‌توانید با استفاده از این ثبات – حتی پیچیده‌ترین پروژه‌ها را- از طریق چرخه‌های سریع‌تر توسعه و استقرار نموده و همه پروژه‌های خود را حفظ کنید. برای کاربر نهایی، عملکرد بهینه‌شده‌ای که به دست می‌آورید به تجربه کلی آنها کاهش می‌یابد.

به طور معمول، آژانس ممکن است با استفاده از ابزارهایی مانند Gulp، Grunt یا حتی فرآیندهای دستی، فرآیندهای ساخت سفارشی را با هم ترکیب کند. با این حال، این رویکردها اغلب می‌توانند منجر به ناهماهنگی بین پروژه‌ها شوند، نه اینکه هزینه تعمیر و نگهداری قابل توجهی را ذکر کنیم.

 

wp-scripts تغییر گردش کار برای توسعه وردپرس

در زمینه وردپرس، یک فرآیند ساخت همچنین می‌تواند ساده سازی قابل توجهی را برای توسعه تم و افزونه ارائه دهد که به شما امکان می‌دهد از ابزارها و شیوه‌های مدرن استفاده و همزمان از سازگاری پلتفرم اطمینان حاصل کنید.

پکیج @wordpress/scripts  – wp-scripts در سراسر این مطلب، مجموعه‌ای از فایل‌های پیکربندی و اسکریپت‌ها است که به شما کمک می‌کند فرآیند ساخت پروژه‌های وردپرس را ساده کنید.

تیم Make WordPress Core بسته را توسعه داده و نگهداری می‌کند که برای ویرایشگرهای بلوک و سایت یکپارچه است. بهتر از همه، شما می‌توانید از آن برای تم سفارشی و توسعه افزونه نیز استفاده کنید.

برای نزدیک شدن به توسعه وردپرس در مقیاس در یک آژانس، wp-scripts بخش مرکزی گردش کار خواهد بود. این چیزی بیش از یک ابزار ساخت ساده است. یک راه حل جامع برای پروژه‌های مدرن وردپرس که با نیاز به یک گردش کار توسعه پیچیده هماهنگ است.

 

عملکرد کلیدی wp-scripts

از آنجایی که روش‌های مدرن جاوا اسکریپت وارد اکوسیستم وردپرس می‌شوند، ما به ابزارهای استاندارد بیشتری برای ساخت آن‌ها نیاز داریم. مجموعه ابزار ساخت یکپارچه در قالب wp-scripts برای کل اکوسیستم توسعه وردپرس مفید است.

به این ترتیب، wp-scripts طیف وسیعی از عملکردها را ارائه می‌دهد که توسعه وردپرس را کارآمدتر خواهد کرد:

 

• تنظیم زیرو کانفیگ (Zero-config) – می‌توانید بدون نیاز به تنظیمات پیچیده webpack شروع کنید.
• پشتیبانی از جاوا اسکریپت مدرن – کد ES6 شما برای سازگاری با مرورگر ترجمه می‌شود و به شما اطمینان بیشتری در صحت آن می‌دهد.
• پردازش CSS داخلی (Built-in CSS processing) – اگر از پیش پردازنده‌های CSS مانند Sass استفاده می‌کنید، از پشتیبانی خارج می‌شوید.
• ابزارهای کیفیت کد (Code quality tools) – این بسته ESLint و Prettier را برای سبک کد و کیفیت یکپارچه ادغام می‌کند.
• ابزارهای آزمایشی (Testing utilities) – Jest را در بسته برای تست یونیت (Unit Test) و اجرای آسان در دسترس دارید.
• بارگیری مجدد داغ (Hot reloading) – اگر توانایی بارگیری مجدد تغییرات خود را به صورت زنده دارید، این می تواند زمان توسعه شما را افزایش دهد.

ترکیبی از wp-scripts مزایای کلیدی بسیاری را برای آژانس‌هایی که چندین پروژه وردپرس را مدیریت می‌کنند ارائه می‌دهد. به عنوان مثال، می‌توانید محیط توسعه خود را در هر پروژه استاندارد نموده و فرآیند ساخت را در هر پروژه جدید نیز تکرار کنید. این بسته به شما امکان می‌دهد وابستگی‌های ابزار ساخت خود را متمرکز کنید، که به‌روزرسانی‌ها و وصله‌های امنیتی را قابل مدیریت‌تر می‌کند.

به طور کلی، می‌توانید کمتر نگران مشکلات سازگاری باشید، زمان راه اندازی خود را کاهش دهید و بسیاری از خطاهای معمولی را که در طول فرآیند ساخت ساده تر انجام می‌دهید، از بین ببرید.

مقایسه wp-scripts با یک فرآیند معمولی توسعه وردپرس

توسعه معمولی وردپرس اغلب شامل استفاده از صف بندی دستی برای اسکریپت‌ها و استایل‌ها می‌شود. علاوه بر این، احتمالا vanilla JavaScript یا jQuery می‌نویسید و به ابزارهای ساخت شخص ثالث تکیه می‌کنید، یا اصلا فرآیند ساخت را ندارید در مقابل، wp-scripts تقریبا در هر زمینه‌ای یک رویکرد مدرن و یکپارچه ارائه می‌دهد.

به طور کلی، wp-scripts به لطف ادغام با ابزارهایی که ممکن است قبلا از آنها استفاده نکرده باشید، انعطاف پذیری بیشتری را ارائه می‌دهد. برای مثال، تلاش برای راه‌اندازی PostCSS، webpack یا Jest می‌تواند چیزی باشد که به دلیل محدودیت‌های زمانی از آن صرف‌نظر کنید.

 

چگونه محیط توسعه خود را برای ترکیب wp-scripts تنظیم کنید

استفاده از wp-scripts الزامات خاص خود را دارد، اما احتمالا از آن ابزارها استفاده می‌کنید. در صورت نیاز، Node.js و npm را به همراه یک محیط توسعه لوکال وردپرس نصب کنید.

اگر قبلا از بسته ایجاد بلوک برای توسعه افزونه‌های بلوک وردپرس استفاده می‌کنید، wp-scripts را در کنار سایر دارایی‌های آن نصب می‌کند.

راه اندازی یک پروژه جدید وردپرس با wp-scripts

کاری که انجام می‌دهید در دایرکتوری wp-content نصب وردپرس خواهد بود. زیر شاخه خاص به نوع پروژه‌ای که ایجاد می‌کنید مربوط می‌شود: wp-content/themes برای تم‌ها و wp-content/plugins برای افزونه‌ها!
صرف نظر از این، پوشه پروژه شما باید شامل تعدادی فایل و دایرکتوری باشد:

• یک فایل package.json
• یک دایرکتوری build
• یک دایرکتوری src که شامل یک فایل index.js می‌شود

برای ایجاد یک فایل package.json، با استفاده از ترمینال یا برنامه خط فرمان، به دایرکتوری پروژه بروید. اجرای دستور npm init شما را از طریق یک فرآیند راه اندازی تعاملی هدایت کرده و نقطه ورودی (entry point) شما باید build/index.js باشد:

بعد، wp-scripts را به عنوان یک وابستگی توسعه نصب کنید:

شما باید چند دایرکتوری و فایل تولید شده به صورت خودکار را ببینید: node_modules و package-lock.json. صرف نظر از این، اکنون باید به اسکریپت‌های از پیش تعریف شده در فایل package.json مراجعه کنید:

احتمالا ++ به این فایل باز می‌گردید تا در صورت لزوم، اسکریپت‌های بیشتری را اضافه کنید. به عنوان مثال:

همچنین ممکن است لازم باشد تم یا دارایی‌های افزونه خود را در اینجا قرار داده و سپس تغییرات خود را ذخیره کنید.

درک و استفاده از webpack با wp-scripts

برای بسته‌بندی دارایی‌ها (bundling assets)، wp-scripts از webpack استفاده می‌کند. نیازی به پیکربندی آن ندارید، اگرچه درک نقش آن می‌تواند به شما کمک کند تا wp-scripts را به روشی موثرتر استفاده کنید. Webpack هنگام تنظیم مسئولیت‌های زیادی دارد:

• به حل وابستگی بین ماژول‌های جاوا اسکریپت کمک می‌کند
• می‌توانید جاوا اسکریپت مدرن را به کدهای سازگار با مرورگر تبدیل کنید
• به پردازش و بهینه سازی استایل‌های شما کمک می‌کند
• می‌توانید نقشه‌های منبع (source maps) را برای دیباگ آسان‌تر ایجاد کنید
• می‌تواند به شما کمک کند بسته‌های کوچک‌شده (minified bundles) و آماده پروداکشن بسازید

شما قبلا یک پیکربندی webpack پیش‌فرض در wp-scripts دارید که برای اکثر پروژه‌های وردپرس به خوبی کار می‌کند. با این حال، در برخی موارد، ممکن است نیاز به ایجاد تنظیمات سفارشی داشته باشید.

پیکربندی وب‌پک پیشرفته برای تنظیمات آژانس

در حالی که پیکربندی webpack پیش‌فرض برای اکثر پروژه‌های توسعه ایده‌آل است، مواقعی وجود دارد که باید پیکربندی برای نیازهای خاص خود ایجاد کنید. به عنوان مثال، ممکن است با ساختارهای تم پیچیده یا معماری‌های منحصر به فرد افزونه سر و کار داشته باشید. اینجاست که یک فایل webpack.config.js در root پروژه شما مفید خواهد بود:

این پیکربندی به چندین نقطه ورودی اجازه می‌دهد، که به ویژه برای تم‌ها یا افزونه‌هایی که به اسکریپت‌های جداگانه برای بخش‌های مختلف مدیریت وردپرس یا فرانت-‌اند نیاز دارند، مفید است. به این ترتیب، میتوانید پیکربندی پیشفرض خود را گسترش داده و مزایای wp-scripts را حفظ کنید.

هاست وردپرس با وب سرور محبوب لایت اسپید و کش لایت اسپید باعث می‌شود تا سرعت لود فوق العاده‌ای را تجربه کنید.

با خرید هاست وردپرس کانفیگ حرفه‌ای و نظارت بر سرور به صورت پیوسته توسط تیم فنی پارسدِو انجام خواهد شد.

اصول استفاده از wp-scripts

با داشتن یک محیط توسعه و ساختار فایل و پوشه مناسب، می‌توانید شروع به استفاده از wp-scripts کنید. چند دستور اساسی و پایه وجود دارد که بیشتر زمان شما را تشکیل می‌دهد.
دستور start فایل‌های شما را برای تغییرات مشاهده و دارایی‌ها را کامپایل مجدد و hot reloading را برای یک تجربه توسعه روان‌تر فراهم می‌کند:

شما از این دستور در ابتدای پروژه برای راه اندازی سرور توسعه استفاده می‌کنید، اگرچه کد کامپایل شده در فایل build/index.js را بهینه نمی‌کند.
هنگامی که شما نیاز به استقرار پروژه دارید، دستور build دارایی‌های شما را برای پروداکشن، کامپایل می‌کند:

هنگامی که این دستور را اجرا می‌کنید، چند کار را انجام می‌دهد. به عنوان مثال، جاوا اسکریپت را تبدیل ، Sass و SCSS را به CSS کامپایل، تمام دارایی های را کوچک (Minify) و نقشه‌های منبع را تولید می‌کند. در پایان، همه چیز را به فایل build/index.js خروجی می‌دهد. همچنین فرآیند ساخت یک فایل build/index.asset.php برای از بین بردن کش ایجاد می‌نماید.

بسته wp-scripts چندین دستور linting را ارائه می‌دهد تا به شما در حفظ کیفیت کد بالا کمک کند:

• npm lint:js را اجرا کنید تا فایل‌های جاوا اسکریپت را لینت کند.
• npm lint:css را اجرا کنید تا فایل‌های CSS یا Sass را lint ‌کند.
• npm lint:pkg-json را اجرا کنید تا فایل package.json را تایید ‌کند.

برای تست یونیت (Unit Test)، به سادگی npm run test را فراخوانی می‌کنید که از Jest برای اجرای مجموعه تست شما استفاده می‌کند.

جمع ‌بندی

wp-scripts می‌تواند ابزار قدرتمندی باشد که می‌تواند گردش کار را برای پروژه‌های تم و پلاگین به میزان قابل توجهی افزایش دهد. wp-scripts با ارائه یک فرآیند ساخت استاندارد، پشتیبانی مدرن جاوا اسکریپت، و ابزارهای تست و لینتینگ یکپارچه، امکان می‌دهد تا روی ایجاد پروژه‌های وردپرس با کیفیت بالا تمرکز نموده و در عین حال برخی از مهمترین وظایف را خودکار کنید.

استفاده از wp-scripts نه تنها به شما کمک می‌کند تا با شیوه‌های توسعه مدرن همراه شوید بلکه راهی برای قرار گرفتن خود در خط مقدم توسعه وردپرس است و آماده مقابله با چالش‌ها و فرصت‌هایی است که سازمان شما با آن مواجه است.