next compose plugins
v2.2.1
Fornece uma API mais limpa para ativar e configurar os plugins para o Next.js, porque a maneira padrão a seguir sugere que a habilitação e configuração de plug -ins pode ficar pouco clara e confusa quando você tem muitos plugins.
Muitas vezes, não está claro quais plugins estão ativados ou qual configuração pertence a qual plug -in porque eles estão aninhados e compartilham um objeto de configuração. Isso também pode levar a valores de configuração órfãos ao atualizar ou remover plugins.
Embora next-compose-plugins tente eliminar este caso, fornecendo uma API alternativa para ativar e configurar plugins em que cada plug-in possui seu próprio objeto de configuração, ele também adiciona mais recursos como plug-ins específicos de fase e configuração.
withPlugins npm install --save next-compose-plugins
Construindo um painel ou interface do usuário do administrador ? Ou você quer ver um exemplo de uso de next-compose-plugins em um projeto do mundo real? Confira o painel de materiais NextJS do nosso parceiro criativo Tim para você começar.
// next.config.js
const withPlugins = require ( 'next-compose-plugins' ) ;
module . exports = withPlugins ( [ ... plugins ] , nextConfiguration ) ;pluginsVeja os exemplos para obter mais casos de uso.
É uma matriz que contém todos os plugins e sua configuração. Se um plug -in não precisar de configuração adicional, você poderá simplesmente adicionar o plug -in importado. Se precisar de configuração ou você deseja executá -lo em uma fase específica, você pode especificar uma matriz:
[plugin: function, configuration?: object, phases?: array] plugin: functionPlug -in importado. Consulte a seção Plugins opcionais se você deseja exigir apenas um plug -in quando for realmente usado.
const withPlugins = require ( 'next-compose-plugins' ) ;
const sass = require ( '@zeit/next-sass' ) ;
module . exports = withPlugins ( [
[ sass ] ,
] ) ; configuration?: objectConfiguração para o plug -in.
Você também pode substituir as teclas de configuração específicas para uma 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]' ,
} ,
} ,
} ] ,
] ) ; Isso substituirá as cssLoaderOptions com o novo localIdentName especificado, mas apenas durante a construção da produção. Você também pode combinar várias fases ( [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} ) ou excluir uma fase ( ['!' + PHASE_PRODUCTION_BUILD]: {} que substituirá o config em todas as fases, exceto PRODUCTION_BUILD ). Você pode usar todas as fases a seguir.
phases?: arraySe o plug -in for aplicado apenas em fases específicas, você poderá especificá -las aqui. Você pode usar todas as fases a seguir.
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 ] ] ,
] ) ; Você também pode negar as fases com uma liderança ! :
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 ] ] ,
] ) ; Isso aplicará o plug -in em todas as fases, exceto PHASE_DEVELOPMENT_SERVER .
nextConfiguration Qualquer configuração direta do próximo.js pode ir aqui, por exemplo: {distDir: 'dist'} .
Você também pode personalizar a configuração do WebPack do Next.js dentro desse 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 ) ; As fases também são suportadas no objeto nextConfiguration e têm a mesma sintaxe que nos objetos configuration do plug -in.
const { PHASE_DEVELOPMENT_SERVER } = require ( 'next/constants' ) ;
const nextConfig = {
distDir : 'build' ,
[ '!' + PHASE_DEVELOPMENT_SERVER ] : {
assetPrefix : 'https://my.cdn.com' ,
} ,
} ; Se um plug -in só deve ser carregado quando for usado, você poderá usar a função auxiliar optional . Isso pode ser especialmente útil se o plug -in estiver apenas nas devDependencies e, portanto, não estar disponível em todas as fases. Se você não usar o ajudante optional neste caso, receberá um erro.
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 ] ] ,
] ) ; Às vezes, faz sentido dividir um arquivo next.config.js em vários arquivos, por exemplo, quando você tem mais do que apenas um projeto do próximo.js em um repositório. Você pode definir a configuração base em um arquivo e adicionar plugins/configurações específicos do projeto no arquivo de configuração ou no projeto.
Para arquivar facilmente isso, você pode usar o ajudante extend no arquivo next.config.js do seu projeto.
// 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 plug -in possui algumas funcionalidades extras que você pode usar como desenvolvedor de plug -in. No entanto, se você usá-los, mencione em algum lugar do seu ReadMe ou Instruções de instalação de que ele precise de next-compose-plugins para ter todos os recursos disponíveis e, portanto, não confundirá seus usuários se ainda não estiver funcionando como descrito pronta para uso, porque eles ainda não usam esse plug-in compostos.
Você pode especificar em quais fases seu plug -in deve ser executado dentro do objeto que você retorna:
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 ;
} ,
} ;
} ; Essas fases são tratadas como uma configuração padrão e os usuários podem substituir as fases no arquivo next.config.js , se quiserem. Consulte a configuração das fases para todas as opções disponíveis.
Quando um plug-in é carregado com next-compose-plugins , algumas informações adicionais sobre as quais você pode depender estão disponíveis. Ele é passado como o segundo argumento da sua função de plug -in:
module . exports = ( nextConfig = { } , nextComposePlugins = { } ) => {
console . log ( nextComposePlugins ) ;
} ;Atualmente, ele contém esses 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 ,
} Confira o painel de materiais do NextJS pelo nosso parceiro Creative Tim para ver como next-compose-plugins foi usado em um aplicativo do 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 comparação, seria assim sem esse plug -in, onde não está realmente claro qual configuração pertence a qual plug -in e quais são todos os plugins ativados. Muitos recursos mencionados acima também não serão possíveis ou exigem que você tenha muito mais código personalizado no seu arquivo de configuração.
// 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' ] ,
}
} ) ) ) ) ; Veja Vercel/Next-Plugins para obter uma lista de plugins oficiais e comunitários para Next.JS.
MIT © Cyril Wanner
