تنزيل next compose plugins - تنزيل رمز مصدر next compose plugins

plugins-plugins التالية

يوفر واجهة برمجة تطبيقات أنظف لتمكين وتكوين المكونات الإضافية لـ NEXT.JS لأن الطريقة الافتراضية Next.js تقترح تمكين وتكوين الإضافات يمكن أن تكون غير واضحة ومربكة عندما يكون لديك العديد من الإضافات.

غالبًا ما يكون من غير الواضح أي المكونات الإضافية التي يتم تمكينها أو التكوين الذي ينتمي إلى المكون الإضافي لأنه متداخل ويشارك كائن تكوين واحد. يمكن أن يؤدي ذلك أيضًا إلى قيم التكوين اليتيم عند تحديث المكونات الإضافية أو إزالة.

بينما يحاول next-compose-plugins إلغاء هذه الحالة من خلال توفير واجهة برمجة تطبيقات بديلة لتمكين وتكوين الإضافات حيث يكون لكل مكون إضافي كائن تكوين خاص به ، فإنه يضيف أيضًا المزيد من الميزات مثل الإضافات والتكوين المحددة للمرحلة.

جدول المحتويات

تثبيت
الاستخدام
- withPlugins
- الإضافات الاختيارية
- تمديد ملف تكوين آخر
مطورو البرنامج المساعد
أمثلة
انظر أيضا
رخصة

تثبيت

 npm install --save next-compose-plugins

بناء لوحة معلومات أو واجهة مستخدم المسؤول ؟ أو هل تريد أن ترى مثالًا للاستخدام على next-compose-plugins في مشروع العالم الحقيقي؟ تحقق من لوحة معلومات المواد NextJS من قبل شركائنا Creative Tim لتبدأ.

الاستخدام

 // next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;

module . exports = withPlugins ( [ ... plugins ] , nextConfiguration ) ;

`plugins`

انظر الأمثلة لمزيد من حالات الاستخدام.

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

`[plugin: function, configuration?: object, phases?: array]`

`plugin: function`

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

 const withPlugins = require ( 'next-compose-plugins' ) ;
const sass = require ( '@zeit/next-sass' ) ;

module . exports = withPlugins ( [
  [ sass ] ,
] ) ;

`configuration?: object`

تكوين المكون الإضافي.

يمكنك أيضًا الكتابة فوق مفاتيح تكوين محددة للمرحلة:

 const withPlugins = require ( 'next-compose-plugins' ) ;
const { PHASE_PRODUCTION_BUILD } = require ( 'next/constants' ) ;
const sass = require ( '@zeit/next-sass' ) ;

module . exports = withPlugins ( [
  [ sass , {
    cssModules : true ,
    cssLoaderOptions : {
      localIdentName : '[path]___[local]___[hash:base64:5]' ,
    } ,
    [ PHASE_PRODUCTION_BUILD ] : {
      cssLoaderOptions : {
        localIdentName : '[hash:base64:8]' ,
      } ,
    } ,
  } ] ,
] ) ;

سيؤدي ذلك إلى الكتابة فوق cssLoaderOptions باستخدام اسم localIdentName الجديد المحدد ، ولكن فقط أثناء بناء الإنتاج. يمكنك أيضًا الجمع بين مراحل متعددة ( [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} PRODUCTION_BUILD أو استبعاد مرحلة ( ['!' + PHASE_PRODUCTION_BUILD]: {} يمكنك استخدام جميع المراحل Next.js يوفرها.

`phases?: array`

إذا كان يجب تطبيق المكون الإضافي فقط في مراحل محددة ، فيمكنك تحديدها هنا. يمكنك استخدام جميع المراحل Next.js يوفرها.

 const withPlugins = require ( 'next-compose-plugins' ) ;
const { PHASE_DEVELOPMENT_SERVER , PHASE_PRODUCTION_BUILD } = require ( 'next/constants' ) ;
const sass = require ( '@zeit/next-sass' ) ;

module . exports = withPlugins ( [
  [ sass , {
    cssModules : true ,
    cssLoaderOptions : {
      localIdentName : '[path]___[local]___[hash:base64:5]' ,
    } ,
  } , [ PHASE_DEVELOPMENT_SERVER , PHASE_PRODUCTION_BUILD ] ] ,
] ) ;

يمكنك أيضا نفي المراحل مع قيادة ! :

 const withPlugins = require ( 'next-compose-plugins' ) ;
const { PHASE_DEVELOPMENT_SERVER , PHASE_PRODUCTION_BUILD } = require ( 'next/constants' ) ;
const sass = require ( '@zeit/next-sass' ) ;

module . exports = withPlugins ( [
  [ sass , {
    cssModules : true ,
    cssLoaderOptions : {
      localIdentName : '[path]___[local]___[hash:base64:5]' ,
    } ,
  } , [ '!' , PHASE_DEVELOPMENT_SERVER ] ] ,
] ) ;

سيطبق هذا المكون الإضافي في جميع المراحل باستثناء PHASE_DEVELOPMENT_SERVER .

`nextConfiguration`

يمكن أن يذهب أي تكوين Direct Next.js هنا ، على سبيل المثال: {distDir: 'dist'} .

يمكنك أيضًا تخصيص تكوين WebPack لـ next.js داخل هذا الكائن.

 const withPlugins = require ( 'next-compose-plugins' ) ;

const nextConfig = {
  distDir : 'build' ,
  webpack : ( config , options ) => {

    // modify the `config` here

    return config ;
  } ,
} ;

module . exports = withPlugins ( [
  // add plugins here..
] , nextConfig ) ;

يتم دعم المراحل أيضًا داخل كائن nextConfiguration ولديها نفس بناء الجملة كما في كائنات configuration المكون الإضافي.

 const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;
const nextConfig = {
  distDir : 'build' ,
  [ '!' + PHASE_DEVELOPMENT_SERVER ] : {
    assetPrefix : 'https://my.cdn.com' ,
  } ,
} ;

الإضافات الاختيارية

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

 const { withPlugins , optional } = require ( 'next-compose-plugins' ) ;
const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;

module . exports = withPlugins ( [
  [ optional ( ( ) => require ( '@zeit/next-sass' ) ) , { /* optional configuration */ } , [ PHASE_DEVELOPMENT_SERVER ] ] ,
] ) ;

تمديد ملف تكوين آخر

من المنطقي أحيانًا تقسيم ملف next.config.js إلى ملفات متعددة ، على سبيل المثال عندما يكون لديك أكثر من مجرد مشروع واحد في مستودع واحد. يمكنك بعد ذلك تحديد التكوين الأساسي في ملف واحد وإضافة مكونات/إعدادات محددة للمشروع في ملف التكوين أو المشروع.

لأرشفة هذا بسهولة ، يمكنك استخدام المساعد extend في ملف next.config.js لمشروعك.

 // next.config.js
const { withPlugins , extend } = require ( 'next-compose-plugins' ) ;
const baseConfig = require ( './base.next.config.js' ) ;

const nextConfig = { /* ... */ } ;

module . exports = extend ( baseConfig ) . withPlugins ( [
  [ sass , {
    cssModules : true ,
  } ] ,
] , nextConfig ) ;

 // base.next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;

module . exports = withPlugins ( [
  [ typescript , {
    typescriptLoaderOptions : {
      transpileOnly : false ,
    } ,
  } ] ,
] ) ;

مطورو البرنامج المساعد

يحتوي هذا البرنامج المساعد على بعض الوظائف الإضافية التي يمكنك استخدامها كمطور مكون إضافي. ومع ذلك ، إذا كنت تستخدمها ، فيجب أن تذكر في مكان ما في ReadMe أو تثبيت تعليمات أنه يحتاج next-compose-plugins للحصول على جميع الميزات المتاحة ، وبالتالي لن يخلط بين المستخدمين إذا كان هناك شيء لا يعمل كما هو موضح خارج الصندوق لأنهم لا يستخدمون هذا المكون الإضافي Compose حتى الآن.

مراحل

يمكنك تحديد المراحل التي يجب تنفيذها في المراحل المكوّن الإضافي داخل الكائن الذي ترجعه:

 const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;

module . exports = ( nextConfig = { } ) => {
  return Object . assign ( { } , nextConfig , {
    // define in which phases this plugin should get applied.
    // you can also use multiple phases or negate them.
    // however, users can still overwrite them in their configuration if they really want to.
    phases : [ PHASE_DEVELOPMENT_SERVER ] ,

    webpack ( config , options ) {
      // do something here which only gets applied during development server phase

      if ( typeof nextConfig . webpack === 'function' ) {
        return nextConfig . webpack ( config , options ) ;
      }

      return config ;
    } ,
  } ;
} ;

تتم معالجة هذه المراحل كتكوين افتراضي ويمكن للمستخدمين الكتابة فوق المراحل في ملف next.config.js إذا كانوا يريدون ذلك. انظر تكوين المراحل لجميع الخيارات المتاحة.

معلومات إضافية

عندما يتم تحميل مكون إضافي باستخدام next-compose-plugins ، تتوفر بعض المعلومات الإضافية التي يمكنك الاعتماد عليها. يتم تمريرها كوسيطة ثانية لوظيفة البرنامج المساعد الخاص بك:

 module . exports = ( nextConfig = { } , nextComposePlugins = { } ) => {
  console . log ( nextComposePlugins ) ;
} ;

حاليا ، أنه يحتوي على هذه القيم:

 {
  // this is always true when next-compose-plugins is used
  // so you can use this as a check when your plugin depends on it
  nextComposePlugins : boolean ,

  // the current phase which gets applied
  phase : string ,
}

أمثلة

مثال على العالم الحقيقي

تحقق من لوحة معلومات مواد NextJS من قبل شركائنا الإبداعيين تيم لمعرفة كيف تم استخدام next-compose-plugins في تطبيق العالم الحقيقي.

مثال أساسي

 // next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
const images = require ( 'next-images' ) ;
const sass = require ( '@zeit/next-sass' ) ;
const typescript = require ( '@zeit/next-typescript' ) ;

// next.js configuration
const nextConfig = {
  useFileSystemPublicRoutes : false ,
  distDir : 'build' ,
} ;

module . exports = withPlugins ( [

  // add a plugin with specific configuration
  [ sass , {
    cssModules : true ,
    cssLoaderOptions : {
      localIdentName : '[local]___[hash:base64:5]' ,
    } ,
  } ] ,

  // add a plugin without a configuration
  images ,

  // another plugin with a configuration
  [ typescript , {
    typescriptLoaderOptions : {
      transpileOnly : false ,
    } ,
  } ] ,

] , nextConfig ) ;

مثال متقدم

 // next.config.js
const { withPlugins , optional } = require ( 'next-compose-plugins' ) ;
const images = require ( 'next-images' ) ;
const sass = require ( '@zeit/next-sass' ) ;
const typescript = require ( '@zeit/next-typescript' ) ;

const {
  PHASE_PRODUCTION_BUILD ,
  PHASE_PRODUCTION_SERVER ,
  PHASE_DEVELOPMENT_SERVER ,
  PHASE_EXPORT ,
} = require ( 'next/constants' ) ;

// next.js configuration
const nextConfig = {
  useFileSystemPublicRoutes : false ,
  distDir : 'build' ,
} ;

module . exports = withPlugins ( [

  // add a plugin with specific configuration
  [ sass , {
    cssModules : true ,
    cssLoaderOptions : {
      localIdentName : '[local]___[hash:base64:5]' ,
    } ,
    [ PHASE_PRODUCTION_BUILD + PHASE_EXPORT ] : {
      cssLoaderOptions : {
        localIdentName : '[hash:base64:8]' ,
      } ,
    } ,
  } ] ,

  // add a plugin without a configuration
  images ,

  // another plugin with a configuration (applied in all phases except development server)
  [ typescript , {
    typescriptLoaderOptions : {
      transpileOnly : false ,
    } ,
  } , [ '!' , PHASE_DEVELOPMENT_SERVER ] ] ,

  // load and apply a plugin only during development server phase
  [ optional ( ( ) => require ( '@some-internal/dev-log' ) ) , [ PHASE_DEVELOPMENT_SERVER ] ] ,

] , nextConfig ) ;

مقارنة

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

 // next.config.js
const withSass = require ( '@zeit/next-sass' ) ;
const withTypescript = require ( '@zeit/next-typescript' ) ;
const withImages = require ( 'next-images' ) ;
const withOffline = require ( 'next-offline' ) ;

module . exports = withSass ( withOffline ( withTypescript ( withImages ( {
    {
        cssModules : true ,
        cssLoaderOptions : {
            importLoaders : 1 ,
            localIdentName : '[local]___[hash:base64:5]' ,
        } ,
        typescriptLoaderOptions : {
            transpileOnly : false ,
        } ,
        useFileSystemPublicRoutes : false ,
        distDir : 'build' ,
        workerName : 'sw.js' ,
        imageTypes : [ 'jpg' , 'png' ] ,
    }
} ) ) ) ) ;