Webpack

Вы можете использовать Webpack для интеграции UIkit в ваш проект. Предполагается, что у вас уже установлен Node.js и NPM.

Файловая структура

Для базовой настройки проекта создайте следующие файлы:

app/
    index.js
index.html
package.json

Следующие команды создадут и заполнят файл package.json. Файл package.json содержит зависимости для Yarn. Включаем UIkit и Webpack.

mkdir uikit-webpack && cd uikit-webpack
yarn init -y
yarn add uikit
yarn add --dev webpack

В качестве входного файла создайте app/index.js с таким содержанием:

import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';

// Подключение иконок
UIkit.use(Icons);

// компоненты могут быть вызваны из импортированной ссылки UIkit
UIkit.notification('Hello world.');

Вы можете подключить UIkit без размещения файлов в вашем проекте. Вместо этого мы можем использовать загрузчик Bundle, который будет создан Webpack. Задача Bundle — подлючение различных библиотек без их размещения в проекте. Также он следит за обновлениями. Создайте файл index.html и заполните его следующим содержимым: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример страницы</title>
        <link rel="stylesheet" href="node_modules/uikit/dist/css/uikit.min.css">
    </head>
    <body>

        <div class="uk-container">
            <div class="uk-card uk-card-body uk-card-primary">
                <h3 class="uk-card-title">Пример заголовка</h3>

                <button class="uk-button uk-button-default" uk-tooltip="title: Hello World">Кнопка</button>
            </div>
        </div>

        <script src="dist/bundle.js"></script>
    </body>
</html>

Внимание Для простоты описания мы подключили скомпилированный CSS. В реальном проекте лучше использовать Less или Sass.

Конфигурируем Webpack

Для настроийки Webpack для компиляции JS из входного файла app/index.js в выходной файл dist/bundle.js, создайте файл webpack.config.js и поместите в него эти строки:

var path = require('path');

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

Теперь можно запустить Webpack в вашем проекте

./node_modules/.bin/webpack # Запустите веб-пакет для локальной установки проекта
.\node_modules\.bin\webpack # Команда запуска веб-пакета на Windows
webpack # В случае глобальной установки Webpack

На этом базовая настройка проекта завершена. Откройте файл index.html в своем браузере и убедитесь в том, что к странице применен базовый стиль UIkit. Если все прошло успешно, в верхней части вашей страницы появится соответствующее уведомление.