В первой части этой серии руководств о том, как создавать пользовательские блоки Gutenberg, нам нужно настроить нашу среду разработки. Нам нужно место, где мы можем писать наш код в синтаксисе ES6/ESNext и компилировать его на ходу. Можно писать собственные блоки Gutenberg, используя синтаксис ES5, без настройки Webpack и Babel. Но код будет действительно громоздким для чтения и написания. Если вы не уверены, зачем нам все это нужно делать, или в чем разница, прочитайте мой пост, объясняющий это. Я могу гарантировать вам, что когда вы вернетесь, вы будете убеждены сделать этот дополнительный шаг, чтобы написать лучший код.
Я предполагаю, что у вас уже есть локальный WordPress, работающий на стеке LAMP или аналогичном. И что вы либо тему пишете, либо плагин. Что касается меня, я размещаю свой код в разработанной мной теме awp-starter-theme, расположенной в папке моей темы WordPress. Я хочу отделить свою разработку Gutenberg от всех других файлов темы, поэтому я создаю подкаталог gutenberg-devвнутри корневой папки моей темы. Это будет папка моего проекта, к которой я буду обращаться в оставшейся части серии руководств.
Я уже написал подробное руководство по настройке среды разработки для Гутенберга, поэтому я просто быстро пройдусь по шагам здесь. Если вы никогда не делали этого раньше, я рекомендую прочитать связанный пост ниже, так как он содержит больше информации, чем то, что вы найдете здесь!
Настройте проект с помощью веб-пакета
Используя терминал (терминал iOS или Windows cmd работают нормально), перейдите в папку проекта (в моем случае awp-starter-theme/gutenberg-dev). Мы инициируем новый проект, попросив npm сгенерировать файл package.jsonс общим содержимым.
Создание package.json
npm init -yДалее я установлю скрипты WordPress, которые очень помогут нам с настройкой с помощью этой команды (которая добавит подпапку, node_modulesа package-lock.jsonтакже):
npm install --save-dev --save-exact @wordpress/scriptsОткройте package.jsonфайл в папке проекта в редакторе и найдите scriptsсвойство. Мы заменяем его двумя скриптами из только что установленного пакета WordPress:
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},Сценарий «сборки» будет компилировать мои файлы. Но поскольку его нужно запускать вручную каждый раз, когда вносятся изменения, мы будем использовать сценарий «старт» во время разработки. Затем он инициирует «режим наблюдения», где он прослушивает к изменениям, внесенным в любой из ваших файлов сценариев, и перекомпилирует их всякий раз, когда вы сохраняете изменения.
Конфигурация веб-пакета
Следующим шагом является создание файла конфигурации веб-пакета. Я делаю это, потому что не хочу использовать исходные и выходные имена файлов и папок по умолчанию. Я хочу решить для себя, где мои исходные файлы и где должны быть скомпилированные файлы.
С помощью @wordpress/scriptsустановленного нами пакета мы можем наследовать конфигурацию веб-пакета WordPress и переопределить только те части, которые хотим изменить.
В папке нашего проекта создайте новый файл с именем webpack.config.jsи откройте его в редакторе. Добавьте этот контент:
const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
...defaultConfig,
entry: {
'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
},
output: {
path: path.join(__dirname, '../assets/js'),
filename: '[name].js'
}
}Это определяет мой входной файл (в настоящее время только один) в entryсвойстве, расположенном в подпапке srcв папке моего проекта с именем block-awhitepixel-myfirstblock.js. Очевидно, назовите ваши файлы как хотите, но не забудьте изменить как ключ, так и значение. Потому что в outputсвойстве я прошу webpack скомпилировать мои входные файлы с ключом входа в качестве имени файла. В pathсвойстве прошу поместить все скомпилированные файлы на один шаг из папки моего проекта, в папку темы assets/js. Настройте имена файлов и расположение в соответствии с вашим проектом. Обратитесь к моему подробному руководству, если вы запутались.
Создайте подпапку src/в папке проекта, и туда мы поместим все исходные файлы. (Настройте, если вы изменили entryместоположение в webpack.config.js). Создайте здесь файл block-awhitepixel-myfirstblock.jsи оставьте его пока пустым.
Остался еще один шаг — и он предназначен для тех, кто хочет использовать новейшие функции ESNext. К сожалению, в конфигурации WordPress Babel по умолчанию этого нет. И поскольку я хочу использовать такие функции, как стрелочные функции, мне также нужно настроить Babel.
Настройка Вавилона
Сначала нам нужно установить некоторые пакеты для нашей конфигурации Babel, введя эту команду:
npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-propertiesКогда это будет сделано, создайте новый файл .babelrcв папке нашего проекта. Здесь мы поместим нашу конфигурацию Babel:
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-proposal-class-properties"
]
]
}И это все для нашей настройки среды разработки!
Команды сборки
Во время разработки вам нужно будет скомпилировать файлы Javascript. В нашем package.jsonмы добавили два скрипта именно для этого.
Всякий раз, когда мы хотим разработать наши файлы Javascript, мы запускаем это в терминале:
npm run buildЭта команда будет выполнять компиляцию всякий раз, когда вы запускаете ее в терминале. Попробуйте, и вы должны увидеть, что он создает файл block-awhitepixel-myfirstblock.js(вместе с одним или двумя другими файлами «ресурсов») в определенной выходной папке, которую вы определили в файле webpack.config.js. В моем случае он появляется в awp-starter-theme/assets/js/.
Использование вышеуказанной команды работает нормально, но раздражает повторять каждый раз, когда вы вносите изменения в свои файлы. Вместо этого вы, вероятно, предпочтете запустить эту команду:
npm run startЭто установит ваш терминал в «режим наблюдения», обнаружив любые изменения, сохраненные в ваших файлах Javascript, и скомпилирует их по ходу дела. Каждый раз, когда ваши файлы содержат ошибки, терминал будет выдавать сообщения об ошибках. Нажмите CTRL + C, чтобы остановить процесс просмотра.
В качестве эталона папка моего проекта теперь выглядит как изображение. Я предпочитаю отделять все файлы конфигурации и особенно подпапку node_modules/(которая содержит буквально десятки тысяч файлов) от остального кода моей темы. Облегчает настройку правил игнорирования — например компиляторы SCSS или git ignore. Мы уже настроили конфигурацию веб-пакета для компиляции окончательных файлов непосредственно awp-starter-theme/assets/js/вместе с другими файлами Javascript для моей темы.
Теперь мы готовы к следующей части, где мы начнем с регистрации нашего первого пользовательского блока.