مقدمه ای بر ماژول های Nuxt – بازبینی شده است

تقریباً دو سال پیش، مقاله خود را در مورد همان موضوع -> منتشر کردم Introduction to Nuxt Modules 🚀
اگر دوست دارید می توانید آن را اینجا بررسی کنید، اما احتمالاً کمی قدیمی است و به همین دلیل است که تصمیم گرفتم امروز یک نسخه مدرن تر ایجاد کنم.

من واقعاً ایده ماژول ها را به عنوان راهی برای مشارکت کنندگان فردی که بتوانند خود را اضافه کنند، دوست دارم brick به اکوسیستم چارچوب. چرا؟ صرفاً به این دلیل که یک محیط ایزوله است که می توانید در مخزن خصوصی خود ایجاد کنید و بدون نگرانی در مورد شکستن چیزی در مخزن اصلی فریمورک روی آن کار کنید.

و زمانی که در الگوها مهارت بیشتری کسب کنید، همیشه می‌توانید در مخزن اصلی بپرید و در آنجا مشارکت کنید (باور کنید، مسائل زیادی وجود دارد که می‌توانید از آنها استفاده کنید و به رشد چارچوب کمک کنید)

در این مقاله، من بر روی ماژول هایی که برای اکوسیستم Nuxt ایجاد کرده ام، نحوه کار آنها و اینکه چگونه حتی امروز یک نویسنده ماژول می شوید تمرکز خواهم کرد!

بیا داخل بپریم

ماژول ها چیست؟

من اینقدر توضیح نمی دهم که ماژول ها چگونه کار می کنند زیرا قبلاً در مقاله قبلی خود این کار را انجام دادم و از آن زمان تاکنون تغییرات زیادی ایجاد نشده است. جالب اینجاست که وقتی این مقاله را در سال 2021 منتشر کردم، هیچ راهنمای رسمی واقعی از Nuxt در مورد این موضوع وجود نداشت. بنابراین، مقاله من به عنوان یک مستند رسمی در مورد ایجاد ماژول های Nuxt استفاده شد.

اما امروز، راهنمای نویسنده Muxt Module وجود دارد که می‌توانید اینجا را بررسی کنید

برای کسانی از شما که از Nuxt 2 می آیند، سازگاری اطلاعاتی واقعاً خوبی وجود دارد

Nuxt 3 دارای یک لایه اصلی سازگاری به عقب برای ماژول های Nuxt 2 با استفاده از بسته بندی خودکار @nuxt/kit است. اما معمولاً مراحلی برای سازگار کردن ماژول‌ها با Nuxt 3 وجود دارد و گاهی اوقات استفاده از Nuxt Bridge برای سازگاری با نسخه متقابل مورد نیاز است.

در مورد خود ماژول ها، در واقع تعداد زیادی از آنها وجود دارد!

صفحه رسمی را اینجا ببینید

مطالب مربوط به ایجاد یک ماژول Nuxt

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

اولین آنها ضبط سخنرانی من در Vue.js Global Summit در مورد ساخت ماژول ها برای Nuxt 3 است که می توانید در زیر مشاهده کنید:

https://www.youtube.com/watch?v=6jJ6Gssf0bI

اساساً شما را در فرآیند ساخت یک ماژول Nuxt برای ngrok (ابزاری که به شما امکان می‌دهد به برنامه محلی میزبان خود از وب دسترسی داشته باشید) راهنمایی می‌کند. بسیار ساده اما در آن زمان هیچ محتوایی در مورد آن وجود نداشت، بنابراین چنین آموزش گام به گام واقعا مفید بود.

و در مرحله بعد، من صدای ضبط شده ای از صحبت های @lihbr در آخرین کنفرانس Vue.js Live دارم که با هم در آن شرکت کردیم. در اینجا می توانید ویدیو را بررسی کنید

در آن، لوسی شما را از طریق فرآیند مشابه ساخت ماژول ها راهنمایی می کند و نشان می دهد که چگونه می توانید به یک نگهدار عالی تبدیل شوید!

نگاهی عمیق تر به ساختار یک ماژول Nuxt

برای این نگاه عمیق تر، من از ماژول Medusa خود برای Nuxt استفاده خواهم کرد زیرا توضیح آن نسبتاً آسان است و چندین مفهوم را پوشش می دهد که می تواند هنگام ساخت ماژول برای شما مفید باشد. در زیر می توانید ساختار پوشه و فایل های ماژول را مشاهده کنید:

بیایید در مورد هر پوشه / فایل معنی دار در این مخزن صحبت کنیم.

.github

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

.stackblitz

این ایده اخیر من برای نگه داشتن قالب Stackblitz در مخزن ماژول است تا به روز نگه داشتن آن با تغییرات ماژول آسان تر باشد. اساساً شامل برنامه ساده Nuxt با ماژول پیاده‌سازی شده است. در README.md پیوندی به Stackblitz وجود دارد که مخزن را شبیه سازی می کند و پروژه را برای کشف سریع آغاز می کند.

docs

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

playground

این پوشه حاوی برنامه محلی Nuxt با پیوند مستقیم به فایل ماژول است. برای آزمایش و توسعه محلی عالی است. گاهی اوقات برای من سؤالاتی پیش می آید که تفاوت بین آنها چیست playground و .stackblitz. من توضیح می دهم که زمین بازی یک پروژه آزمایش محلی است در حالی که .stackblitz یک پروژه آزمایش از راه دور است (صرفاً به این دلیل که زمین بازی پیوندی به پروژه محلی دارد در حالی که stackblitz ماژول را از npm دانلود می کند)

src

شامل تمام کد منبع برای ماژول شما است. باید الف داشته باشد module.ts فایل با ساختار کم و بیش شبیه زیر:

import { defineNuxtModule, addPlugin, createResolver, addImportsDir, extendViteConfig, addTemplate } from '@nuxt/kit'
import { fileURLToPath } from 'url'
import { defu } from 'defu'
import { Config } from '@medusajs/medusa-js'

export type ModuleOptions = Config & { global?: boolean, server: boolean }

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'nuxt-medusa',
    configKey: 'medusa'
  },
  defaults: {
    baseUrl: 'http://localhost:9000',
    maxRetries: 3,
    global: true,
    server: false,
  },
  setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    if (options.global) addPlugin(resolver.resolve('./runtime/plugin'))

    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
    nuxt.options.build.transpile.push(runtimeDir)
    nuxt.options.build.transpile.push("@medusajs/medusa-js");
})

این module.ts فایل همچنین یک بسته بندی برای هر چیز دیگری است که ماژول شما می تواند در برنامه اصلی Nuxt قرار دهد مانند:

• قطعات وارد شده به صورت خودکار
• ترکیبات وارد شده به صورت خودکار
• ابزارهای سرور
• پلاگین ها
• CSS
• خیلی بیشتر!

در واقع چیزهای زیادی وجود دارد که می‌توانید در ماژول انجام دهید، بنابراین آن را مانند یک بسته‌بندی مفید برای عملکرد تهدید می‌کنید که کسی می‌تواند در بسیاری از موارد دوباره از آن استفاده کند.

test

این پوشه شامل تمامی فایل های مربوط به تست خودکار ماژول شما با استفاده از ابزارهایی مانند Vitest و Playwright می باشد. در اینجا می توانید موارد تست را بنویسید و پس از هر درخواست کشش / ادغام آنها را از CI اجرا کنید.

فایل های دیگر

و همچنین بسیاری از فایل های دیگر در اینجا وجود دارد که برای پیکربندی linters/pretiers/npm/git/etc استفاده می شود. من معمولا آنها را از یک ماژول به ماژول دیگر کپی/پیست می کنم و فقط آنها را با یک پروژه جدید تنظیم می کنم.

پاداش – ماژول هایی که من ایجاد کرده ام

به دلیل تجربه مثبتی که از استفاده از ماژول ها داشتم، می خواستم خودم یکی را بسازم و نگهداری کنم. و من آن را بسیار دوست داشتم که امروز، من یک نگهدارنده چهار ماژول Nuxt هستم:

• امنیت – یک ماژول امنیتی برای Nuxt بر اساس OWASP Top 10 و Helmet. بدون پیکربندی به شما امکان می دهد برنامه وب ایمن تری داشته باشید، اما با گزینه های قابل تنظیم نیز همراه است تا بتوانید آن را مطابق با نیازهای خود تنظیم کنید.

• Algolia – با استفاده از یک بسته واحد از عملکردهای مرتبط با Algolia مانند Algoliasearch، InstantSearch، Docsearch و Recommend استفاده کنید.

• Cloudinary – با استفاده از اجزای ساده و ترکیب‌بندی‌ها برای واکشی مستقیم تصاویر از Cloudinary، تصاویر بهینه‌سازی شده و عملکردی را برای وب مدرن ارائه دهید.

• Medusa – به راحتی از برنامه Nuxt خود به پلتفرم Medusa Headless Commerce خود متصل شوید.

بنابراین، همانطور که می بینید، من قبلاً تعداد کمی از آنها را ایجاد کرده ام. اگر هر یک از آنها را دوست دارید، در اضافه کردن یک شروع GitHub برای رشد ماژول تردید نکنید!