Установка Encore
Дата обновления перевода: 2022-01-19
Установка 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, вам понадобится создать все эти новые каталоги и файлы самостоятельно, cледуя инструкциям в следующем разделе.
Установка 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
*
* Добавьте одну запись 1 для каждой "страницы" вашего приложения
* (включая те, которые есть на каждой странице - например, "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, которые включают функции вроде версионирования и разделения кода (split chunks).