<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Сборка JavaScript модулей с помощью Webpack

Сборка JavaScript модулей с помощью Webpack

Доброго времени суток! В данной статье я расскажу Вам как можно собрать все JavaScript модули в один js-файл, который затем будет подключаться на странице.

Вы можете спросить - а зачем это нужно? Отвечаю - современная фронтенд разработка ушла далеко вперед. Браузерные JavaScript-приложения стали больше, количество файлов и строк кода в них измеряется тысячами. Поэтому, чтобы с ними было проще работать, используют модули - файлы JavaScript кода, которые включают в себя логику в рамках какой-то определенной сферы. Модулей много и все их подключать на страницу по отдельности нехорошо, так как это увеличит время ответа клиенту и в конечном итоге может привести к тому, что пользователь уйдет с сайта. Поэтому придумали такие инструменты - как сборщики (бандлеры) модулей для JavaScript. С помощью них - несколько отдельных модулей можно собрать в один JS-файл - бандл (пакет), который браузер быстрее загрузить и быстрее выполнит.

Сборщиков модулей существует большое количество, некоторые из них это - Browserify, Webpack, Parcel. Далее я покажу Вам как можно собрать JS-пакет (бандл) с помощью Webpack.

В корне проекта есть папка src со следующим содержимым:

app.js
index.html
Test.js

Код app.js

// импортируем модуль
import Test from './Test.js';


// ссылка на DOM
const appDOM = document.querySelector('#app');

// создаем объект класса Test
const test = new Test();

// записываем значение вызова метода в DOM
appDOM.innerHTML = test.render()

Код Test.js

class Test 
{
    render() {
        return ('Я простой JavaScript класс-модуль');
    }
}
export default Test;

Код index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Далее нам нужно установить сам Webpack и средство командной строки, с помощью которого мы будем непосредственно работать с Webpack. Для этого надо выполнить команду yarn или npm install, предварительно создав package.json файл с содержанием указанным ниже:

файл package.json

{
    "name": "js-bundle-all-modules",
    "version": "1.0.0",
    "main": "src/app.js",
    "license": "MIT",
    "scripts": {
        "dev": "webpack --mode development",
        "start": "webpack-dev-server --open",
        "prod": "webpack --mode production"
    },
    "devDependencies": {
        "@babel/core": "^7.11.4",
        "@babel/plugin-proposal-class-properties": "^7.10.4",
        "@babel/preset-env": "^7.11.0",
        "babel-loader": "^8.1.0",
        "html-webpack-plugin": "^4.3.0",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }
}

В общем, уже можно запускать команду yarn dev в консоли - и проект будет собран в папке dist. Если вы заглянете в нее, то увидите файлы app.bundle.js и index.html. Если запустить команду yarn prod - то проект соберется в режиме production, результат - минифицированный и трудный для чтения человеком код, но очень хорошо понятный браузеру. Если же, запустить команду yarn start - то запустится сервер разработки, который откроет браузер. Теперь любые изменения вносимые в файлы проекта, будут приводить к автоматической пересборке и отображению результатов в браузере.

Но мы пойдем дальше и настроим Webpack несколько по своему:

Код файла webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// конфигурация Webpack - это обычный JS-модуль
module.exports = {

    entry: {
        app: './src/app.js', // файл с которого начинается сборка
    },

    output: {
        filename: '[name].bundle.js',            // итоговый собранный пакет 
        path: path.resolve(__dirname, './dist'), // папка куда помещаем собранный пакет
    },

    devtool: 'inline-source-map', // карты кода для отладки

    devServer: {
        contentBase: './dist', // папка из которой будет брать контент сервер разработки
    },

    // правила преобразования
    module: {
        rules: [
            {
                test: /\.js$/,           // для всех javascript-файлов
                exclude: /node_modules/, // за исключением папки с загружаемыми пакетами
                use: {
                    loader: 'babel-loader', // используем транспайлер Babel 
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            }
        ]
    },
    
    plugins: [
        // данный плагин вставляет ссылку на собранный пакет в html шаблон
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
    ]
};

Вот таким образом, мы собрали все наши модули в один пакет с помощью Webpack.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.