wp-scripts<\/code>: een krachtig pakket aan tools dat een revolutie teweeg kan brengen in de manier waarop jouw bureau de ontwikkeling van WordPress benadert.<\/p>\nDeze uitgebreide gids gaat in op de mogelijkheden van wp-scripts<\/code> en verkent technieken voor je bouwprocessen. Er wordt ingegaan op geoptimaliseerde compilatie en bundeling, geautomatiseerd linten, unit testen en nog veel meer – dit alles zal je aanspreken als je jongleert met meerdere WordPress projecten.<\/p>\n<\/div><\/kinsta-auto-toc>\nHet concept van een ‘bouwproces’<\/h2>\n
Laten we, voordat we naar de specifieke kenmerken van wp-scripts<\/code> kijken, eerst het bredere concept van het bouwproces van je webontwikkeling begrijpen. Dit bestaat uit een reeks geautomatiseerde taken om van je sourcecode een productieklare app of website te maken.<\/p>\nEr zijn bijvoorbeeld veel taken die op deze manier profiteren van automatisering:<\/p>\n
\n- Het compileren van moderne JavaScript naar browser-compatibele code.<\/li>\n
- CSS preprocessortalen (bijvoorbeeld Sass<\/a>) omzetten in standaard CSS.<\/li>\n
- Minimaliseren en optimaliseren van assets zoals JavaScript<\/a>, CSS en media.<\/li>\n
- Linters uitvoeren om potenti\u00eble fouten op te sporen en coderingsstandaarden af te dwingen.<\/li>\n
- Het uitvoeren van unit tests<\/a> om een betere functionaliteit van de code te garanderen.<\/li>\n<\/ul>\n
Dit zijn goede aspecten om te automatiseren voor elke ontwikkelworkflow<\/a>, maar voor bureaus is het proces net zo cruciaal. Om te beginnen kun je consistentie behouden tussen meerdere projecten (en je team).<\/p>\nJe kunt ook sneller ontwikkelen en implementeren en al je projecten onderhouden door gebruik te maken van die consistentie, zelfs de meest complexe projecten. Voor de eindgebruiker zullen de geoptimaliseerde prestaties die je krijgt doorsijpelen naar hun algehele ervaring.<\/p>\n
Gewoonlijk ‘knutselt’ je bureau custom bouwprocessen in elkaar met tools zoals Gulp<\/a>, Grunt<\/a> of zelfs handmatige processen. Deze benaderingen kunnen echter vaak leiden tot inconsistenties tussen projecten, om nog maar te zwijgen van de aanzienlijke onderhoudsoverhead.<\/p>\nwp-scripts: een workflow-wisselaar voor WordPress ontwikkeling binnen een bureau<\/h2>\n
In de context van WordPress kan een bouwproces ook een aanzienlijke stroomlijning bieden voor de ontwikkeling van thema’s en plugins. Hiermee kun je moderne tools en werkwijzen gebruiken en tegelijkertijd zorgen voor platformcompatibiliteit.<\/p>\n
Het @wordpress\/scripts<\/code> pakket – wp-scripts<\/code> in dit artikel – is een verzameling configuratiebestanden en scripts waarmee je het bouwproces voor WordPress projecten kunt vereenvoudigen.<\/p>\n![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/wp-scripts.png\")
Deel van een wp-scripts referentie voor de verschillende scripts die een project zal gebruiken.<\/figcaption><\/figure>\nHet Make WordPress Core team ontwikkelt en onderhoudt het pakket, dat een integraal onderdeel is van de Block en Site Editors. Het beste van alles is dat je het ook kunt gebruiken voor het ontwikkelen van aangepaste thema’s en plugins.<\/p>\n
Voor het benaderen van WordPress ontwikkeling op schaal binnen een bureau, zal wp-scripts<\/code> een centraal onderdeel zijn van de workflow. Het is meer dan een eenvoudig bouwprogramma; het is een uitgebreide oplossing voor moderne WordPress projecten die aansluit bij de behoefte aan een geavanceerde ontwikkelworkflow.<\/p>\nDe belangrijkste functionaliteit van wp-scripts<\/h3>\n
Naarmate meer moderne JavaScript praktijken doordringen in het WordPress ecosysteem, hebben we meer gestandaardiseerde bouwtools nodig om ze toe te passen. Een uniforme build toolset in de vorm van wp-scripts<\/code> komt het hele WordPress ontwikkel-ecosysteem ten goede.<\/p>\nAls zodanig biedt wp-scripts<\/code> een reeks features die de ontwikkeling van WordPress effici\u00ebnter maken:<\/p>\n\n- ‘Zero-config’ setup.<\/strong> Je kunt beginnen zonder complexe webpack<\/a> configuraties.<\/li>\n
- Moderne JavaScript ondersteuning.<\/strong> Je ES6 code wordt getranspileerd voor browsercompatibiliteit en geeft je meer vertrouwen in de nauwkeurigheid ervan.<\/li>\n
- Ingebouwde CSS verwerking.<\/strong> Als je CSS preprocessors zoals Sass gebruikt, krijg je out of the box ondersteuning.<\/li>\n
- Tools voor codekwaliteit.<\/strong> Het pakket integreert zowel ESLint als Prettier<\/a> voor consistente codestijl en -kwaliteit.<\/li>\n
- Tools voor testen.<\/strong> Je hebt Jest<\/a> beschikbaar in het pakket voor eenheidstesten en eenvoudige uitvoering.<\/li>\n
- Hot reloading.<\/strong> Als je de mogelijkheid hebt om je wijzigingen live te herladen, kan dit je ontwikkeltijd versnellen.<\/li>\n<\/ul>\n
In combinatie biedt wp-scripts<\/code> veel belangrijke voordelen voor bureaus die meerdere WordPress projecten beheren. Je kunt bijvoorbeeld je ontwikkelomgeving standaardiseren voor elk project en het bouwproces ook repliceren voor nieuwe projecten. Met het pakket kun je de dependencies van je buildtool centraliseren, waardoor updates en beveiligingspatches beter beheersbaar zijn.<\/p>\nIn het algemeen kun je je minder zorgen maken over compatibiliteitsproblemen, je installatietijd verkorten en veel van de typische fouten die je maakt tijdens het minder gestroomlijnde bouwproces elimineren.<\/p>\n
Wp-scripts vergelijken met een typisch WordPress ontwikkelproces<\/h3>\n
Bij een typische WordPress ontwikkeling wordt vaak gebruik gemaakt van handmatige enqueuing voor scripts en stijlen<\/a>. Daarnaast schrijf je waarschijnlijk vanilla JavaScript<\/a> of jQuery<\/a> en vertrouw je op externe bouwprogramma’s – of helemaal geen bouwproces.<\/p>\nDaarentegen biedt wp-scripts een moderne, ge\u00efntegreerde aanpak op bijna elk gebied:<\/p>\n
![\"De](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/devkinsta-interface.png\")
![\"Een](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/npm-init.png\")