next compose plugins
v2.2.1
提供一個清潔的API，用於啟用和配置Next.js的插件。
通常不清楚啟用了哪個插件或哪個配置屬於哪個插件，因為它們是嵌套並共享一個配置對象。更新或刪除插件時，這也可能導致孤立的配置值。
雖然next-compose-plugins試圖通過提供用於啟用和配置插件的替代API來消除這種情況，但每個插件都有自己的配置對象，但它還添加了更多功能，例如相位特定的插件和配置。
withPlugins npm install --save next-compose-plugins
構建儀表板或管理UI ？還是您想在現實世界項目中查看next-compose-plugins的用法示例？請查看我們的合作夥伴Creative Tim的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]' ,
} ,
} ,
} ] ,
] ) ;這將用指定的新localIdentName覆蓋cssLoaderOptions ，但僅在生產構建過程中。您還可以組合多個階段（ [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任何Direct Next.js配置都可以在此處進行： {distDir: 'dist'} 。
您還可以自定義此對像中Next.js的WebPack配置。
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文件拆分為多個文件是有意義的，例如，當您在一個存儲庫中有一個不止一個next.js項目時。然後，您可以在一個文件中定義基本配置，並在配置文件或項目中添加特定於項目的插件/設置。
為了輕鬆存檔，您可以在項目的next.config.js文件中使用extend助手。
// 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 ,
} ,
} ] ,
] ) ; 該插件具有一些額外的功能，您可以用作插件開發人員。但是，如果您使用它們，則應在會員中提到某個地方或安裝說明，它需要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 ,
} 請查看我們的合作夥伴創意Tim的NextJS材料儀表板，以了解如何在現實世界應用中使用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' ] ,
}
} ) ) ) ) ; 有關Next.J.
麻省理工學院©Cyril Wanner
