چگونه یک چارچوب جدید به Sitecore JSS کمک کنیم

ek3nk4r 2023-07-15

0 42 خواندن این مطلب 3 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

سلام 👋! من تقریباً مطمئن هستم که برخی از توسعه دهندگان هستند که مایلند یک چارچوب جدید به JSS ارائه دهند، اگرچه در نگاه اول کمی پیچیده تر به نظر می رسد.
خارج از جعبه JSS ارائه می دهد create-sitecore-jss بسته npm اطلاعات بیشتر در مورد نحوه داربست کردن یک برنامه نمونه جدید را در اسناد مشاهده کنید.

برای ایجاد نمونه‌ها، JSS از رویکرد مقداردهی اولیه استفاده می‌کند. اجازه دهید قبل از حرکت به جلو، برخی از اصطلاحات اصلی را برجسته کنم.

آغازگر – فرآیند مدیریت ایجاد الگوی انتخاب شده.

قالب – نمونه با توکن های ejs پر شده است. قالب ها به انواع زیر تقسیم می شوند:

پایه – شامل تمام فایل ها، ویژگی های پایه برای برنامه (به عنوان مثال nextjs).
افزودنی – ویژگی های اضافی را برای قالب پایه فراهم می کند. چندین قالب افزودنی را می توان در پایه اعمال کرد (به عنوان مثال nextjs-styleguide).

من مثال اضافه کردن یک چارچوب Nuxt به create-sitecore-jss را توضیح خواهم داد. بیایید در نظر بگیریم که Nuxt مبتنی بر راهنما خواهد بود.

فهرست مطالب

1. یک مقدار دهی اولیه ایجاد کنید✅

ابتدا باید یک نقطه ورود اولیه ساز اضافه کنیم.
من یک پوشه جدید در زیر ایجاد می کنم src/initializers/nuxt. بیایید اسکریپت های مورد نیاز را اضافه کنیم:

index.ts

import path from 'path';
import inquirer from 'inquirer';
import { prompts, NuxtAnswer } from './prompts';
import { Initializer, transform } from '../../common';
import { NuxtArgs } from './args';

export default class ReactNativeInitializer implements Initializer {
  // Required to point that template is base
  get isBase() {
    return true;
  }

  async init(args: NuxtArgs) {
    // Ask for required parameters e.g. appName, hostName 
    const answers = await inquirer.prompt<NuxtAnswer>(prompts, args);

    // Merge framework specific and base scaffolding related answers
    const mergedArgs = {
      ...args,
      ...answers,
    };

    const templatePath = path.resolve(__dirname, '../../templates/nuxt');

    // Executes scaffolding process
    await transform(templatePath, mergedArgs);

    const response = {
      appName: answers.appName,
    };

    // Return response to be accepted by next add-ons
    return response;
  }
}

args.ts

این یک نوع مقدار را تعریف می کند که ما آن را در مقدار اولیه می پذیریم و به افزونه های بعدی منتقل می کنیم. ما آرگومان هایی داریم که به صورت پیش فرض به مقداردهی اولیه ارسال می شوند. جدید اضافه کردم شهر تیمی ملکی که در زیر درخواست خواهیم کرد.

import { ClientAppArgs } from '../../common';
import { NuxtAnswer } from './prompts';

type NuxtCustomArgs = {
  teamcity: boolean;
};

export type NuxtArgs = ClientAppArgs & Partial<NuxtAnswer & NuxtCustomArgs>;

prompts.ts

سوالاتی را که می خواهیم از مشتری بپرسیم را مشخص می کند. ما اعلان‌های پیش‌فرض داریم که می‌توانید با افزودن یک سؤال دیگر آن‌ها را گسترش دهید.

import {
  ClientAppAnswer,
  clientAppPrompts,
  StyleguideAnswer,
  styleguidePrompts,
} from '../../common';

const customPrompts = [
  {
    type: 'confirm',
    name: 'teamcity',
    message: 'Do you want to apply Teamcity integration?',
    default: false,
  },
];

export type NuxtAnswer = ClientAppAnswer & StyleguideAnswer;

export const prompts = [...clientAppPrompts, ...styleguidePrompts, ...customPrompts];

2. یک قالب جدید ایجاد کنید✅

من یک پوشه جدید در زیر ایجاد می کنم src/templates/nuxt. در اینجا باید تمام فایل‌های مورد نیازی را که می‌خواهید مشارکت کنید اضافه کنید. در مورد Nuxt می تواند برنامه نمونه Nuxt باشد اما با JSS گسترش یابد.

3. معرفی جدید sitecore-jss-nuxt پکیج npm✅

من یک بسته جدید npm در مخزن زیر ایجاد می کنم بسته ها/sitecore-jss-nuxt به منظور قرار دادن تمام اجزاء، تقویت کننده ها، ابزارهای خاص Nuxt. ما باید به این بسته در یک برنامه نمونه اشاره کنیم. بخشی از عملکرد را می توان از sitecore-jss دوباره صادر کرد، مانند ابزارهای واکشی داده ها، مدل ها و غیره. می توانید نگاهی به sitecore-jss-react به عنوان مثال.

4. بیایید آن را آزمایش کنیم ✅

در اجرای CLI

create-sitecore-jss

در اینجا، Nuxt در یک لیست وجود دارد
create-sitecore-jss

و در اینجا آخرین سؤالی است که می‌خواهیم در مورد ادغام Teamcity بپرسیم

سوال تیمی

برنامه جدید با موفقیت داربست شد!⭐

نتیجه create-sitecore-jss

به پایان برسانید

این همه برای این مقاله است. دفعه بعد در مورد نحوه مشارکت یک افزونه جدید برای قالب پایه توضیح خواهم داد. با تشکر از توجه شما! می بینمت لینکدین اینستاگرام GitHub 👋