Первый пример

Представьте, что у вас есть простой проект с одним CSS- и одним JS0-файлом, организованными в каталоге assets/:

  • assets/js/main.js
  • assets/css/global.scss

С Encore мы можем с лёгкостью уменьшить эти файлы, предварительно обработать global.scss через Sass и многое другое.

Конфигурирование Encore/Webpack

Создайте новый файл, под названием webpack.config.js в корне вашего проекта. Внутри, используйте Encore, чтобы помочь сгенерировать вашу конфигурацию Webpack.

 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
// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    // каталог, где будут храниться все скомпилированные ресурсы
    .setOutputPath('web/build/')

    // публичный путь к каталогу (относительно корневого документа dir вашего проекта)
    .setPublicPath('/build')

    // очистить outputPath dir перед каждым построением
    .cleanupOutputBeforeBuild()

    // будет выводиться, как web/build/app.js
    .addEntry('app', './assets/js/main.js')

    // будет выводиться, как web/build/global.css
    .addStyleEntry('global', './assets/css/global.scss')

    // позволить обработку файлов sass/scss
    .enableSassLoader()

    // позволить приложениям наследования использовать $/jQuery в качестве глобальной переменной
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // создать хешированные имена файлов (например, app.abc123.css)
    // .enableVersioning()
;

// экспортировать финальную конфигурацию
module.exports = Encore.getWebpackConfig();

Это уже насыщенная настройка: она выводит 2 файла, использует предпроцессор Sass и включает исходные карты, чтобы помочь с отладкой.

Чтобы построить ресурсы, используйте исполнимое encore:

1
2
3
4
5
6
7
8
# единожды скомпилировать ресурсы
$ ./node_modules/.bin/encore dev

# автоматически рекомпилировать ресурсы при изменении файлов
$ ./node_modules/.bin/encore dev --watch

# компилировать ресурсы, но также уменьшать и оптимизировать их
$ ./node_modules/.bin/encore production

Note

Перезапускайте encore каждый раз, когда обновляете ваш файл webpack.config.js.

На самом деле, чтобы использовать enableSassLoader(), вам нужно будет установить ещё несколько пакетов. Но Encore скажет вам, что именно вам нужно.

После выполнения одной из этих команд, вы теперь можете добавлять теги script и link к новым скомпилированным ресурсам (например, /build/global.css и /build/app.js). В Symfony, используйте помощника asset():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{# base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
        <link rel="stylesheet" href="{{ asset('build/global.css') }}">
    </head>
    <body>
        <!-- ... -->
        <script src="{{ asset('build/app.js') }}"></script>
    </body>
</html>

Требование модулей JavaScript

Webpack - это модульный упаковщик... что означает, что вы можете require другие файлы JavaScript. Для начала, создайте файл, экспортирующий функцию:

1
2
3
4
// assets/js/greet.js
module.exports = function(name) {
    return `Yo yo ${name} - welcome to Encore!`;
};

Мы будем использовать jQuery, чтобы напечатать это сообщение на странице. Установите его через:

1
$ yarn add jquery --dev

Отлично! Используйте require(), чтобы импортировать jquery и greet.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// assets/js/main.js

// загружает пакет jquery из node_modules
var $ = require('jquery');

// импортировать функцию из greet.js (расширение .js необязательно)
// ./ (or ../) means to look for a local file
var greet = require('./greet');

$(document).ready(function() {
    $('h1').html(greet('john'));
});

Вот и всё! Когда вы строите ваши ресурсы, jQuery и greet.js будут автоматически добавлены к файлу вывода (app.js). Для общих библиотек, вроде jQuery, вы можете также захотеть создать общую запись для лучшей производительности.

Требование CSS-файлов из JavaScript

Вы также можете требовать CSS-файлы из вашего JavaScript:

1
2
3
4
5
// assets/js/main.js
// ...

// будет выведен CSS-файл с таким же именем, как запись js
require('../css/main.scss');

В этом случае, main.js добавляется в запись, названную app в webpack.config.js:

1
2
3
Encore
    // ...
    .addEntry('app', './assets/js/main.js')

Как только вы требуете CSS-файл, создаются оба файла: app.js и app.css. Вам понадобится добавить тег ссылки в файл app.css в ваших шаблонах:

1
2
<link rel="stylesheet" href="{{ asset('build/global.css') }}">
+ <link rel="stylesheet" href="{{ asset('build/app.css') }}">

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.