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

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

  • assets/js/app.js
  • assets/css/app.scss

С Encore вам нужно думать о CSS, как о зависимости вашего JavaScript. Это означает, что вы будете требовать тот CSS, который вам нужно, изнутри JavaScript:

1
2
3
4
// assets/js/app.js
require('../css/app.scss');

// ...здесь остаток кода JavaScript

С Encore, мы можем с лёгкостью уменьшить эти файлы, предварительно обработать app.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('public/build/')

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

    // создаст public/build/app.js и public/build/app.css
    .addEntry('app', './assets/js/app.js')

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

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

    .enableSourceMaps(!Encore.isProduction())

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

    // показать уведомления ОС при окончании/неудаче построения
    .enableBuildNotifications()

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

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

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

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

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

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

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

# более краткая версия 2 вышеописанных команд
$ yarn run encore dev
$ yarn run encore dev --watch
$ yarn run encore production

Note

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

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

После выполнения одной из этих команд, вы теперь можете добавлять теги script и link к новым скомпилированным ресурсам (например, /build/app.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/app.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/app.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() {
    $('body').prepend('<h1>'+greet('john')+'</h1>');
});

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

Множественные записи JavaScript

Предыдущий пример - наилучший способ, чтобы справляться с ОП (одностраничными приложениями) и очень простыми приложениями. Однако, по мере роста вашего приложения, вамможет захотеться иметь JavaScript или CSS, относящийся к конкретным страницам (например, главная страница, блог, магазин и т.д.). Чтобы справиться с этим, добавьте новую "запись" для каждой страницы, которой нужен отдельный JavaScript или CSS:

1
2
3
4
5
6
Encore
    // ...
    .addEntry('homepage', './assets/js/homepage.js')
    .addEntry('blog', './assets/js/blog.js')
    .addEntry('store', './assets/js/store.js')
;

Если эти записи включают в себя файлы CSS/Sass (например, homepage.js требует assets/css/homepage.scss), то для каждого будут сгенерированы 2 файла: (например, build/homepage.js и build/homepage.css).

Продолжайте!

Вернитесь к Топ-списку Encore, чтобы узнать больше и добавить новые функции.

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