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
