Установка Encore

Дата оновлення перекладу 2022-05-17

Установка Encore

Для початку, переконайтеся в тому, що ви встановили Node.js. За бажанням, ви також можете встановити менеджер пакетів Yarn. В наступних розділах ви завжди будете бачити команди і для npm, і для yarn, але вам необхідно буде виконувати лише одну з них.

Установка Encore у додатку Symfony

Виконайте ці команди, щоб встановити залежності PHP та JavaScript у вашому проекті:

1
2
3
4
5
6
7
$ composer require symfony/webpack-encore-bundle

# якщо ви використовуєте менеджер пакетів Yarn
$ yarn install

# якщо ви використовуєте менеджер пакетів npm
$ npm install

Якщо ви використовуєте Symfony Flex , це встановить та підключить WebpackEncoreBundle, створіть каталог assets/, додайте файл webpack.config.js, та додайте node_modules/ до .gitignore. Ви можете пропустити решту цієї статті та йти писати ваш перший JavaScript і CSS, прочитавши Encore: Налаштування вашого проекту!

Якщо ви не використовуєте Symfony Flex, вам знадобиться створити всі ці нові каталоги та файли самостійно, слідуючи інструкціям у наступному розділі.

Установка Encore у не-Symfony додатках

Встановіть Encore у проект через Yarn:

1
2
3
4
5
# якщо ви використовуєте менеджер пакетів Yarn
$ yarn add @symfony/webpack-encore --dev

# якщо ви використовуєте менеджер пакетів npm
$ npm install @symfony/webpack-encore --save-dev

Ця команда створює (або змінює) файл package.json і завантажує залежності у каталог node_modules/. Yarn також створює/оновлює yarn.lock (під назвою package-lock.json, якщо ви використовуєте npm).

Tip

Ви маєте відправити package.json та yarn.lock (або package-lock.json при використанні npm) контролю версій, але не ігнорувати node_modules/.

Створення файлу webpack.config.js

Далі, створіть новий файл webpack.config.js в корені вашого проекту. Це головний файл конфігурації як дла Webpack, так і для Webpack Encore:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
const Encore = require('@symfony/webpack-encore');

// Вручну сконфігуруйте операційне середовище, якщо воно ще не сконфігуроване командою "encore".
// Це корисно коли ви використовуєте інструменти, які покладаються на файл webpack.config.js.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // каталог, де будуть зберігатися скомпільовані ресурси
    .setOutputPath('public/build/')
    // публічний шлях, який використовується веб-сервером для доступу до шляху виведення
    .setPublicPath('/build')
    // необхідно лише для розгортання CDN або суб-каталогу
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Додайте один запис для кожної "сторінки" вашого додатку
     * (включно з тими, які є на кожній сторінці - наприклад, "app")
     *
     * Кожний запис стане в результаті одним файлом JavaScript (наприклад, app.js)
     * та одним файлом CSS (наприклад, app.css) якщо ваш JavaScript імпортує CSS.
     */
    .addEntry('app', './assets/app.js')
    //.addEntry('page1', './assets/page1.js')
    //.addEntry('page2', './assets/page2.js')

    // Якщо підключений, Webpack "розділяє" ваші файли на менші частини для більшої мінімізації.
    .splitEntryChunks()

    // буде вимагати додатковий тег скрипту для runtime.js
    // але, вам скоріш за все це не буде потрібно, хіба що ви не створюєте застосунок однієї сторінки
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Підключіть та сконфігуруйте інші функції нижче. Щоб побачити повний перелік
     * функцій, див.:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // вмикає хешовані імена файлів (наприклад, app.abc123.css)
    .enableVersioning(Encore.isProduction())

    // вмикає полізаповнення @babel/preset-env
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // вмикає підтримку Sass/SCSS
    //.enableSassLoader()

    // розкоментуйте, якщо ви використовуєте TypeScript
    //.enableTypeScriptLoader()

    // розкоментуйте, щоб отримати атрибути integrity="..." вашого скрипту та тегів посилання
    // вимагає WebpackEncoreBundle 1.4 або новіше
    //.enableIntegrityHashes(Encore.isProduction())

    // розкоментуйте, якщо у вас є проблеми з плагіном jQuery
    //.autoProvidejQuery()

    // розкоментуйте, якщо ви використовуєте API Platform Admin (композитор вимагає api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/admin.js')
;

module.exports = Encore.getWebpackConfig();

Далі, відкрийте новий файл assets/app.js, який містить деякий код JavaScript та імпортує деякий:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// assets/app.js
/*
 * Вітаємо в головному файлі JavaScript вашого додатку!
 *
 * Ми рекомендуємо додавати вбудовану версію цього файлу JavaScript
 * (та його CSS-файл) у ваш базовий макет (base.html.twig).
 */

// будь-який CSS, який ви імпортуєте, буде виводитися в один css-файл (в цьому випадку - app.css)
import './styles/app.css';

// Потрібен jQuery? Встановіть його за допомогою "yarn и jquery", а потім розкоментуйте його для імпорту.
// import $ from 'jquery';

console.log('Hello Webpack Encore! Edit me in assets/app.js');

Додайте новий файл assets/styles/app.css:

1
2
3
4
/* assets/styles/app.css */
body {
    background-color: lightgray;
}

Ви налаштуєте та дізнаєтеся більше про ці файли у Encore: Налаштування вашого проекту.

Caution

Деяка документація використовуватиме функції, специфічні для Symfony або WebpackEncoreBundle Symfony. Вони необов'язкові та є особливими способами вказування на шляхи ресурсів, згенерованих Encore, які вмикають функції на кшталт версіонування та розділення коду.