Storybook 7.0 + React.js + TailwindCSS + ماژول‌های CSS + راه‌اندازی Typescript که #$%& کار می‌کند

به روز رسانی: هنگام نوشتن این مقاله، این مقاله را پیدا کردم، که تصادفاً در همان زمان به روز شد.

<rant>

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

TailwindCSS در مرحله ای است که از قبل شتاب گرفته است. حتی شرکت های بزرگ نیز در حال بررسی آن هستند. عملاً هر توسعه دهنده فرانت اند قبلاً با آن کار کرده است.

و ماژول های CSS بیش از 6 سال است که فکر می کنم وجود دارد. و حتی اگر در اصطلاح جاوا اسکریپت یک دایناسور است، یک میراث است، اما هنوز نمرده است و هنوز برای بسیاری از جمله moi انتخاب برتر است.

حتی قرار نیست در مورد Typescript و React چیزی بگویم. اگر امروز از TS استفاده نمی کنید یا هرگز با TS کار نکرده اید – غیرقابل استفاده هستید. و React یک استاندارد است.

مطمئناً باید در جایی مقاله ای در مورد نحوه تنظیم درست همه اینها وجود داشته باشد. مسلما؟!

</rant>

خوب، پس از 4 ساعت جستجو در گوگل و آزمون و خطا، بالاخره توانستم این تنظیمات پشته فناوری “OH SO UNUSUAL” را کرک کنم. در اینجا مخزن است، و اجازه دهید دو نکته را برجسته کنم.

نکته 1: سازنده و فریمورک Webpack 5

Webpack 4 هنوز گزینه پیش فرض برای Storybook است، اما Storybook قبلاً پشتیبانی از Webpack 5 را منتشر کرده است، بنابراین دلیلی نمی بینم که چرا ما به نسخه 4 پایبند باشیم. نکته مهم در اینجا این است که از آنجایی که ما در حال به روز رسانی هستیم core دارایی، ما نیز باید به روز رسانی framework

// main.ts
export default {
  framework: '@storybook/react-webpack5',
  core: {
    builder: '@storybook/builder-webpack5',
  },
}

نکته 2: قوانین پیش‌فرض Webpack را بازنویسی نکنید، بلکه در عوض موارد بیشتری اضافه کنید

این (متاسفانه!) به هر دلیلی به یک عادت تبدیل شد، که اگر نیاز به اضافه کردن یک لودر سفارشی داشته باشم، قانون پیش فرض را از آرایه حذف می کنم و دوباره آن را ایجاد می کنم. ما نباید این کار را انجام دهیم، زیرا پیکربندی Storybook را طوری به هم می زند که باز کردن آن سخت می شود.

زیرا باید یک بارگذار PostCSS به خود اضافه کنیم .css فایل‌ها، سعی نکنید قانون css را با تمام فایل‌ها دوباره ایجاد کنید css-loader و style-loader و غیره، اما فقط آن قانون اضافی را به انتهای آن آرایه فشار دهید و کار را با آن تمام کنید.

// main.ts
export default {
  ...
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: { tailwindcss: {}, autoprefixer: {} },
            },
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
  ...
}

این تقریباً تمام چیزی است که می خواستم بگویم. درک این دو نکته مدتی طول کشید، پس امیدوارم که پست من را در اولین ساعت جستجو پیدا کرده باشید. 😅