Как избежать дублирования зависимостей в блоках Gutenberg

Question

Как избежать дублирования зависимостей в блоках Gutenberg

14 сент. 2020 г., 09:21:03

Просмотры: 664

Голосов: 2

Скрипт сборки блоков WordPress Gutenberg использует wordpress/dependency-extraction-webpack-plugin для сборки блоков без повторения зависимостей WordPress, но что делать с другими зависимостями?

Если я собираю плагин с 10 блоками, и все они используют одни и те же зависимости, сборщик WordPress будет включать эти зависимости в каждый бандл блока.

Есть ли хороший способ решить эту проблему без необходимости пересоздавать сборку webpack самостоятельно?

Guerrilla

415

блок редактор

Комментарии

Можете ли вы привести пример используемых зависимостей? Если они не входят в число поддерживаемых плагином, возможно, вам потребуется добавить пользовательскую конфигурацию webpack, расширяющую ту, что предоставляется @wordpress/scripts

Welcher

6 окт. 2020 г. 17:30:31

"без необходимости пересоздавать сборку webpack" - если я правильно понял, то нет, не нужно. Вы можете разместить все ваши блоки в одной директории и использовать единую конфигурацию webpack. Что касается проблемы дублирования кода, в webpack есть руководство, которое вы можете попробовать.

Sally CJ

7 окт. 2020 г. 14:09:36

Все ответы на вопрос

Комментарии

Куда это нужно добавить? Я использую wp-scripts build для сборки. Конфиг webpack скрыт.

Guerrilla

13 нояб. 2020 г. 05:34:55

В вашем конфигурационном файле webpack.

shramee

26 нояб. 2020 г. 20:56:41

при использовании wp-scripts build конфигурационный файл webpack недоступен. Полагаю, это невозможно таким способом и придётся делать кастомную сборку

Guerrilla

27 нояб. 2020 г. 03:55:37

shramee 497 · Accepted Answer · 2020-10-08T22:27:36Z

Плагин WordPress для извлечения зависимостей @wordpress/dependency-extraction-webpack-plugin позволяет использовать скрипты WordPress вместо многократного добавления зависимостей в сборку при импорте ES6.

Это позволяет корректно исключать из сборки модули, зарегистрированные и подключенные в WordPress (включая, но не ограничиваясь jquery, moment, react и модули wp.*).

Вы можете добавить дополнительные зависимости для исключения (убедитесь, что они зарегистрированы/подключены в WordPress) с помощью callback-функции requestToHandle.

Например, для исключения компонента react-sortable из сборки, зарегистрированного как скрипт react-sortable в WordPress (PHP):

module.exports = {
  plugins: [
    new DependencyExtractionWebpackPlugin( {
      requestToHandle: function ( module ) {
        if ( module === 'react-sortable' ) {
          return 'react-sortable'; // Название скрипта в WordPress
        }
      }
    } ),
  ]
}