Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

Tplugin Kompose Berikutnya

Menyediakan API yang lebih bersih untuk mengaktifkan dan mengonfigurasi plugin untuk Next.js karena cara default Next.js menyarankan untuk mengaktifkan dan mengonfigurasi plugin dapat menjadi tidak jelas dan membingungkan ketika Anda memiliki banyak plugin.

Seringkali tidak jelas plugin mana yang diaktifkan atau konfigurasi mana yang menjadi milik plugin karena mereka bersarang dan berbagi satu objek konfigurasi. Ini juga dapat menyebabkan nilai konfigurasi yatim saat memperbarui atau menghapus plugin.

Sementara next-compose-plugins mencoba menghilangkan kasus ini dengan menyediakan API alternatif untuk mengaktifkan dan mengonfigurasi plugin di mana setiap plugin memiliki objek konfigurasi sendiri, itu juga menambahkan lebih banyak fitur seperti plugin dan konfigurasi spesifik fase.

Daftar isi

  • Instalasi
  • Penggunaan
    • withPlugins
    • Plugin opsional
    • Perpanjang file konfigurasi lain
  • Pengembang plugin
  • Contoh
  • Lihat juga
  • Lisensi

Instalasi 

 npm install --save next-compose-plugins


Membangun Dasbor atau Admin UI ? Atau apakah Anda ingin melihat contoh penggunaan next-compose-plugins dalam proyek dunia nyata? Lihat dasbor materi NextJS oleh mitra kami kreatif Tim untuk memulai.




Penggunaan 

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

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

plugins

Lihat contoh untuk lebih banyak kasus penggunaan.

Ini adalah array yang berisi semua plugin dan konfigurasinya. Jika plugin tidak memerlukan konfigurasi tambahan, Anda dapat menambahkan plugin yang diimpor. Jika memang perlu konfigurasi atau Anda hanya ingin menjalankannya dalam fase tertentu, Anda dapat menentukan array:

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

plugin: function

Plugin yang diimpor. Lihat bagian plugin opsional jika Anda hanya ingin memerlukan plugin saat benar -benar digunakan. 

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

module . exports = withPlugins ( [
  [ sass ] ,
] ) ;
configuration?: object

Konfigurasi untuk plugin.

Anda juga dapat menimpa kunci konfigurasi tertentu untuk suatu fase: 

 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]' ,
      } ,
    } ,
  } ] ,
] ) ;

Ini akan menimpa cssLoaderOptions dengan localIdentName yang ditentukan, tetapi hanya selama pembangunan produksi. Anda juga dapat menggabungkan beberapa fase ( [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} ) atau mengecualikan fase ( ['!' + PHASE_PRODUCTION_BUILD]: {} yang akan menimpa konfigurasi dalam semua fase kecuali PRODUCTION_BUILD ). Anda dapat menggunakan semua fase selanjutnya.js menyediakan.

phases?: array

Jika plugin hanya diterapkan dalam fase tertentu, Anda dapat menentukannya di sini. Anda dapat menggunakan semua fase selanjutnya.js menyediakan. 

 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 ] ] ,
] ) ;

Anda juga dapat meniadakan fase dengan terkemuka ! : 

 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 ] ] ,
] ) ;

Ini akan menerapkan plugin di semua fase kecuali PHASE_DEVELOPMENT_SERVER .

nextConfiguration

Konfigurasi langsung Next.js dapat terjadi di sini, misalnya: {distDir: 'dist'} .

Anda juga dapat menyesuaikan konfigurasi webpack selanjutnya.js di dalam objek ini. 

 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 ) ;

Fase juga didukung dalam objek nextConfiguration dan memiliki sintaks yang sama seperti pada objek configuration plugin. 

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

Plugin opsional

Jika plugin hanya dimuat saat digunakan, Anda dapat menggunakan fungsi helper optional . Ini terutama berguna jika plugin hanya dalam devDependencies dan karenanya mungkin tidak tersedia di semua fase. Jika Anda tidak menggunakan penolong optional dalam kasus ini, Anda akan mendapatkan kesalahan. 

 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 ] ] ,
] ) ;

Perpanjang file konfigurasi lain

Terkadang masuk akal untuk membagi file next.config.js menjadi beberapa file, misalnya ketika Anda memiliki lebih dari satu proyek Next.js dalam satu repositori. Anda kemudian dapat menentukan konfigurasi dasar dalam satu file dan menambahkan plugin/pengaturan proyek spesifik dalam file konfigurasi atau proyek.

Untuk dengan mudah mengarsipkan ini, Anda dapat menggunakan helper extend di file next.config.js dari proyek Anda. 

 // 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 ,
    } ,
  } ] ,
] ) ;

Pengembang plugin

Plugin ini memiliki beberapa fungsi tambahan yang dapat Anda gunakan sebagai pengembang plugin. Namun, jika Anda menggunakannya, Anda harus menyebutkan di suatu tempat di ReadMe atau menginstal instruksi yang perlu next-compose-plugins untuk memiliki semua fitur yang tersedia dan karenanya tidak akan membingungkan pengguna Anda jika ada sesuatu yang tidak berfungsi seperti yang dijelaskan di luar kotak karena mereka belum menggunakan plugin ini.

Fase

Anda dapat menentukan fase mana plugin Anda harus dieksekusi dalam objek yang Anda kembalikan: 

 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 ;
    } ,
  } ;
} ;

Fase -fase ini ditangani sebagai konfigurasi default dan pengguna dapat menimpa fase dalam file next.config.js jika mereka mau. Lihat Konfigurasi Fase untuk semua opsi yang tersedia.

Informasi tambahan

Ketika sebuah plugin dimuat dengan next-compose-plugins , beberapa informasi tambahan yang dapat Anda andalkan tersedia. Itu akan dilewati sebagai argumen kedua untuk fungsi plugin Anda: 

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

Saat ini, ini berisi nilai -nilai ini: 

 {
  // 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 ,
}

Contoh

Contoh Dunia Nyata

Lihat dasbor materi NextJS oleh mitra kami Creative Tim untuk melihat bagaimana next-compose-plugins digunakan dalam aplikasi dunia nyata.

Contoh Dasar 

 // 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 ) ;

Contoh lanjutan 

 // 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 ) ;

Perbandingan

Sebagai perbandingan, akan terlihat seperti ini tanpa plugin ini di mana tidak benar -benar jelas konfigurasi mana yang termasuk dari plugin mana dan apa saja plugin yang diaktifkan. Banyak fitur yang disebutkan di atas juga tidak akan mungkin atau mengharuskan Anda memiliki lebih banyak kode khusus di file konfigurasi Anda. 

 // 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' ] ,
    }
} ) ) ) ) ;

Lihat juga

Lihat Vercel/Tplugin Berikutnya untuk daftar plugin resmi dan komunitas untuk Next.js.

Lisensi

MIT © Cyril Wanner

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua