Slim 4 - Webpack

• Требования
• Введение
• Структура проекта
• Настройки webpack
• Настройка расширения Twig Webpack
• Создание assets
• Компиляция assets
• Полезные советы
• Пересобрать при изменениях
• jQuery настройки
• Bootstrap настройки
• Fontawesome установка/настройка
• SweetAlert2 установка/настройка
• DataTables установка/настройка
• Babel установка/настройка

Требования

• Slim 4
• NPM

Введение

Если вы когда-либо уже использовали webpack и не совсем поняли зачем он, вам все же придется прочитать дальше. В этом руководстве Webpack используется для объединения (компиляции, комбинирования и минимизации) веб-ресурсов, таких как компоненты/плагины JavaScript и файлы CSS.

Структура проекта

/                              корневая директория проекта - root
/composer.json
/webpack.config.js             конфиг Webpack
/templates/                    файлы шаблона twig + assets файлы
/templates/home/               
/templates/user/
/public/                       корневая директория вебсервера
/public/index.php              точка входа (application entry point)
/public/assets                 скомпилированые assets файлы (webpack output)
/public/assets/manifest.json   manifest file (required by the webpack twig extension)

Настройки webpack

Создайне новый файл package.json в корне вашего проекта. В этом файле перечислены пакеты, от которых зависит ваш проект:

{
    "name": "my-app",
    "version": "1.0.0",
    "license": "MIT",
    "private": true,
    "dependencies": {
    },
    "devDependencies": {
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "mini-css-extract-plugin": "^0.8.0",
        "optimize-css-assets-webpack-plugin": "^5.0.3",
        "terser-webpack-plugin": "latest",
        "webpack": "^4.40.2",
        "webpack-assets-manifest": "^3.1.1",
        "webpack-cli": "^3.3.9",
        "webpack-manifest-plugin": "^2.0.4"
    }
}

Создайте файл webpack.config.js в корне вашего проекта. Это основной файл конфигурации для Webpack:

const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
    entry: {
        'home/home-index': './templates/home/home-index.js'
        // тут вы можете подключать другие assets файлы например:
        // 'layout/layout': './templates/layout/layout.js'
    },
    output: {
        path: path.resolve(__dirname, 'public/assets'),
        publicPath: 'assets/',
    },
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    },
    performance: {
        maxEntrypointSize: 1024000,
        maxAssetSize: 1024000
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new ManifestPlugin(),
        new MiniCssExtractPlugin({
            ignoreOrder: false
        }),
    ],
    watchOptions: {
        ignored: ['./node_modules/']
    },
    mode: "development"
};

Ключевой частью является entry(входной объект): он говорит Webpack  загрузить файл templates/home/home-index.js и следовать всем инструкциям require/import.

Затем он упакует все вместе и - благодаря ключу home/home-index - выведет окончательные файлы home/home-index.js и home/home-index.css в каталог public/assets/. Позже можно добавить  больше JavaScript или CSS для конкретной страницы.

Обратите внимание, что Webpack использует TerserWebpackPlugin для минимизации вашего JavaScript и OptimizeCSSAssetsPlugin для минимизации ваших файлов CSS.

Чтобы установить webpack и все зависимости, выполните в консоли:

npm install

Настройка расширения Twig Webpack

Теперь устанавливаем расширение Twig Webpack через композер:

composer require fullpipe/twig-webpack-extension

Зарегистрируйте расширение WebpackExtension Twig в пределах контейнера Twig::class:

use Psr\Container\ContainerInterface;
use Slim\App;
use Slim\Views\Twig;
// ...

return [
    // Application settings
    'settings' => function () {
        return require __DIR__ . '/settings.php';
    },

    // The Slim app factory
    App::class => function (ContainerInterface $container) {
        AppFactory::setContainer($container);

        return AppFactory::create();
    },

    // The Twig template engine
    Twig::class => function (ContainerInterface $container) {
        $settings = (array)$container->get('settings');
        $twigSettings = $settings['twig'];

        $twig = Twig::create($twigSettings['paths'], $twigSettings['options']);
        // ...

        // The path must be absolute.
        // e.g. /var/www/example.com/public
        $publicPath = (string)$settings['public'];

        // Add extensions
        $twig->addExtension(new \Fullpipe\TwigWebpackExtension\WebpackExtension(
            // The manifest file.
            $publicPath . '/assets/manifest.json',
            // The public path
            $publicPath
        ));

        return $twig;
    },

    // Add more container entries ...
];

• Первый параметр (manifestFile) определяет путь к  manifest.json file. Также тут можно использовать __PATH__.
• Следующий параметр  (publicPathJs) определяет путь к итоговым js файлам.
• Третий параметр (publicPathCss) соответственно определяет путь к css файлам.

Рекомендуется создавать экземпляр Slim приложения внутри контейнера (а не где-то «снаружи»). Просто убедитесь, что при начальной загрузке также используется этот экземпляр приложения из контейнера.

Пример для config/bootstrap.php:

<?php

use DI\ContainerBuilder;
use Slim\App;

require_once __DIR__ . '/../vendor/autoload.php';

$containerBuilder = new ContainerBuilder();

// Add container definitions
$containerBuilder->addDefinitions(__DIR__ . '/container.php');

// Build PHP-DI Container instance
$container = $containerBuilder->build();

// Create App instance
$app = $container->get(App::class);

// Register routes
// ...

// Register middleware
// ...

return $app;

Создание assets

Далее, создайте новый файл templates/home/home-index.js с базовым js кодом и импортируйте CSS через require:

require('./home-index.css');

alert('Hello World!');

Создайте новый файл templates/home/home-index.css со стройкой:

body {
    background-color: lightgray;
}

Создайте новый файл twig шаблона templates/layout/layout.twig со следующим содержимым:

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
        
        {% block css %}{% endblock %}
    </head>
    <body>
        <!-- ... -->
        {% block content %}{% endblock %}

        {% block js %}{% endblock %}
    </body>
</html>

Создайте еще один файл twig шаблонизатора templates/home/home-index.twig с содержимым:

{% extends "layout/layout.twig" %}

{% block css %}
    {% webpack_entry_css 'home/home-index' %}
{% endblock %}

{% block js %}
    {% webpack_entry_js 'time/time-index' %}
{% endblock %}

{% block content %}
Welcome
{% endblock %}

ВАЖНО: Файл ‘home/home-index’ должен соответствовать первому ключу элемента записи в webpack.config.js

Параметры webpack_entry_css и webpack_entry_js получает url из файла manifest.json webpack и выводит соответствующие html теги. Для примера:

<link type="text/css" href="/assets/home/home-index.css" rel="stylesheet">
<script type="text/javascript" src="/assets/home/home-index.js"></script>  

Компиляция assets

Для сборки assets при разработке выполните в консоли команду: 

npx webpack --mode=development

Для компиляции и минификации assets файлов для итогового проекта (production), выполните в консоли команду:

npx webpack --mode=production

Поздравляю! Вы получите 3 новых файла:

• public/assets/home/home-index.js (содержит весь js код для “home/home-index” )
• public/assets/home/home-index.css (содержит весь CSS для “home/home-index”)
• public/assets/manifest.json (содержит все записи и имена файлов)

Полезные советы

Пересобрать при изменениях

Webpack может следить и пересобирать все файлы при любых изменениях.

npx webpack --watch

Чтобы остановить процесс слежения webpack нажмите сочетание клавиш Ctrl+C.

Подробнее можно почитать по ссылке:

• Webpack Watch and WatchOptions

jQuery настройки

jQuery использует глобальную переменную window.jQuery и псевдоним window. $. Проблема в том, что Webpack обернет все в модули, чтобы защитить глобальную область видимости. По этой причине мы должны вручную привязать экземпляр jQuery к глобальной области.

Чтобы установить jQuery, выполните в консоли:

npm install jquery

Браузер должен загрузить jQuery раньше остальных jQuery плагинов. По этой причине рекомендую подлючать jquery в основной js файл.

Добавьте новый файл в конфиг webpack.config.js:

module.exports = {
    entry: {
        'layout/layout': './templates/layout/layout.js',
        // ...
    },
    // ...
};

Привяжите jQuery к глобальной области видимости в точке входа в ваших шаблонах templates/layout/layout.js:

window.jQuery = require('jquery');
window.$ = window.jQuery;

Добавьте assets ресурсы {% webpack_entry_css 'layout/layout' %} и {% webpack_entry_js 'layout/layout' %} в Twig шаблоны layout/layout.twig:

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
        
        {% webpack_entry_css 'layout/layout' %}
        
        {% block css %}{% endblock %}
        
        {% webpack_entry_js 'layout/layout' %}
    </head>
    <body>
        <!-- ... -->
        {% block content %}{% endblock %}

        {% block js %}{% endblock %}
    </body>
</html>

Bootstrap настройки

Bootstrap 4 использует jQuery и Popper.js для JavaScript компонентов (modals, tooltips, popovers etc). Необходимо подключить в первую очередь jQuery.

Для установки Bootstrap, выполните в консоли:

npm install bootstrap

Импортируйте boostrap в глобальную точку входа templates/layout/layout.js:

window.jQuery = require('jquery');
window.$ = window.jQuery;

require('bootstrap');
require('popper.js');
require('bootstrap/dist/css/bootstrap.css');

Fontawesome установка/настройка

Fontawesome довольно-таки популярный набор иконок на все случаи жизни.

Чтобы установить Fontawesome, выполните в консоли:

npm install @fortawesome/fontawesome-free

Также нам понадобиться файл-загрузчик для web шрифтов:

npm install file-loader --save-dev

Мы хотим, чтобы  Fontawesome автоматически копировался в папку с другими assets файлами. Файл-загрузик (file-loader) копирует файлы шрифта в корневую папку сборки.

Подключите Fontawesome в глобальной точке входа templates/layout/layout.js

Можно импортировать все иконки:

require('@fortawesome/fontawesome-free/css/all.min.css');

… или можно подключить отдельные наборы иконок:

require('@fortawesome/fontawesome-free/css/fontawesome.css');
require('@fortawesome/fontawesome-free/css/v4-shims.css');
require('@fortawesome/fontawesome-free/css/regular.css');
require('@fortawesome/fontawesome-free/css/solid.css');
require('@fortawesome/fontawesome-free/css/brands.css');

ВАЖНО: Мы не устанваливаем js зависимости здесь, так как это увеличит размер итогового js файло свыше 1МБ. Нам необходимы только css и файлы веб шрифта для fontawesome.

Чтобы скопировать шрифты в папку assets/webfonts/, добавьте следующее правило в конфиг webpack.config.js:

module: {
        rules: [
            // ...
            {
                test: /\.(ttf|eot|svg|woff|woff2)(\?[\s\S]+)?$/,
                include: path.resolve(__dirname, './node_modules/@fortawesome/fontawesome-free/webfonts'),
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'webfonts',
                        publicPath: '../webfonts',
                    },
                }
            },
        ],
    },

SweetAlert2 установка/настройка

SweetAlert2 красивый, адаптивный, оегко изменяемый и расширяемый js компоненты для всплывающих уведомлений.

Чобы установить SweetAlert2, выполните в консоли:

npm install sweetalert2

Импортируйте sweetalert2 и подключите Swal в глобальную область видимости:

window.Swal = require('sweetalert2');

Как пользоваться:

Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
);

DataTables установка/настройка

DataTables.net очень гибкий jQuery плагин для работы с табличными данными.

Не забываем в первую очередь настроить сам jQuery.

Для установки DataTables, runвыполните в консоли

npm install datatables.net-bs4 datatables.net-responsive-bs4 datatables.net-select-bs4

Добавьте новое подключение в webpack.config.js:

module.exports = {
    entry: {
        'layout/layout': './templates/layout/layout.js',     // <- jquery 
        'layout/datatables': './templates/layout/datatables.js', // <-- добавьте эту строку
        'user/user-list': './templates/user/user-list.js', // <-- пример файла со списком пользователей
        // other pages ...
    },
    // ...
};

Импортируйте плагин в глобальную точку входа templates/layout/datatables.js:

window.$.fn.DataTable = require('datatables.net-bs4');
require('datatables.net-bs4/css/dataTables.bootstrap4.css');

Создайте новый Twig шаблон templates/user/user-list.twig:

{% extends "layout/layout.twig" %}

{% block css %}
    {% webpack_entry_css 'layout/datatables' %}
{% endblock %}

{% block js %}
    {% webpack_entry_js 'layout/datatables' %}
    {% webpack_entry_js 'user/user-list' %}
{% endblock %}

{% block content %}
  <div id="content" class="container">
        <div class="row">
            <div class="col-md-12">
                <h1><i class="fas fa-user"></i> User list</h1>
                <hr>
                <table id="my-data-table" class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
                    <thead>
                    <tr>
                        <th>Username</th>
                        <th>E-Mail</th>
                        <th>First name</th>
                        <th>Last name</th>
                    </tr>
                    <tfoot></tfoot>
                </table>
                <p></p>
            </div>
        </div>
{% endblock %}

Вызовите плагин в файле templates/user/user-list.js:

$(function() {
    $('#my-data-table').DataTable();
});

Babel установка/настройка

Установка:

npm install --save-dev babel-loader @babel/core @babel/preset-env webpack

Добавьте следующие строки в webpack.config.js:

 module: {
        rules: [
            // ...
            {
                test: /\.js$/,
                exclude: path.resolve('node_modules'),
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env']
                        ]
                    }
                }]
            },
        ],
    },