Благодаря официальной поддержке команды редактора WordPress (Gutenberg) теперь вы можете быстро приступить к работе с блочным плагином, используя скрипт WordPress Create Block Script (@wordpress/create-blockпакет npm).
Эта статья предназначена для более старой версии скрипта создания блока.
Хотя теорию все еще можно применять, некоторая информация в этой статье может быть несовместима с последним скриптом создания блока. Вы можете просмотреть наше обновленное Руководство по созданию скриптов блоков здесь.
У нас также есть обновленное руководство по добавлению дополнительных точек входа в webpack.
В этой статье мы рассмотрим, как вы можете добавить пользовательскую настройку, webpack.configчтобы расширить wp-scriptsфункциональность компиляции блока, сгенерированного блоком.
При этом мы можем расширить npm startкоманду для запуска дополнительных задач. В этом случае мы собираемся настроить плагин для компиляции Sass (sass, scss) в файлы css.
Мы скомпилируем Sass из /srcпапки в файлы style.cssи editor.cssв корне плагина.
Создайте наши файлы Sass
Первое, что мы собираемся сделать, это создать новую папку по адресу /src/scss. Здесь мы добавим два файла:
/src/scss/editor.scss/src/scss/style.scss
Мы скопируем файлы cssиз /editor.cssи /style.cssво вновь созданные файлы.
Затем мы удалим файлы /editor.cssи ./style.css
Файлы SCSS и новая структура папок.
Импортируйте Sass в/src/index.js
В верхней части /src/index.jsдобавьте следующие утверждения:
import './scss/editor.scss';
import './scss/style.scss';
Это позволит веб-пакету забрать .scssфайлы, чтобы их можно было обработать.
Таким образом, импортируя Sass вверху нашего файла, мы сможем скомпилировать Sass для нескольких блоков в одном и том же плагине в один файл. В этом случае он скомпилирует Sass в отдельные /editor.cssфайлы /style.cssдля всего плагина.
Настройтеwebpack.config
Создайте новый файл в корне плагина с именем /webpack.config.js. Скопируйте следующий код в этот файл:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
]
}
};
Теперь в вашем терминале введите следующую команду cdв корень плагина:
Плагин должен скомпилировать JavaScript в папку сборки, как обычно.
Установка пакета для компиляции Sass
Мы собираемся использовать mini-css-extract-pluginпакет npm для создания .cssфайлов из нашего Sass, для этого нам также понадобится пара дополнительных пакетов для .scssпервой обработки файлов в CSS.
Мы установим scss-loaderпакет npm, чтобы позволить нам скомпилировать CSS в Sass. это имеет зависимость node-scss.
Мы также установим css-loaderпакет npm, чтобы мы могли обрабатывать @importоператоры в CSS.
npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev
Теперь расширьте /webpack.config.jsфайл, чтобы он выглядел следующим образом:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
В строке 2 мы импортировали файл mini-css-extract-plugin, в строке 20 мы объявили его как плагин и передали ../[name].cssкак файл filename. Это означает, что скомпилированный файл будет добавлен в корень плагина.
В строке 10 мы передали объект с testпараметром, который использует регулярное выражение для указания типа файла, который мы проверяем, и useпараметра.
Параметр useсодержит массив всех плагинов, которые мы собираемся применить для этого теста. Он запускает плагины из нижней части списка, заканчивая вверху.
Теперь, если мы запустим npm start, он создаст .cssфайл в корне плагина.
Создание файла CSS.
Глядя на файловую структуру, у нас есть два дополнительных файла:
/index.css/index.css.map
(Мы также получаем пару файлов JavaScript в /buildпапке, но я объясню, как с ними работать позже).
Файл .mapпредставляет собой указатель, который указывает вашей консоли JavaScript, в каком файле изначально был определен CSS или Sass, и помогает при отладке.
Изучив /index.cssфайл, он содержит код из файлов /src/scss/editor.scssи ./src/scss/style.scss
Это не то, что нам нужно, так как файлы стилей и редактора ставятся в очередь отдельно в php-файле нашего плагина.
Разделение файла CSS
Чтобы разделить этот /index.cssфайл, нам нужно воспользоваться объектом webpack 4 optimization.splitChunks. Подробнее о его настройке читайте на странице документации splitChunks.
Добавьте в свой /webpack.config.jsфайл следующее:
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Удалите ранее сгенерированные файлы и папку сборки и запустите npm start.
Теперь мы получаем следующие файлы:
/build/editor.js/build/editor.js.map/build/style.js/build/style.js.map/editor.css/editor.css.map/style.css/style.css.map
Глядя на них /editor.css, /style.cssони были сгенерированы правильно и содержат код, который нам нужен!
Генерация CSS-файлов редактора и стилей.
Файлы в /buildпапке не нужны для нашей установки, я посмотрю, как мы можем удалить их дальше.
Удаление ненужных файлов
Для удаления ненужных файлов мы будем использовать ignore-emit-webpack-pluginпакет npm.
Этот плагин предотвращает вывод webpack (или «выдачу» определенных файлов).
Установите пакет npm с помощью команды терминала:
npm install ignore-emit-webpack-plugin --save-dev
Измените /webpack.config.jsфайл, включив в него конфигурацию для подключаемого модуля Ignore Emit webpack.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
module.exports = {
...defaultConfig,
module: {
...defaultConfig.module,
rules: [
...defaultConfig.module.rules,
{
test: /.s[ac]ss$/i,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
],
},
optimization: {
...defaultConfig.optimization,
splitChunks: {
cacheGroups: {
default: false,
editor: {
chunks: 'all',
enforce: true,
name: 'editor',
test: /editor.s[ac]ss$/i,
},
style: {
chunks: 'all',
enforce: true,
name: 'style',
test: /style.s[ac]ss$/i,
},
},
},
},
plugins: [
...defaultConfig.plugins,
new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
new MiniCssExtractPlugin( {
filename: '../[name].css',
} ),
],
};
Обратите внимание на новые ссылки в строке 2, которая включает подключаемый модуль Ignore Emit, и в строке 41, которая указывает подключаемому модулю, какие файлы не следует испускать.
Теперь, когда мы запускаем npm start(после удаления /buildпапки) /build/editor.js, файлы /build/editor.js.map, /build/style.jsи /build/style.js.mapбольше не создаются.
Только производство
Если мы хотим, чтобы продукт выводил только файлы и исключал .mapфайлы, мы можем просто передать devtool: falseв качестве параметра наш module.exportsобъект, и это предотвратит .mapсоздание файлов.
Поскольку мы хотим, чтобы эти файлы были исключены только на рабочем сервере, мы можем проверить process.env.NODE_ENVнастройку, чтобы увидеть, какая установлена наша текущая среда, и передать, devtool: falseесли среда настроена на рабочую.
Для этого добавим в начало нашего /webpack.config.jsфайла следующее:
const production = 'development' !== process.env.NODE_ENV;
Затем добавьте в конец файла следующее:
if (production) {
module.exports.devtool = false;
}
Если npm startкоманда запущена, а среда узла не настроена на рабочую, .mapфайлы не будут созданы.