Створення спеціального блоку Гутенберга – Частина 1: Налаштування середовища розробки

Останнє оновлення Лис 11, 2022

Зміст

У першій частині цієї серії посібників про те, як створювати власні блоки Гутенберга, нам потрібно налаштувати середовище розробки. Нам потрібне місце, де ми зможемо написати наш код у синтаксисі ES6/ESNext і компілювати його на ходу. Можна писати спеціальні блоки Gutenberg за допомогою синтаксису ES5 без налаштування Webpack і Babel. Але код буде справді громіздким для читання та запису. Якщо ви не впевнені, навіщо нам все це потрібно робити або в чому різниця, прочитайте мій допис, у якому це пояснено. Я можу гарантувати вам, що коли ви повернетесь, ви будете переконані зробити цей додатковий крок, щоб написати кращий код.

Я припускаю, що у вас уже є локальний WordPress, який працює на стеку LAMP або подібному. І що ви або пишете тему, або плагін. Щодо мене, то я розміщую свій код у розробленій мною темі awp-starter-theme, розташованій у моїй папці тем WordPress. Я хочу відокремити свою розробку Gutenberg від усіх інших файлів теми, тому я створюю підкаталог gutenberg-devу своїй кореневій папці теми. Це буде папка мого проекту та папка, до якої я буду звертатися до решти серії посібників.

Я вже написав докладний посібник із налаштування середовища розробки для Gutenberg, тому я просто швидко пройду тут кроки. Якщо ви ніколи раніше цього не робили, я рекомендую прочитати допис із посиланням нижче, оскільки він містить більше інформації, ніж ви знайдете тут!

Налаштуйте проект за допомогою webpack

За допомогою терміналу (термінал 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"
},

Сценарій «build» скомпілює мої файли. Але оскільки його потрібно запускати вручну щоразу, коли вносяться зміни, ми будемо використовувати сценарій «start» під час розробки. Потім він ініціює «режим спостереження», де прослуховується до змін, зроблених у будь-якому з ваших файлів сценаріїв, і повторно компілює їх кожного разу, коли ви зберігаєте зміни.

Конфігурація Webpack

Наступним кроком є створення файлу конфігурації webpack. Я роблю це, тому що не хочу використовувати вихідні та вихідні назви файлів і папок за замовчуванням. Я хочу вирішувати для себе, де мої вихідні файли, і де скомпільовані файли повинні закінчитися.

За допомогою @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

Спочатку нам потрібно встановити деякі пакунки для нашої конфігурації 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. Ми вже налаштували конфігурацію webpack для компіляції кінцевих файлів безпосередньо awp-starter-theme/assets/js/разом з іншими файлами Javascript для моєї теми.

Тепер ми готові до наступної частини, де ми почнемо з реєстрації нашого першого спеціального блоку.

Джерело запису: awhitepixel.com