Instalace frontend assetů pomocí Composeru

Ahoj všem,

napsal jsem plugin pro Composer, který umožňuje vytáhnout statické soubory (CSS, JS,…) ze složky /vendor do složky /www. Plugin stačí nainstalovat jako závislost projektu a on pak automaticky při aktualizaci balíčků aktualizuje i assety ve složce /www.

K čemu je to dobré?

• můžete poslat Bower do věčných lovišť a instalovat frontend knihovny pomocí jednoho z nejlepších package managerů™
• pokud máte projekt jenom v PHP, můžete všechny závislosti spravovat na jednom místě
• server-side i client-side budou používat stejné verze knihoven (viz nette/forms vs. netteForms.js)
• při commitování composer.lock budete mít jistotu, že všechny frontend assety budou nainstalovány vždy ve správné verzi

S čím plugin nepomůže?

• neřeší spojování a kompilaci JS/CSS/LESS/… souborů – tohle každý řeší po svém a navíc pro tuhle činnost existuje dostatek jiných nástrojů

Instalace

composer require frontpack/composer-assets-plugin

Konfigurace

Konfiguraci lze rozdělit do 2 částí:

1. konfigurace konkrétních balíčků – balíčky definují seznam souborů a složek, které bude plugin instalovat
2. konfigurace projektu – programátor definuje, kam má plugin assety umístit

1) konfigurace konkrétních balíčků

Aby plugin věděl, které soubory má přetáhnout do složky www/, musí balíčky v composer.json uvést jejich seznam. Pro nette/forms by to vypadalo nějak takto:

{
	"name": "nette/forms",
	"extra": {
		"assets-files": [
			"src/assets/netteForms.js"
		]
	}
}

Po instalaci nette/forms se soubor netteForms.js objeví v umístění assets/nette/forms/netteForms.js.

2) konfigurace projektu

Změna složky s assety

Ve výchozím nastavení plugin nainstaluje soubory do složky assets hned vedle složky vendor. To nemusí být vždycky užitečné a tak je možné cílové umístění upravit. Stačí v projektovém composer.json nastavit konfigurační volbu assets-dir. Pro standardní strukturu Nette aplikace by nastavení mohlo vypadat nějak tahle (cesta je relativní vzhledem k umístění složky vendor):

{
	"config": {
		"assets-dir": "www/assets"
	}
}

Podpora pro nekompatibilní balíčky

Málokterý balíček obsahuje seznam souborů pro instalaci a tak plugin umožňuje definovat tento seznam v projektovém composer.json:

{
	"config": {
		"assets-files": {
			"nette/forms": [
				"src/assets/netteForms.js"
			],
			"o5/grido": [
				"assets/dist"
			]
		}
	}
}

Díky tomu dokáže plugin pracovat i s nepodporovanými balíčky. Nastavení uvedené v projektovém composer.json má nejvyšší prioritu, takže lze zcela přepsat seznam souborů poskytovaný konkrétními balíčky.

Protože je otrava psát seznam souborů svépomocí, obsahuje plugin předpřipravený seznam souborů pro vybrané nekompatibilní balíčky, aktuálně pro:

• components/jquery
• nette/forms
• o5/grido

Plugin je aktuálně ve verzi 0.9.1, budu rád, když ho vyzkoušíte a podělíte se o bug reporty, feature requesty a pull requesty :) Berte to zatím jako koncept.

Upozornění pro uživatele Windows – nemám plugin otestovaný na Windows. Místo kopírování souborů plugin vytváří pouze relativní symlinky do složky vendor/ – na Windows to pravděpodobně nebude fungovat. Časem to plánuju vyřešit pomocí instalačních strategií. mělo by být vyřešeno

Editoval janpecha (7. 3. 2017 13:04)