Скачать next compose plugins - Скачать исходный код next compose plugins

Следующая сопозиционная плугинс

Обеспечивает API чистящего средства для включения и настройки плагинов для lete.js, потому что по умолчанию способ следующего.

Часто неясно, какие плагины включены или какая конфигурация принадлежит какой плагин, потому что они вложены и используют один объект конфигурации. Это также может привести к значениям конфигурации с дезинкой при обновлении или удалении плагинов.

В то время как next-compose-plugins пытается устранить этот случай, предоставляя альтернативный API для включения и настройки плагинов, где каждый плагин имеет свой собственный объект конфигурации, он также добавляет больше функций, таких как фазовые плагины и конфигурация.

Установка

 npm install --save next-compose-plugins

Создание приборной панели или пользовательского интерфейса ? Или вы хотите увидеть пример использования next-compose-plugins в проекте реального мира? Проверьте следующую панель мониторинга Material от наших партнеров Creative Tim, чтобы начать вас.

Использование

 // 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 ). Вы можете использовать все фазы 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`

Любая прямая конфигурация Next.js может пойти сюда, например: {distDir: 'dist'} .

Вы также можете настроить конфигурацию WebPack 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 функцию Helper. Это может быть особенно полезно, если плагин находится только в 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 в одном хранилище. Затем вы можете определить базовую конфигурацию в одном файле и добавить плагины/настройки, специфичные для проекта, в файл конфигурации или в проекте.

Чтобы легко архивировать это, вы можете использовать The extend Helper в next.config.js в файле вашего проекта.

 // 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 , чтобы иметь все функции, и поэтому он не путает ваших пользователей, если что-то не работает, как описано из-за бокса, потому что они еще не используют этот плагин Compose.

Фазы

Вы можете указать, на каких этапах должен быть выполнен ваш плагин в возвратном объекте:

 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 ,
}

Примеры

Пример реального мира

Проверьте следующую панель мониторинга Material от наших партнеров Creative Tim, чтобы увидеть, как 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' ] ,
    }
} ) ) ) ) ;