Symfony je pěkný PHP framework. PHP sice běží na serveru, ale Symfony framework řeší i frontendovou část. Konkrétně jeho část Webpack Encore.
Webpack je nástroj na přehledné vytváření kompletního frontendu. Pod označení frontend řadím HTML, CSS/SASS, Javascript a statické soubory (obrázky).
Webpack Encore je rozšíření Webpacku o konfiguraci pomocí jednoduchých metod. Samotný Webpack je velice komplikovaný nástroj a přechod na něj z Gulpu mi zabral hromadu času bádání a zkoušení. Na chuť jsem mu přišel až díky Encore. A to nepoužívám Symfony, ale jiný PHP framework. Webpack Encore je možné snadno používat také pro projekty bez Symfony, např. Laminas (původně Zend Framework).
Instalace Webpack Encore
Kompletní návod instalace Webpack Encore. Můj návod zde:
Node.js instalace
npm i @symfony/webpack-encore -D
Vytvoření konfiguračního souboru webpack.config.js v root složce projektu
V konfiguračním souboru používám
- .splitEntryChunks() – splitEntryChunks rozdělí výsledný JS do více souborů a pro každý entrypoint zapíše seznam souborů do /build/entrypoints.json V PHP si pak načítám skriptem soubor entrypoints.json a provedu vyrenderování všech linků pro CSS soubory a script tagu pro JS soubory souborů v šabloně pro entrypoint.
- .setOutputPath(‚public/build/‘) – cesta pro build
- .setPublicPath(‚/build‘) – veřejný adresář pro build JS, CSS a images
- .enableVueLoader() – používám Vue.js komponenty, lze zadat verzi 2 nebo 3
- .enableSassLoader() – používám kvalitní preprocesovaný Sass pro styly a dávám je do složky /assets/scss/
- .copyFiles() – kopírování /assets/images do /public/build/images
from: ‚./assets/images‘,
to: ‚images/[path][name].[ext]‘,
Encore bude chtít doinstalovat sass-loader, ale on si sám o to řekne, to je na tom nejkrásnější, vygeneruje přímo instalační příkaz, pecka. - .enablePostCssLoader() – používám plugin autoprefixer, abych nemusel psát styly pro různé verze prohlížečů
- .enableEslintLoader(() => {}, { lintVue: true }) – debugging přes ESLint četně .vue souborů, bude chtít doinstalovat eslint-loader
Na renderování mám vlastní PHP skript a nepoužívám ten z balíčku webpack-encore-bundle. Pokud používáte Symfony, tak se dá použít PHP balíček: composer require symfony/webpack-encore-bundle
Ale balíček webpack-encore-bundle chce šablony ve .twig a já používám pouze .phtml, takže to byl důvod, proč jsem si napsal vlastní EntryFilesHelper.
Ještě je třeba přidat do souboru .gitignore (pro Gitlab) toto:
/public/build/
Jak používat Webpack Encore
Po instalaci si přidám do package.json
"dev-server": "encore dev-server", "dev": "encore dev", "watch": "encore dev --watch", "build": "encore production --progress"
Do souboru webpack.config.js si přidávám entrypointy např. .addEntry(‚app‘, ‚./assets/app.js‘)
A spustím skript „watch“. Pak už jen upravuji vytvořené skripty v /assets a změny se projeví ihned. Deploy zdrojových kódů mám řešený přes Gitlab CI/CD, takže si do souboru .gitlab-ci.yml přidám.
script:
- cd $TMP_DIR
- npm install
- ./node_modules/.bin/encore production
A je hotovo. Skvělý nástroj pro rychlý vývoj.
Ještě pár poznámek
- Po přidání dalšího entrypointu do webpack.config.js je potřeba spustit znovu „watch“ (Encore neumí sledovat změny v konfiguraci).
- Pokud v nějakém projektu nemám možnost „buildit“ assets v pipeline, musím spustit „build“, přidat nové soubory v /public/build do gitu a pushnout adresář.