Как настроить Webpack для разработки темы WordPress

yonkov

Пример гит репо: Скачать здесь

Webpack — замечательный сборщик статических модулей, основанный на node.js. Он широко используется для разработки приложений JavaScript. Это инструмент, который непросто настроить, но он идет вместе с предварительно настроенным множеством пакетов внешних приложений, таких как create react app или @vue/cli. Если вы разрабатывали одностраничные приложения (spa) на основе современных фреймворков JavaScript, таких как React, Angular или Vue, вы, вероятно, знакомы с Webpack как с волшебной палочкой, которая минимизирует ваши файлы js и css. Webpack дает разработчику возможность использовать модули ES6 для разделения кода js на компоненты, предварительно обрабатывать scss в css, объединять и минимизировать скрипты и даже автоматически обновлять браузер при обновлении кода css или js. Однако не многие разработчики знают, что вы можете пользоваться замечательными функциями Webpack в монолитной серверной среде, такой как WordPress. Просто потому, что вы работаете над веб-сайтом WordPress, отображаемым на стороне сервера, не означает, что вам не нужно использовать современные инструменты внешнего интерфейса, верно? На самом деле, не стоит стесняться использовать его, поскольку это даст вам преимущество в очень конкурентной нише. В этом уроке я покажу вам, как настроить вебпак для разработки тем или плагинов WordPress с помощью инструмента @wordpress/scripts.

Весь код в этом руководстве общедоступен и может быть загружен из стартовой темы WordPress-Webpack с открытым исходным кодом. Тема поставляется в комплекте с базовой конфигурацией Webpack, которую вы можете легко расширить. А теперь хватит разговоров, давайте заварим чашечку кофе и начнем программировать.

Настроить Webpack

При желании можно скачать Webpack и настроить его с нуля, но в данной статье мы будем использовать инструмент, специально предназначенный для разработки WordPress, под названием @wordpress/scripts. Это набор повторно используемых скриптов, которые основная команда WordPress использует для разработки и поддержки редактора блоков WordPress. Как вы, наверное, знаете, редактор блоков WordPress (редактор Gutenberg) построен в основном на React.js, поэтому эти скрипты абсолютно необходимы. Итак, вместо того, чтобы вручную настраивать Webpack для разработки тем, что заняло бы слишком много времени, даже если вы опытный разработчик, я настоятельно рекомендую вам запустить следующую команду в cmd или терминале:

npm install @wordpress/scripts --save-dev

P.S: Если это не сработает, убедитесь, что на вашем компьютере установлены node и npm. Вы будете использовать модули узлов и вам понадобится node.js, так что дерзайте! На этом этапе ваш файл package.json должен выглядеть примерно так:

package.json

{
    "name": "highstarter_child",
    "version": "1.0.0",
    "description": "A child theme of the Highstarter theme",
    "scripts": {
        "build": "wp-scripts build",
        "start": "wp-scripts start",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js",
        "format:css": "npm run lint:css -- --fix",
        "format:js": "npm run lint:js -- --fix"
    },
    "devDependencies": {
        "@wordpress/scripts": "^24.6.0",
    },
    "author": "Atanas Yonkov",
    "license": "GNU GPL"
}

При желании, вы можете создать файл webpack.config.js, в котором вы сможете расширить конфигурацию Webpack @wordpress/scripts и настроить местоположение исходных файлов

webpack.config.js

/**
 * External Dependencies
 */
const path = require( 'path' );

/**
 * WordPress Dependencies
 */
const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );

module.exports = {
	...defaultConfig,
	...{
		entry: {
			main: path.resolve( process.cwd(), 'src/scss', 'main.scss' ),
			app: path.resolve( process.cwd(), 'src/js', 'app.js' ),
		},
	},
	plugins: [ ...defaultConfig.plugins ],
};

В этой конфигурации я создал папку src и добавил в нее папки scss и js. В конце, я добавил файл main.scss в папку scss и файл app.js в папку js. Вы можете поменять их соответствующим образом, но имейте в виду, что при текущей конфигурации Webpack будет выводить файлы dist внутри папки сборки.

Настройка ESLint

@Wordpress/scripts также включает в себя линтер, который будет поддерживать порядок и чистоту ваших js и scss-файлов. Настоятельно рекомендуется добавить файл .eslintrc в корень вашей темы. Вот конфигурация, которую я использую:

.eslintrc

{
	"extends": [
		"plugin:@wordpress/eslint-plugin/recommended-with-formatting"
	],
	"env": {
		"browser": true,
		"es6": true
	},
	"rules": {
		"@wordpress/no-global-event-listener": "off",
		"eqeqeq": "off"
	}
}

Вы можете добавить свой собственный набор правил, главное здесь быть последовательным. Чтобы проверить код внутри папки src на наличие ошибок, запустите:

npm run format:js

Создать build папку

По умолчанию Webpack будет генерировать выходные данные из папки src в папку build. Добавьте тестовый js-код в src/js/app.js и запустите:

npm run start

Это позволит Webpack создать папку сборки с помощью app.js, main.css и app.asset.php. Чтобы минимизировать файлы для производства, запустите

npm run build

Из файлов, которые Webpack генерирует внутри папки сборки, наиболее интересным является app.asset.php. Он создает список всех импортированных извне модулей, которые вы использовали в файле src/js/app.js. Затем вы можете использовать этот файл для автоматического добавления их в качестве зависимостей в ваш скрипт. Например, если вы устанавливаете jquery как пакет npm и импортируете его в файл app.js, файл app.asset.php будет автоматически обновляться Webpack, и WordPress будет знать, что нужно добавить его как зависимость js. Для этого вам также необходимо поставить в очередь файл build/app.js. Подробнее об этом в следующей главе.

Вы можете заметить, что в текущей конфигурации Webpack генерирует один дополнительный файл .js, называемый main.js. Это связано с тем, что по умолчанию Webpack генерирует файл .js для каждой записи, даже если на самом деле это файл CSS. Чтобы избежать этого, я добавил два дополнительных плагина Webpack в качестве зависимостей npm dev:

npm install --save-dev mini-css-extract-plugin
npm install --save-dev webpack-fix-style-only-entries

Добавьте ваши ресурсы в очередь

И последнее, но не менее важное: вам необходимо включить ресурсы, которые генерирует Webpack, в папку сборки. Если вы сохранили ту же структуру, что и я, добавьте следующий код в файл function.php

if ( ! defined( 'HIGHSTARTER_CHILD_VERSION' ) ) {
	// Replace the version number of the theme on each release.
	define( 'HIGHSTARTER_CHILD_VERSION', '1.0.0' );
}

function highstarter_child_webpack_scripts_and_styles() {
	$script_asset = include_once( get_stylesheet_directory() . '/build/app.asset.php' );
	wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri()  . '/build/app.js', $script_asset['dependencies'], $script_asset['version'], true );
	wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri()  . '/build/main.css', array(), HIGHSTARTER_CHILD_VERSION );
}
add_action( 'wp_enqueue_scripts', 'highstarter_child_webpack_scripts_and_styles', 100 );

Самое замечательное в файле .js заключается в том, что он автоматически обновляет свои js-зависимости на основе модулей, которые вы импортировали в файл app.js, находящийся в папке src/js. Он также автоматически обновит свою версию в зависимости от времени, когда Webpack обновил папку сборки.

Импортируйте модули в ваш файл JavaScript

В src/js, создайте components папку и добавьте file called theme-options.js:

theme-options.js

export default function themeOptions() {
	// eslint-disable-next-line no-console
	console.log( 'A foo walks into a bar, takes a look around and says "Hello World!"' );
}

Mы успешно создали модуль. Теперь давайте импортируем его в наш файл app.js::

app.js

/**
 * Internal Dependencies
 */
import themeOptions from './components/theme-options';

( function() {
	themeOptions();
}() );

Теперь, если мы запустим npm run start и проверим папку сборки, мы увидим, что js успешно скомпилирован. Точно так же мы можем использовать оператор импорта внутри src/js/app.js для использования внешних зависимостей, например jQuery. Webpack будет заботиться о конкатенации и минификации всего в один небольшой файл. Эту конфигурацию позволит нам получить современный и изысканный опыт разработки фронтенда.