next compose plugins Download - next compose plugins Code Source Download

Plugins à compose

Fournit une API plus propre pour l'activation et la configuration des plugins pour next.js, car la façon par défaut de next.js suggère d'activer et de configurer les plugins peut être peu clair et déroutant lorsque vous avez de nombreux plugins.

On ne sait souvent pas quels plugins sont activés ou quelle configuration appartient à quel plugin car ils sont imbriqués et partagent un objet de configuration. Cela peut également conduire à des valeurs de configuration orphelines lors de la mise à jour ou de la suppression des plugins.

Alors que next-compose-plugins essaie d'éliminer ce cas en fournissant une API alternative pour l'activation et la configuration des plugins où chaque plugin a son propre objet de configuration, il ajoute également plus de fonctionnalités telles que les plugins spécifiques à la phase et la configuration.

Table des matières

Installation
Usage
- withPlugins
- Plugins en option
- Étendre un autre fichier de configuration
Développeurs de plugins
Exemples
Voir aussi
Licence

Installation

 npm install --save next-compose-plugins

Construire un tableau de bord ou une interface utilisateur d'administration ? Ou voulez-vous voir un exemple d'utilisation de next-compose-plugins dans un projet du monde réel? Découvrez le tableau de bord matériel NextJS par nos partenaires créatif Tim pour vous lancer.

Usage

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

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

`plugins`

Voir les exemples pour plus de cas d'utilisation.

Il s'agit d'un tableau contenant tous les plugins et leur configuration. Si un plugin n'a pas besoin de configuration supplémentaire, vous pouvez simplement ajouter le plugin importé. S'il a besoin de configuration ou si vous souhaitez l'exécuter uniquement dans une phase spécifique, vous pouvez spécifier un tableau:

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

`plugin: function`

Plugin importé. Voir la section Plugins en option si vous voulez avoir besoin d'un plugin lorsqu'il est vraiment utilisé.

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

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

`configuration?: object`

Configuration du plugin.

Vous pouvez également écraser des touches de configuration spécifiques pour une phase:

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

Cela écrasera les cssLoaderOptions avec le nouveau localIdentName spécifié, mais uniquement pendant la construction de production. Vous pouvez également combiner plusieurs phases ( [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} ) ou exclure une phase ( ['!' + PHASE_PRODUCTION_BUILD]: {} qui écrasera la configuration dans toutes les phases sauf PRODUCTION_BUILD ). Vous pouvez utiliser toutes les phases Next.js fournit.

`phases?: array`

Si le plugin ne doit être appliqué que dans des phases spécifiques, vous pouvez les spécifier ici. Vous pouvez utiliser toutes les phases Next.js fournit.

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

Vous pouvez également annuler les phases avec une direction ! :

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

Cela appliquera le plugin dans toutes les phases sauf PHASE_DEVELOPMENT_SERVER .

`nextConfiguration`

Toute configuration directe NEXT.js peut aller ici, par exemple: {distDir: 'dist'} .

Vous pouvez également personnaliser la configuration Webpack de Next.js dans cet objet.

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

Les phases sont également prises en charge dans l'objet nextConfiguration et ont la même syntaxe que dans les objets configuration du plugin.

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

Plugins en option

Si un plugin ne doit être chargé que lorsqu'il est utilisé, vous pouvez utiliser la fonction d'assistance optional . Cela peut être particulièrement utile si le plugin est uniquement dans les devDependencies et peut donc ne pas être disponible dans toutes les phases. Si vous n'utilisez pas l'assistance optional dans ce cas, vous obtiendrez une erreur.

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

Étendre un autre fichier de configuration

Il est parfois logique de diviser un fichier next.config.js en plusieurs fichiers, par exemple lorsque vous avez plus d'un seul projet Next.js dans un référentiel. Vous pouvez ensuite définir la configuration de base dans un seul fichier et ajouter des plugins / paramètres spécifiques du projet dans le fichier de configuration ou le projet.

Pour archiver facilement cela, vous pouvez utiliser l'assistance extend dans le fichier next.config.js de votre projet.

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

Développeurs de plugins

Ce plugin a quelques fonctionnalités supplémentaires que vous pouvez utiliser en tant que développeur de plugin. Cependant, si vous les utilisez, vous devez mentionner quelque part dans vos instructions ReadMe ou installer qu'il a besoin next-compose-plugins pour avoir toutes les fonctionnalités disponibles et donc cela ne confondra pas à vos utilisateurs si quelque chose ne fonctionne pas comme décrit à l'attente car ils n'utilisent pas encore ce plugin Compose.

Phases

Vous pouvez spécifier quelles phases votre plugin doit être exécuté dans l'objet que vous retournez:

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

Ces phases sont gérées sous forme de configuration par défaut et les utilisateurs peuvent écraser les phases dans leur fichier next.config.js s'ils le souhaitent. Voir la configuration des phases pour toutes les options disponibles.

Informations Complémentaires

Lorsqu'un plugin est chargé de next-compose-plugins , certaines informations supplémentaires sur lesquelles vous pouvez dépendre sont disponibles. Il est passé comme deuxième argument à votre fonction de plugin:

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

Actuellement, il contient ces valeurs:

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

Exemples

Exemple du monde réel

Consultez le tableau de bord matériel NextJS par nos partenaires créatifs Tim pour voir comment next-compose-plugins ont été utilisés dans une application du monde réel.

Exemple de base

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

Exemple avancé

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

Comparaison

En comparaison, cela ressemblerait à ceci sans ce plugin où il n'est pas vraiment clair à quelle configuration appartient à quel plugin et quels sont tous les plugins activés. De nombreuses fonctionnalités mentionnées ci-dessus ne seront pas non plus possibles ou vous obligeront à avoir beaucoup plus de code personnalisé dans votre fichier de configuration.

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