next compose plugins

차세대 플루인

Next.js는 플러그인이 많을 때 플러그인을 활성화하고 구성 할 것을 제안하기 때문에 Next.js의 플러그인을 활성화하고 구성하기위한 클리너 API를 제공합니다.

어떤 플러그인이 활성화되어 있는지 또는 어떤 구성이 중첩되어 있고 하나의 구성 객체를 공유하기 때문에 어떤 플러그인에 속하는지는 종종 불분명합니다. 플러그인을 업데이트하거나 제거 할 때 고아 구성 값으로 이어질 수도 있습니다.

next-compose-plugins 고유 한 구성 객체가있는 플러그인을 활성화하고 구성하기위한 대체 API를 제공하여 다음과 같은 플러그 인 이이 케이스를 제거하려고하지만 위상 특정 플러그인 및 구성과 같은 더 많은 기능을 추가합니다.

목차

• 설치
• 용법
  • withPlugins
  • 선택적 플러그인
  • 다른 구성 파일을 확장합니다
• 플러그인 개발자
• 예
• 참조하십시오
• 특허

설치

 npm install --save next-compose-plugins

---

대시 보드 또는 관리자 UI 구축? 아니면 실제 프로젝트에서 next-compose-plugins 인의 사용 예를 보고 싶습니까? 파트너 크리에이티브 팀의 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]' ,
      } ,
    } ,
  } ] ,
] ) ;

이렇게하면 cssLoaderOptions 새로운 localIdentName 지정된 것으로 덮어 씁니다. 또한 여러 단계 ( [PHASE_PRODUCTION_BUILD + PHASE_PRODUCTION_SERVER]: {} )를 결합하거나 위상을 제외 할 수 있습니다 ( ['!' + PHASE_PRODUCTION_BUILD]: {} PRODUCTION_BUILD 다음 단계에서 제공하는 모든 단계를 사용할 수 있습니다.

phases?: array

플러그인을 특정 단계에서만 적용 해야하는 경우 여기에서 지정할 수 있습니다. 다음 단계에서 제공하는 모든 단계를 사용할 수 있습니다.

 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

모든 직접 Next.js 구성은 예를 들어 다음과 같습니다. {distDir: 'dist'} .

이 객체 내에서 Next.js의 웹 팩 구성을 사용자 정의 할 수도 있습니다.

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

다른 구성 파일을 확장합니다

예를 들어 한 리포지토리에 다음.js 프로젝트가 하나 이상인 경우 다음에 next.config.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 ,
    } ,
  } ] ,
] ) ; 

플러그인 개발자

이 플러그인에는 플러그인 개발자로 사용할 수있는 몇 가지 추가 기능이 있습니다. 그러나 사용하는 경우 README의 어딘가에 언급하거나 모든 기능을 사용할 수 있도록 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.js의 공식 및 커뮤니티 제작 플러그인 목록은 Vercel/Next-Plugins를 참조하십시오.

특허

MIT © Cyril Wanner