@0x6368656174/wp-builder 中文文档教程

Question

@0x6368656174/wpbuild

Утилита командной строки для продуктивной работы с WordPress при помощи интеграции с WebPack。

Зачем нужен данная утилита

Утилита пытается решить следующие проблемы разработки на WordPress:

1. Разделение кода и представления, при помощи twig-шаблонов, в виде интеграции с Timber;
2. Модульности JavaScript-кода, при помощи Babel и WebPack;
3. Модульности CSS-кода, при помощи Sass/Scss и использовании БЭМ-методологии;
4. Использование пакных менеджеров, при помощи интеграции с npm и Composer;
5. Быстрый старт и развертывание проекта;
6. Использование литеров, для автоматического контроля и исправления стиля написания кода;
7. Сборка проекта из исходников и его распространение, для возможности интеграции проекта с CI.

Установка

Для установки, необходимо выполнить команду:

# npm install -g @0x6368656174/wp-builder

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

Инициализация нового проекта

Для инициализации нового пустого проекта, необходимо выполнить команду:

# wpbuild init

Структура нового проекта

• composer/ - каталог со скриптами composer. По-умолчанию, там создается скрипт, который следит за тем, чтоб добавление и обновление пакетов через composer не затирало основные параметры dist/wp-config.php.
• dist/ - каталог с результатом сборки проекта.
• dist/vendors/ - каталог с установленными пакетами пакетного менеджера composer. После инициализации проекта в него будет автоматически установлено расширение для использования twig-шаблонов WordPress - Timber.
• dist/wp-content/ - стандартная папка wp-content из поставки WordPress. Она вынесена отдельно, чтоб она не затиралась, в случае обновления WordPress через composer. В dist/wp-content/название_темы/ будет автоматически собираться тема проекта.
• dist/.htaccess - файл конфигурации веб-сервера Apache, для работы WordPress из подкаталога wordpress.
• dist/wordpress/ - каталог автоматической установки WordPress из composer.
• dist/index.php - переделанный стандартный index.php WordPress для работы его из подкаталога wordpress.
• dist/wp-config.php - стандартный файл с настройками WordPress. Параметры DB_NAME, DB_USER, DB_PASSWORD, DB_HOST и WP_DEBUG не будут перезатераться при обновлении WordPress через composer.
• node_modules/ - каталог с установленными пакетами пакетного менеджера npm.
• src/название_темы/ - каталог с исходниками темы.
• .editorconfig - файл описания стиля кода для IDE.
• .eslintrc - файл конфигурации линтера JavaScript - ESLint.
• .gitignore - файл описания игнорируемых файлов системой контроля версии git.
• .lintstagedrc - файл описания автоматического применения литеров, при создании коммита в git.
• .php_cs.dist - файл конфигурации линтера PHP - PHP-CS-Fixer.
• .prettierrc - файл конфигурации утилиты автоматического форматирования кода Prettier.
• .stylelintrc - файл конфигурации линтера CSS/Sass/Scss - StyleLint.
• composer.json - стандартный файл описания проекта пакетного менеджера composer.
• composer.lock - служебный файл пакетного менеджера composer.
• wpbuild.json - файл конфигурации проекта. Описание конфигурации смотри ниже.
• package.json - стандартный файл описания проекта пакетного менеджера npm.
• tsconfig.json - файл конфигурации TypeScript.
• tslint.json - файл конфигурации линтера TypeScript - TSLint.

Утилита позволяет разбить проект WordPress (тему), на независимы модули, компонтенты (бллоки), каждый из которых содержит в себе отдельные реализации на PHP, HTML (twig) CSS (так же поддерживаются Sass и Scss), и JavaScript (так же поддерживается TypeScript)。 Релизации внутри модуля могут быть автономными，а могу быть связаны со смежными модулями。 Для CSS части связь реализуется только вариантах написанных на Sass/Scs, при помощи @import диррективы. Для JavaScript части связь реализуется при помощи ES-модулей。

Утилита собирает все модули в готовый проект, при этом все CSS-части компилируются в несколько оптимизированых, при этом все JS-части компилируются при помощи Babel или TypeScript 和 ES6, и собираются в отдельные JS-модули при помощи WebPack。

Принципы организации файлов с исходниками темы

Все файлы с исходниками принято располагать в папке src/название_темы/。

Файлы PHP рекомендуется размещать внутри вложенных папок сгруппированных по назначению。 Например, файлы описывающие пользовательские мето-боксы можно разместить в папке src/название_темы/MetaBox。 Утилита автоматически настраивает RSR-4 автолоад файлов PHP по их пространству имен。 Она создает пространство имен вида название_темы в CamelCase стиле (например для темы test-theme утилита создаст пространство имен TestTheme) и прописывает PSR-4 автолоад для поиска пространства имен темы в папке src/название_темы/。 Поэтому для PHP-файлов можно задать пространство имен (命名空间) и потом автоматически их подключать при помощи PSR-4 автолоада。 Например для файла описывющего пользовательский мето-бокс для главной страницы Front темы 测试主题 можно задать пространтсво имен namespaces TestTheme\MetaBox и поот использовать его при помощи PSR-4 автолоада use TestTheme\MetaBox\Front。 Важно соблюдать правила именования PSR-4, т.е. название папки должно совпадать с названием пространства имен, а название класса с названием файла。