next compose plugins
v2.2.1
Proporciona una API más limpia para habilitar y configurar complementos para Next.js porque la forma predeterminada Next.js sugiere habilitar y configurar complementos puede quedarse sin claro y confuso cuando tiene muchos complementos.
A menudo no está claro qué complementos están habilitados o qué configuración pertenece a qué complemento se anidan y comparten un objeto de configuración. Esto también puede conducir a valores de configuración huérfanos al actualizar o eliminar complementos.
Mientras que next-compose-plugins intenta eliminar este caso al proporcionar una API alternativa para habilitar y configurar complementos donde cada complemento tiene su propio objeto de configuración, también agrega más características como complementos y configuración específicos de fase.
withPlugins npm install --save next-compose-plugins
¿Construir un tablero o una interfaz de usuario de administración ? ¿O quieres ver un ejemplo de uso de next-compose-plugins en un proyecto del mundo real? Echa un vistazo al tablero de materiales NextJS de nuestros socios Creative Tim para comenzar.
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
module . exports = withPlugins ( [ ... plugins ] , nextConfiguration ) ;pluginsVea los ejemplos para más casos de uso.
Es una matriz que contiene todos los complementos y su configuración. Si un complemento no necesita una configuración adicional, simplemente puede agregar el complemento importado. Si necesita configuración o solo desea ejecutarla en una fase específica, puede especificar una matriz:
[plugin: function, configuration?: object, phases?: array] plugin: functionComplemento importado. Consulte la sección de complementos opcionales si solo desea requerir un complemento cuando realmente se usa.
const withPlugins = require ( 'next-compose-plugins' ) ;
const sass = require ( '@zeit/next-sass' ) ;
module . exports = withPlugins ( [
[ sass ] ,
] ) ; configuration?: objectConfiguración para el complemento.
También puede sobrescribir claves de configuración específicas para una 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]' ,
} ,
} ,
} ] ,
] ) ; Esto sobrescribirá las cssLoaderOptions con el nuevo localIdentName especificado, pero solo durante la construcción de producción. También puede combinar múltiples fases ( [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} ) o excluir una fase ( ['!' + PHASE_PRODUCTION_BUILD]: {} que sobrescribirá la configuración en todas las fases excepto PRODUCTION_BUILD ). Puede usar todas las fases Next.js proporciona.
phases?: arraySi el complemento solo se aplica en fases específicas, puede especificarlas aquí. Puede usar todas las fases Next.js proporciona.
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 ] ] ,
] ) ; ¡También puedes negar las fases con un liderazgo ! :
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 ] ] ,
] ) ; Esto aplicará el complemento en todas las fases excepto PHASE_DEVELOPMENT_SERVER .
nextConfiguration Cualquier configuración directa de Next.js puede ir aquí, por ejemplo: {distDir: 'dist'} .
También puede personalizar la configuración de Webpack de Next.js dentro de este objeto.
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 ) ; Las fases también son compatibles con el objeto nextConfiguration y tienen la misma sintaxis que en los objetos configuration del complemento.
const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;
const nextConfig = {
distDir : 'build' ,
[ '!' + PHASE_DEVELOPMENT_SERVER ] : {
assetPrefix : 'https://my.cdn.com' ,
} ,
} ; Si un complemento solo se cargará cuando se usa, puede usar la función de ayuda optional . Esto puede ser especialmente útil si el complemento solo está en las devDependencies y, por lo tanto, puede no estar disponible en todas las fases. Si no usa el ayudante optional en este caso, recibirá un error.
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 ] ] ,
] ) ; A veces tiene sentido dividir un archivo next.config.js en varios archivos, por ejemplo, cuando tiene más de un solo proyecto Next.js en un repositorio. Luego puede definir la configuración base en un archivo y agregar complementos/configuraciones específicos del proyecto en el archivo de configuración o el proyecto.
Para archivarlo fácilmente, puede usar el Helper extend en el archivo next.config.js de su proyecto.
// 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 ,
} ,
} ] ,
] ) ; Este complemento tiene algunas funcionalidades adicionales que puede usar como desarrollador de complementos. Sin embargo, si los usa, debe mencionar en algún lugar de su readme o instalar instrucciones de que necesita next-compose-plugins para tener todas las funciones disponibles, por lo que no confundirá a sus usuarios si algo no funciona como se describe fuera de la caja porque todavía no usan este complemento de composición.
Puede especificar en qué fases se debe ejecutar su complemento dentro del objeto que devuelve:
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 ;
} ,
} ;
} ; Estas fases se manejan como una configuración predeterminada y los usuarios pueden sobrescribir las fases en su archivo next.config.js si lo desean. Consulte la configuración de las fases para todas las opciones disponibles.
Cuando se carga un complemento con next-compose-plugins , está disponible alguna información adicional sobre la que puede depender. Se pasa como el segundo argumento a su función de complemento:
module . exports = ( nextConfig = { } , nextComposePlugins = { } ) => {
console . log ( nextComposePlugins ) ;
} ;Actualmente, contiene estos valores:
{
// 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 ,
} Echa un vistazo al tablero de materiales NextJS de nuestros socios Creative Tim para ver cómo se usaron next-compose-plugins en una aplicación del mundo real.
// 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 ) ;Como comparación, se vería así sin este complemento donde no está realmente claro qué configuración pertenece a qué complemento y cuáles son todos los complementos habilitados. Muchas características mencionadas anteriormente tampoco serán posibles o requerirán que tenga mucho más código personalizado en su archivo de configuración.
// 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' ] ,
}
} ) ) ) ) ; Consulte Vercel/Next-Plugins para obtener una lista de complementos oficiales y comunitarios para Next.js.
MIT © Cyril Wanner
