next compose plugins Download - next compose plugins ซอร์สโค้ด

ปัสสาวะต่อไป

จัดเตรียม API ที่สะอาดกว่าสำหรับการเปิดใช้งานและกำหนดค่าปลั๊กอินสำหรับ next.js เนื่องจากวิธีเริ่มต้น next.js แนะนำให้เปิดใช้งานและกำหนดค่าปลั๊กอินอาจไม่ชัดเจนและสับสนเมื่อคุณมีปลั๊กอินจำนวนมาก

มันมักจะไม่ชัดเจนว่าปลั๊กอินใดที่เปิดใช้งานหรือการกำหนดค่าใดที่เป็นของปลั๊กอินเพราะมันซ้อนกันและแชร์วัตถุการกำหนดค่าหนึ่งวัตถุ นอกจากนี้ยังสามารถนำไปสู่ค่าการกำหนดค่าเด็กกำพร้าเมื่ออัปเดตหรือถอดปลั๊กอิน

ในขณะที่ next-compose-plugins พยายามที่จะกำจัดกรณีนี้โดยการจัดหา API ทางเลือกสำหรับการเปิดใช้งานและกำหนดค่าปลั๊กอินที่ปลั๊กอินแต่ละตัวมีวัตถุการกำหนดค่าของตัวเอง แต่ยังเพิ่มคุณสมบัติเพิ่มเติมเช่นปลั๊กอินเฉพาะเฟสและการกำหนดค่า

สารบัญ

การติดตั้ง
การใช้งาน
- withPlugins
- ปลั๊กอินเสริม
- ขยายไฟล์กำหนดค่าอื่น
นักพัฒนาปลั๊กอิน
ตัวอย่าง
ดูด้วย
ใบอนุญาต

การติดตั้ง

 npm install --save next-compose-plugins

การสร้าง แดชบอร์ด หรือ ผู้ดูแลระบบ UI ? หรือคุณต้องการดู ตัวอย่างการใช้งาน ของ next-compose-plugins ในโครงการโลกแห่งความเป็นจริงหรือไม่? ตรวจสอบแผงควบคุมวัสดุ NextJS โดยพันธมิตรของเราสร้างสรรค์ทิมเพื่อให้คุณเริ่มต้น

การใช้งาน

 // 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]: {} ) หรือยกเว้นเฟส ( ['!' + PHASE_PRODUCTION_BUILD]: {} 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`

การกำหนดค่าโดยตรง 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 ออกเป็นหลายไฟล์ตัวอย่างเช่นเมื่อคุณมีมากกว่าหนึ่งโครงการถัดไป JS ในพื้นที่เก็บข้อมูลเดียว จากนั้นคุณสามารถกำหนดค่าฐานในไฟล์เดียวและเพิ่มปลั๊กอิน/การตั้งค่าเฉพาะของโครงการในไฟล์ config หรือโครงการ

ในการเก็บถาวรสิ่งนี้ได้อย่างง่ายดายคุณสามารถใช้ extend Helper ในไฟล์ 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 เพื่อให้มีคุณสมบัติทั้งหมดที่มีอยู่ดังนั้นจึงไม่ทำให้ผู้ใช้ของคุณสับสนหากมีบางอย่างไม่ทำงานตามที่อธิบายไว้นอกกรอบเพราะพวกเขายังไม่ได้ใช้ปลั๊กอิน

ขั้นตอน

คุณสามารถระบุระยะที่ปลั๊กอินของคุณควรดำเนินการภายในวัตถุที่คุณส่งคืน:

 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 โดยพันธมิตรของเรา Creative Tim เพื่อดูว่าใช้งาน 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' ] ,
    }
} ) ) ) ) ;