{"id":70519,"date":"2024-12-02T06:25:27","date_gmt":"2024-12-02T09:25:27","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=70519&#038;preview=true&#038;preview_id=70519"},"modified":"2024-12-10T11:30:23","modified_gmt":"2024-12-10T14:30:23","slug":"desenvolvimento-wp-scripts","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/","title":{"rendered":"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts"},"content":{"rendered":"<p>O trabalho de desenvolvimento WordPress para ag\u00eancias pode ser competitivo mesmo nas melhores circunst\u00e2ncias. Ele exige m\u00e1xima efici\u00eancia e consist\u00eancia em diversos projetos de clientes.<\/p>\n<p>Independentemente da experi\u00eancia que voc\u00ea tenha como desenvolvedor, o gerenciamento de todo um portf\u00f3lio de temas e plugins personalizados ainda exige um esfor\u00e7o constante no que se refere \u00e0 otimiza\u00e7\u00e3o do fluxo de trabalho. \u00c9 a\u00ed que entra o <code>wp-scripts<\/code>: um poderoso conjunto de utilit\u00e1rios que pode revolucionar a forma como sua ag\u00eancia aborda o desenvolvimento do WordPress.<\/p>\n<div class=\"group\/conversation-turn relative flex w-full min-w-0 flex-col agent-turn\">\n<div class=\"flex-col gap-1 md:gap-3\">\n<div class=\"flex max-w-full flex-col flex-grow\">\n<div class=\"min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&#038;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"8ef09e10-20d4-4de6-9d66-22bec5ff4b1b\" data-message-model-slug=\"gpt-4o\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<p>Este guia completo explora os recursos do <code>wp-scripts<\/code>\u00a0e apresenta t\u00e9cnicas para otimizar seus processos de desenvolvimento. Ele inclui desde builds e empacotamentos eficientes at\u00e9 linting automatizado, testes unit\u00e1rios e muito mais \u2014 tudo projetado para desenvolvedores que gerenciam diversos projetos WordPress de alto impacto.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O conceito de um \u2018processo de build\u2019<\/h2>\n<p>Antes de analisarmos as especificidades do <code>wp-scripts<\/code>, vamos entender o conceito mais amplo do processo de build de desenvolvimento da web. Ele consiste em uma s\u00e9rie de tarefas automatizadas para ajudar voc\u00ea a transformar seu c\u00f3digo-fonte em um aplicativo ou site pronto para produ\u00e7\u00e3o.<\/p>\n<p>Por exemplo, h\u00e1 muitos trabalhos que se beneficiam da automa\u00e7\u00e3o dessa forma:<\/p>\n<ul>\n<li>Compila\u00e7\u00e3o de JavaScript moderno em c\u00f3digo compat\u00edvel com o navegador.<\/li>\n<li>Transpilar linguagens de pr\u00e9-processamento de CSS (<a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a>, por exemplo) para CSS padr\u00e3o.<\/li>\n<li>Reduzir e otimizar ativos como <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, CSS e m\u00eddia.<\/li>\n<li>Executar linters para detectar poss\u00edveis erros e aplicar padr\u00f5es de codifica\u00e7\u00e3o.<\/li>\n<li>Executar <a href=\"https:\/\/kinsta.com\/pt\/blog\/testes-unidade-laravel\/\">testes unit\u00e1rios<\/a> para garantir uma melhor funcionalidade do c\u00f3digo.<\/li>\n<\/ul>\n<p>Esses s\u00e3o bons aspectos a serem automatizados em qualquer <a href=\"https:\/\/kinsta.com\/pt\/blog\/fluxo-de-trabalho-wordpress\/\">fluxo de trabalho de desenvolvimento<\/a>, mas para as ag\u00eancias, o processo \u00e9 igualmente crucial. Para come\u00e7ar, voc\u00ea pode manter a consist\u00eancia em v\u00e1rios projetos (e na sua equipe).<\/p>\n<p>Voc\u00ea tamb\u00e9m pode desenvolver e implantar em ciclos mais r\u00e1pidos e manter todos os seus projetos aproveitando essa consist\u00eancia, mesmo os mais complexos. Para o usu\u00e1rio final, o desempenho otimizado que voc\u00ea obt\u00e9m refletir\u00e1 na experi\u00eancia geral dele.<\/p>\n<p>Normalmente, sua ag\u00eancia pode &#8220;improvisar&#8221; processos de build personalizados usando ferramentas como <a href=\"https:\/\/community.kinsta.com\/t\/install-node-and-gulp\/2804\" target=\"_blank\" rel=\"noopener noreferrer\">Gulp<\/a>, <a href=\"https:\/\/gruntjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grunt<\/a> ou at\u00e9 mesmo processos manuais. No entanto, essas abordagens muitas vezes podem levar a inconsist\u00eancias entre projetos, sem mencionar uma sobrecarga de manuten\u00e7\u00e3o significativa.<\/p>\n<h2>wp-scripts: Revolucione o fluxo de trabalho no desenvolvimento WordPress para ag\u00eancias<\/h2>\n<p>No contexto do WordPress, um processo de build pode proporcionar uma grande otimiza\u00e7\u00e3o no desenvolvimento de temas e plugins. Ele permite o uso de ferramentas e pr\u00e1ticas modernas, garantindo a compatibilidade com a plataforma.<\/p>\n<p>O pacote <code>@wordpress\/scripts<\/code> &#8211; <code>wp-scripts<\/code> ao longo deste artigo, \u00e9 uma cole\u00e7\u00e3o de arquivos de configura\u00e7\u00e3o e scripts que simplificam o processo de build para projetos WordPress.<\/p>\n<figure id=\"attachment_186951\" aria-describedby=\"caption-attachment-186951\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186951 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/wp-scripts.png\" alt=\"Um exemplo de c\u00f3digo com a se\u00e7\u00e3o de scripts de um arquivo package.json de um projeto WordPress exibe diversos scripts npm para tarefas como build, verifica\u00e7\u00e3o de engines e licen\u00e7as, formata\u00e7\u00e3o, linting (para CSS, JavaScript, documentos Markdown e package.json), atualiza\u00e7\u00e3o de pacotes, cria\u00e7\u00e3o de arquivos zip de plugins, inicializa\u00e7\u00e3o do projeto e execu\u00e7\u00e3o de testes (end-to-end e unit\u00e1rios). Todos os scripts utilizam o wp-scripts como comando base.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-186951\" class=\"wp-caption-text\">Parte de uma refer\u00eancia de wp-scripts para os v\u00e1rios scripts que um projeto usar\u00e1.<\/figcaption><\/figure>\n<p>A equipe do Make WordPress Core desenvolve e mant\u00e9m o pacote, que \u00e9 parte integrante dos Editores de Blocos e Sites. O melhor de tudo \u00e9 que voc\u00ea tamb\u00e9m pode us\u00e1-lo para o desenvolvimento de temas e plugins personalizados.<\/p>\n<p>Para abordar o desenvolvimento do WordPress em escala em uma ag\u00eancia, o <code>wp-scripts<\/code> ser\u00e1 uma parte central do fluxo de trabalho. Ele \u00e9 mais do que uma simples ferramenta de cria\u00e7\u00e3o; \u00e9 uma solu\u00e7\u00e3o abrangente para projetos modernos de WordPress que se alinha \u00e0 necessidade de um fluxo de trabalho de desenvolvimento sofisticado.<\/p>\n<h3>A principal funcionalidade do wp-scripts<\/h3>\n<p>Com pr\u00e1ticas de JavaScript moderno cada vez mais integradas ao ecossistema WordPress, ferramentas de build padronizadas s\u00e3o indispens\u00e1veis. Um conjunto unificado de ferramentas de build como o<code>wp-scripts<\/code>beneficia todo o ecossistema de desenvolvimento WordPress.<\/p>\n<p>O <code>wp-scripts<\/code> oferece funcionalidades que tornam o desenvolvimento WordPress mais eficiente:<\/p>\n<ul>\n<li><strong>Configura\u00e7\u00e3o zero<\/strong><strong>.<\/strong> Voc\u00ea pode come\u00e7ar sem a necessidade de configura\u00e7\u00f5es complexas do <a href=\"https:\/\/kinsta.com\/pt\/blog\/vite-vs-webpack\/\">Webpack<\/a>.<\/li>\n<li><strong>Suporte a JavaScript moderno.<\/strong> Seu c\u00f3digo ES6 ser\u00e1 transpilado para compatibilidade com o navegador e dar\u00e1 a voc\u00ea mais confian\u00e7a em sua precis\u00e3o.<\/li>\n<li><strong>Processamento de CSS integrado.<\/strong> Se voc\u00ea usar pr\u00e9-processadores CSS, como o Sass, ter\u00e1 suporte imediato.<\/li>\n<li><strong>Ferramentas de qualidade de c\u00f3digo.<\/strong> O pacote integra o <a href=\"https:\/\/kinsta.com\/pt\/blog\/extensoes-vscode-extensions\/#1-prettier\">ESLint e o Prettier<\/a> para que voc\u00ea tenha estilo e qualidade de c\u00f3digo consistentes.<\/li>\n<li><strong>Utilit\u00e1rios de teste.<\/strong> Voc\u00ea tem o <a href=\"https:\/\/kinsta.com\/pt\/blog\/jest\/\">Jest<\/a> dispon\u00edvel no pacote para testes de unidade e f\u00e1cil execu\u00e7\u00e3o.<\/li>\n<li><strong>Hot reloading<\/strong>: Se voc\u00ea puder recarregar as altera\u00e7\u00f5es em tempo real, isso poder\u00e1 acelerar o tempo de desenvolvimento.<\/li>\n<\/ul>\n<p>Combinadas, essas funcionalidades oferecem v\u00e1rias vantagens cruciais para ag\u00eancias que gerenciam m\u00faltiplos projetos WordPress. Por exemplo, voc\u00ea pode padronizar o ambiente de desenvolvimento em todos os projetos e replicar o processo de build em novos projetos. O pacote tamb\u00e9m permite centralizar as depend\u00eancias das ferramentas de build, tornando atualiza\u00e7\u00f5es e patches de seguran\u00e7a mais f\u00e1ceis de gerenciar.<\/p>\n<p>No geral, o <code>wp-scripts<\/code>\u00a0ajuda a minimizar problemas de compatibilidade, reduzir o tempo de configura\u00e7\u00e3o e eliminar muitos dos erros t\u00edpicos que ocorrem em processos de build menos otimizados.<\/p>\n<h3>Comparando wp-scripts com um processo t\u00edpico de desenvolvimento do WordPress<\/h3>\n<p>O desenvolvimento t\u00edpico do WordPress geralmente envolve o uso de <a href=\"https:\/\/kinsta.com\/pt\/blog\/wp-enqueue-scripts\/\">enfileiramento manual de scripts e estilos<\/a>. Al\u00e9m disso, voc\u00ea provavelmente escrever\u00e1 <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">vanilla JavaScript<\/a> ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-qu-e-jquery\/\">jQuery<\/a> e depender\u00e1 de ferramentas de build de terceiros ou de nenhum processo de build.<\/p>\n<p>Em contrapartida, o wp-scripts oferece uma abordagem moderna e integrada em quase todas as \u00e1reas:<\/p>\n<table>\n<tbody>\n<tr>\n<td>Elemento<\/td>\n<td>Desenvolvimento t\u00edpico<\/td>\n<td>wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>JavaScript<\/td>\n<td>Geralmente JavaScript comum ou jQuery<\/td>\n<td>Suporte a ES6 e React<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>CSS direto ou pr\u00e9-processadores b\u00e1sicos<\/td>\n<td>Suporte para processamento de Sass e PostCSS<\/td>\n<\/tr>\n<tr>\n<td>Processo de build<\/td>\n<td>Uma configura\u00e7\u00e3o manual ou personalizada usando o Gulp, ou o Grunt<\/td>\n<td>Configura\u00e7\u00e3o zero usando o webpack, integrado ao pacote.<\/td>\n<\/tr>\n<tr>\n<td>Qualidade do c\u00f3digo<\/td>\n<td>Linting manual ou ferramentas separadas integradas ao seu editor de c\u00f3digo<\/td>\n<td>ESLint e Prettier s\u00e3o integrados aos scripts wp<\/td>\n<\/tr>\n<tr>\n<td>Teste de unidade<\/td>\n<td>Se n\u00e3o for uma etapa negligenciada, geralmente h\u00e1 uma configura\u00e7\u00e3o separada<\/td>\n<td>O pacote integra o teste Jest<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>De modo geral, o <code>wp-scripts<\/code> oferece maior flexibilidade gra\u00e7as \u00e0 sua integra\u00e7\u00e3o com ferramentas que voc\u00ea talvez ainda n\u00e3o use. Por exemplo, o esfor\u00e7o de configurar o <a href=\"https:\/\/postcss.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">PostCSS<\/a>, <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Webpack<\/a> ou <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> pode ser algo que voc\u00ea n\u00e3o faz devido a restri\u00e7\u00f5es de tempo.<\/p>\n<h2>Como configurar seu ambiente de desenvolvimento para incorporar wp-scripts<\/h2>\n<p>O uso do <code>wp-scripts<\/code> tem seus pr\u00f3prios requisitos, mas \u00e9 prov\u00e1vel que voc\u00ea j\u00e1 use essas ferramentas. Se voc\u00ea precisar, instale o <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-instalar-o-node-js\/\">Node.js e o npm<\/a> com um ambiente de desenvolvimento local do WordPress. O <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">DevKinsta<\/a> ser\u00e1 uma boa solu\u00e7\u00e3o, gra\u00e7as \u00e0 execu\u00e7\u00e3o no <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-docker\/\">Docker<\/a> e ao suporte aos ambientes de teste da Kinsta.<\/p>\n<figure id=\"attachment_186952\" aria-describedby=\"caption-attachment-186952\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186952 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/devkinsta-interface.png\" alt=\"A interface DevKinsta exibe informa\u00e7\u00f5es do site para um site WordPress. Ela inclui o tipo de site, o tipo de banco de dados, o servidor web e a vers\u00e3o do PHP. A parte superior da interface mostra os bot\u00f5es para Abrir site, Sincronizar, Gerenciador de banco de dados e WP Admin. Uma pequena visualiza\u00e7\u00e3o do site \u00e9 mostrada no lado esquerdo. A parte inferior da interface tem uma se\u00e7\u00e3o de status do site com um bot\u00e3o Stop site.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-186952\" class=\"wp-caption-text\">A interface principal do DevKinsta.<\/figcaption><\/figure>\n<p>Se voc\u00ea j\u00e1 usa o pacote <code>create-block<\/code> para <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">desenvolver plugins de WordPress Block<\/a>, isso instala o <code>wp-scripts<\/code> juntamente com seus outros ativos. A partir daqui, voc\u00ea pode come\u00e7ar a configurar um projeto de desenvolvimento de pacote.<\/p>\n<h3>Configurando um novo projeto WordPress com wp-scripts<\/h3>\n<p>O trabalho que voc\u00ea realizar estar\u00e1 no diret\u00f3rio <strong>wp-content<\/strong> da sua instala\u00e7\u00e3o do WordPress. O subdiret\u00f3rio espec\u00edfico estar\u00e1 relacionado ao tipo de projeto que voc\u00ea criar: <strong>wp-content\/themes<\/strong> para temas e <strong>wp-content\/plugins<\/strong> para plugins!<\/p>\n<p>Independentemente disso, a pasta do seu projeto deve incluir v\u00e1rios arquivos e diret\u00f3rios:<\/p>\n<ul>\n<li>Um arquivo <code>package.json<\/code>.<\/li>\n<li>Um diret\u00f3rio de <strong>build<\/strong>.<\/li>\n<li>Um diret\u00f3rio <strong>src<\/strong> que tamb\u00e9m inclua um arquivo <code>index.js<\/code>.<\/li>\n<\/ul>\n<p>Para criar um arquivo <code>package.json<\/code>, navegue at\u00e9 o diret\u00f3rio do seu projeto usando o Terminal ou o aplicativo de linha de comando. A execu\u00e7\u00e3o do comando <code>npm init<\/code> levar\u00e1 voc\u00ea a um processo de configura\u00e7\u00e3o interativo, e o seu &#8220;ponto de entrada&#8221; dever\u00e1 ser <code>build\/index.js<\/code>:<\/p>\n<figure id=\"attachment_186953\" aria-describedby=\"caption-attachment-186953\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-186953 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/npm-init.png\" alt=\"Uma janela de terminal com um fundo escuro mostrando a sa\u00edda de um comando npm init para um projeto de tema do WordPress. O texto explica que esse utilit\u00e1rio guiar\u00e1 o usu\u00e1rio na cria\u00e7\u00e3o de um arquivo package.json, abordando itens comuns e sugerindo padr\u00f5es sensatos. Ele fornece instru\u00e7\u00f5es sobre como instalar pacotes e salv\u00e1-los como depend\u00eancias. O terminal mostra os detalhes da configura\u00e7\u00e3o inicial, incluindo o nome do pacote, a vers\u00e3o, a descri\u00e7\u00e3o e o ponto de entrada.\" width=\"1200\" height=\"420\"><figcaption id=\"caption-attachment-186953\" class=\"wp-caption-text\">Uma execu\u00e7\u00e3o parcial do processo de inicializa\u00e7\u00e3o do npm, mostrando o prompt do valor do ponto de entrada.<\/figcaption><\/figure>\n<p>Em seguida, instale o <code>wp-scripts<\/code> como uma depend\u00eancia de desenvolvimento:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts --save-dev\n<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m dever\u00e1 ver alguns diret\u00f3rios e arquivos gerados automaticamente: <strong>node_modules<\/strong> e <code>package-lock.json<\/code>. Independentemente disso, agora voc\u00ea precisa fazer refer\u00eancia aos scripts predefinidos no arquivo <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"build\": \"wp-scripts build\",\n  \"start\": \"wp-scripts start\",\n}\n<\/code><\/pre>\n<p>Voc\u00ea provavelmente voltar\u00e1 a esse arquivo com frequ\u00eancia para adicionar outros scripts quando necess\u00e1rio. Por exemplo:<\/p>\n<pre><code class=\"language-json\">\u2026\n\n\"lint:js\": \"wp-scripts lint-js\",\n\"lint:css\": \"wp-scripts lint-style\",\n\"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n\"test\": \"wp-scripts test-unit-js\"\n\u2026\n<\/code><\/pre>\n<p>Talvez voc\u00ea tamb\u00e9m precise <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/enqueueing-assets-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">enfileirar os ativos do tema ou do plug-in<\/a> aqui e, em seguida, salvar as altera\u00e7\u00f5es.<\/p>\n<h3>Entendendo e usando o webpack com wp-scripts<\/h3>\n<p>Para empacotar os ativos de forma eficiente, o <code>wp-scripts<\/code> utiliza o webpack. Embora n\u00e3o seja necess\u00e1rio configur\u00e1-lo manualmente, compreender seu papel pode ajudar voc\u00ea a aproveitar melhor o <code>wp-scripts<\/code>. O webpack desempenha diversas fun\u00e7\u00f5es importantes no seu setup:<\/p>\n<ul>\n<li>Ele ajuda a resolver as depend\u00eancias entre seus m\u00f3dulos JavaScript.<\/li>\n<li>Voc\u00ea pode transpilar o JavaScript moderno para um c\u00f3digo compat\u00edvel com o navegador.<\/li>\n<li>Ele ajudar\u00e1 a processar e otimizar seus estilos.<\/li>\n<li>Voc\u00ea poder\u00e1 gerar mapas de origem para depurar com mais facilidade.<\/li>\n<li>Ele pode ajudar voc\u00ea a criar pacotes minificados e prontos para produ\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>Voc\u00ea j\u00e1 tem uma configura\u00e7\u00e3o padr\u00e3o do Webpack em <code>wp-scripts<\/code>. Em casos mais complexos, no entanto, pode ser necess\u00e1rio criar configura\u00e7\u00f5es personalizadas.<\/p>\n<h3>Configura\u00e7\u00e3o avan\u00e7ada do Webpack para configura\u00e7\u00f5es de ag\u00eancias<\/h3>\n<p>Embora a configura\u00e7\u00e3o padr\u00e3o do Webpack seja ideal para a maioria dos projetos de desenvolvimento, h\u00e1 momentos em que voc\u00ea precisa criar uma configura\u00e7\u00e3o para suas necessidades espec\u00edficas. Por exemplo, voc\u00ea pode lidar com estruturas complexas de temas ou arquiteturas exclusivas de plugins. \u00c9 nesse ponto que um arquivo <code>webpack.config.js<\/code> no diret\u00f3rio raiz do seu projeto:<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\n\nconst path = require('path');\n\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: path.resolve(__dirname, 'src\/js\/main.js'),\n    admin: path.resolve(__dirname, 'src\/js\/admin.js'),\n    \/\/ Add more entry points as needed\n  },\n  output: {\n    filename: '[name].js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  \/\/ Add custom loaders or plugins here\n};\n<\/code><\/pre>\n<p>Essa configura\u00e7\u00e3o permite v\u00e1rios pontos de entrada, o que \u00e9 particularmente \u00fatil para temas ou plugins que exigem scripts separados para diferentes partes do administrador ou frontend do WordPress. Dessa forma, voc\u00ea pode estender sua configura\u00e7\u00e3o padr\u00e3o e manter os benef\u00edcios do <code>wp-scripts<\/code>.<\/p>\n<h2>No\u00e7\u00f5es b\u00e1sicas sobre o uso de wp-scripts<\/h2>\n<p>Com um ambiente de desenvolvimento adequado e a estrutura correta de arquivos e pastas, voc\u00ea pode come\u00e7ar a usar o <code>wp-scripts<\/code>. H\u00e1 alguns comandos b\u00e1sicos e fundamentais que ocupar\u00e3o a maior parte do tempo que voc\u00ea dedicar a eles.<\/p>\n<p>O comando <code>start<\/code> observa se h\u00e1 altera\u00e7\u00f5es em seus arquivos, recompila ativos em tempo real e fornece recarregamento a quente para que voc\u00ea tenha uma experi\u00eancia de desenvolvimento mais suave:<\/p>\n<pre><code class=\"language-bash\">npm run start\n<\/code><\/pre>\n<p>Voc\u00ea usa esse comando no in\u00edcio de um projeto para iniciar um servidor de desenvolvimento, embora ele n\u00e3o otimize o c\u00f3digo compilado no arquivo <strong>build\/index.js<\/strong>.<\/p>\n<p>Quando voc\u00ea precisar implantar o projeto, o comando <code>build<\/code> compilar\u00e1 os ativos para produ\u00e7\u00e3o:<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Quando voc\u00ea executa esse comando, ele realiza algumas tarefas. Por exemplo, ele transpila seu JavaScript, compila seu Sass e SCSS para CSS, minimiza todos os seus ativos e gera <a href=\"https:\/\/web.dev\/articles\/source-maps\" target=\"_blank\" rel=\"noopener noreferrer\">mapas de origem<\/a>. No final, ele enviar\u00e1 tudo para o arquivo <code>build\/index.js<\/code>. O processo de build tamb\u00e9m cria um arquivo <code>build\/index.asset.php<\/code> para que voc\u00ea possa eliminar o cache.<\/p>\n<p>O pacote <code>wp-scripts<\/code> tamb\u00e9m fornece v\u00e1rios comandos de linting para ajudar voc\u00ea a manter a alta qualidade do c\u00f3digo:<\/p>\n<ul>\n<li><code>npm run lint:js<\/code>. Voc\u00ea pode usar esse comando para aplicar linting aos seus arquivos JavaScript.<\/li>\n<li><code>npm run lint:css<\/code>. Voc\u00ea pode usar o linting para identificar os arquivos CSS ou Sass.<\/li>\n<li><code>npm run lint:pkg-json<\/code>. Isso valida o arquivo <code>package.json<\/code>.<\/li>\n<\/ul>\n<p>Para testes de unidade, voc\u00ea simplesmente chama <code>npm run test<\/code>, que usa o Jest para executar o conjunto de testes.<\/p>\n<h2>Explorando os principais utilit\u00e1rios em wp-scripts<\/h2>\n<p>As tarefas b\u00e1sicas de build podem levar muito tempo, e os comandos t\u00edpicos exigir\u00e3o muita automa\u00e7\u00e3o. No entanto, o site <code>wp-scripts<\/code> oferece um conjunto de utilit\u00e1rios sofisticados que atender\u00e3o \u00e0s necessidades complexas do desenvolvimento do WordPress:<\/p>\n<ul>\n<li><strong>Compila\u00e7\u00e3o avan\u00e7ada.<\/strong> Com configura\u00e7\u00f5es otimizadas, voc\u00ea pode transpilar o JavaScript moderno, inclusive os m\u00f3dulos ECMAScript (ESM) e Javascript XML (JSX), e compilar o Sass.<\/li>\n<li><strong>Agrupamento inteligente.<\/strong> Aproveite recursos do webpack como <em>code splitting<\/em> e <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\"><em>tree shaking<\/em><\/a> para otimizar a entrega de ativos.<\/li>\n<li><strong>Linting abrangente.<\/strong> Voc\u00ea pode aplicar padr\u00f5es de codifica\u00e7\u00e3o em arquivos JavaScript, CSS e <code>package.json<\/code>.<\/li>\n<li><strong>Testes integrados.<\/strong> Com o Jest, voc\u00ea pode executar testes de unidade e relat\u00f3rios de cobertura.<\/li>\n<li><strong>Servidor de desenvolvimento.<\/strong> Voc\u00ea pode utilizar o hot reloading para desenvolvimento r\u00e1pido em v\u00e1rios projetos.<\/li>\n<\/ul>\n<p>Com essas funcionalidades, o wp-scripts n\u00e3o s\u00f3 melhora a efici\u00eancia do desenvolvimento, mas tamb\u00e9m permite personalizar o processo para atender \u00e0s suas demandas espec\u00edficas, seja no desenvolvimento de temas ou plugins.<\/p>\n<h3>Manipulando JSX e JavaScript moderno<\/h3>\n<p>Muitos projetos WordPress utilizam <a href=\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\">elementos modernos de JavaScript<\/a>, como <a href=\"https:\/\/kinsta.com\/pt\/blog\/tutoriais-e-recursos-react\/\">componentes React<\/a>, fun\u00e7\u00f5es de seta (<em>arrow functions<\/em>), <em>destructuring<\/em>, <code>async<\/code>\/<code>await<\/code>\u00a0e outros. At\u00e9 mesmo partes do c\u00f3digo principal do WordPress, como o Editor de Blocos, usam JavaScript moderno para construir sua funcionalidade.<\/p>\n<p>No entanto, os navegadores n\u00e3o entendem nativamente essas sintaxes avan\u00e7adas, portanto, \u00e9 necess\u00e1rio mais trabalho para transpilar e compilar.<\/p>\n<p>O <a href=\"https:\/\/kinsta.com\/pt\/blog\/sintaxe-jsx\/\">JSX<\/a> permite que voc\u00ea escreva c\u00f3digo semelhante ao HTML no JavaScript, o que facilita a descri\u00e7\u00e3o da apar\u00eancia das interfaces e de outros elementos. Isso pode melhorar a legibilidade e a manuten\u00e7\u00e3o, para come\u00e7ar. Voc\u00ea tamb\u00e9m pode acessar componentes poderosos do React para criar interfaces de usu\u00e1rio (UIs) din\u00e2micas.<\/p>\n<p>O <code>wp-scripts<\/code> utiliza o <a href=\"https:\/\/babeljs.io\/\">compilador Babel<\/a> para transpilar seu JavaScript moderno e JSX em c\u00f3digo que os navegadores possam interpretar, simplificando a configura\u00e7\u00e3o para que voc\u00ea se concentre apenas em escrever c\u00f3digo.<\/p>\n<p>Voc\u00ea aproveita isso por meio do arquivo <code>src\/index.js <\/code>. Confira este pequeno exemplo de como voc\u00ea pode implementar JSX e JavaScript moderno usando <code>wp-scripts<\/code>:<\/p>\n<pre><code class=\"language-js\">import { render } from '@wordpress\/element';\n\n\/\/ Modern JavaScript feature: Arrow function\nconst HelloWorld = () =&gt; {\n    \/\/ Modern JavaScript feature: Template literal\n    const greeting = `Hello, ${wp.data.select('core\/editor').getCurrentPost().title}!`;    \n\n    \/\/ JSX\n    return (\n        &lt;div className=\"hello-world\"&gt;\n            &lt;h1&gt;{greeting}&lt;\/h1&gt;\n            &lt;p&gt;This is a React component in WordPress!&lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Modern JavaScript feature: Optional chaining\nconst rootElement = document.getElementById('hello-world-root');\nif (rootElement?.innerHTML) {\n    render(&lt;HelloWorld \/&gt;, rootElement);\n}\n<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m precisa enfileirar o script no arquivo <strong>functions.php<\/strong> do seu tema ou no arquivo principal do plugin:<\/p>\n<pre><code class=\"language-js\">function enqueue_hello_world_script() {\n    wp_enqueue_script(\n        'hello-world-script',\n        get_template_directory_uri() . '\/build\/index.js',\n        ['wp-element'],\n        filemtime(get_template_directory() . '\/build\/index.js'),\n        true\n    );\n}\n\nadd_action('wp_enqueue_scripts', 'enqueue_hello_world_script');<\/code><\/pre>\n<p>Depois que voc\u00ea executar o comando <code>npx wp-scripts build<\/code>, o <code>wp-scripts<\/code>. Isso transpila seu JavaScript moderno e JSX, gerando o arquivo <code>build\/index.js<\/code> compat\u00edvel com o navegador.<\/p>\n<h3>Verifica\u00e7\u00f5es de qualidade de c\u00f3digo e linting avan\u00e7ado<\/h3>\n<p>O pacote <code>wp-scripts<\/code> inclui v\u00e1rias ferramentas para ajudar voc\u00ea a manter a qualidade do c\u00f3digo e aplicar um estilo consistente em todos os seus projetos: Juntamente com o ESLint e o Prettier, voc\u00ea tamb\u00e9m pode acessar o <strong>stylelint<\/strong> para obter a identifica\u00e7\u00e3o de CSS e SCSS.<\/p>\n<p>A primeira etapa \u00e9 adicionar os scripts de linting ao seu arquivo <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"lint:js\": \"wp-scripts lint-js\",\n  \"lint:css\": \"wp-scripts lint-style\",\n  \"lint\": \"npm run lint:js && npm run lint:css\"\n}\n<\/code><\/pre>\n<p>Em seguida, crie arquivos de configura\u00e7\u00e3o personalizados no diret\u00f3rio raiz do seu projeto. Por exemplo, o ESLint exige que voc\u00ea trabalhe no arquivo <code>.eslintrc.js<\/code>. Este exemplo (em parte) imp\u00f5e o uso de template literals para strings no c\u00f3digo JavaScript:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    'plugin:@wordpress\/eslint-plugin\/recommended',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'no-console': 'error',\n    'react-hooks\/exhaustive-deps': 'warn',\n    'prefer-template': 'error',\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Para o stylelint, voc\u00ea edita o arquivo <code>.stylelintrc.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    '@wordpress\/stylelint-config\/scss',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',\n    'max-nesting-depth': 3,\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Se voc\u00ea mant\u00e9m uma grande base de c\u00f3digo em v\u00e1rios projetos, \u00e9 fundamental ter um estilo de c\u00f3digo consistente. Dessa forma, voc\u00ea pode estender as configura\u00e7\u00f5es padr\u00e3o do ESLint e do stylelint para aplicar os padr\u00f5es de codifica\u00e7\u00e3o da sua ag\u00eancia.<\/p>\n<p>A partir da\u00ed, voc\u00ea pode executar o site <code>npm run lint<\/code> para iniciar o processo de linting. Por exemplo, se o seu c\u00f3digo cont\u00e9m:<\/p>\n<pre><code class=\"language-js\">D\nconsole.log(\"Hello \" + name + \"!\");\n<\/code><\/pre>\n<p>&#8230;a execu\u00e7\u00e3o de <code>npm run lint:js<\/code> sinalizar\u00e1 um erro e sugerir\u00e1 que voc\u00ea use um template literal:<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(`Hello ${name}!`);\n<\/code><\/pre>\n<p>Essa \u00e9 uma maneira inestim\u00e1vel de aplicar lint no c\u00f3digo do seu tema ou pluginn de WordPress e oferece a voc\u00ea o escopo para adaptar os conjuntos de regras \u00e0s suas necessidades e padr\u00f5es espec\u00edficos.<\/p>\n<h3>Testes unit\u00e1rios<\/h3>\n<p>Os testes unit\u00e1rios s\u00e3o cruciais para garantir a confiabilidade e manuten\u00e7\u00e3o da sua base de c\u00f3digo. A ferramenta que o <code>wp-scripts<\/code> usa como estrutura de teste \u00e9 o Jest.<\/p>\n<p>Quando voc\u00ea executa o comando <code>test<\/code>, o Jest procura por arquivos com extens\u00f5es <code>.test.js<\/code> ou <code>.spec.js<\/code> ou por arquivos em um diret\u00f3rio <strong>__tests__<\/strong>. Em seguida, ele executa os testes definidos nesses arquivos e relata os resultados.<\/p>\n<p>Primeiro, voc\u00ea precisa fazer refer\u00eancia ao script de teste em seu arquivo <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\n\"scripts\": {\n  \"test\": \"wp-scripts test-unit-js\"\n}\n\u2026\n<\/code><\/pre>\n<p>Se voc\u00ea precisar, crie um arquivo como <code>src\/utils.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nexport function capitalizeString(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nexport function sum(a, b) {\n  return a + b;\n}\n\u2026\n<\/code><\/pre>\n<p>A partir da\u00ed, crie um arquivo de teste, como <code>src\/__tests__\/utils.test.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { capitalizeString, sum } from '..\/utils';\n\ndescribe('capitalizeString', () =&gt; {\n  it('capitalizes the first letter of a string', () =&gt; {\n    expect(capitalizeString('hello')).toBe('Hello');\n  });\n  it('returns an empty string if given an empty string', () =&gt; {\n    expect(capitalizeString('')).toBe('');\n  });\n});\n\ndescribe('sum', () =&gt; {\n  it('adds two numbers correctly', () =&gt; {\n    expect(sum(2, 3)).toBe(5);\n  });\n  it('handles negative numbers', () =&gt; {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n<\/code><\/pre>\n<p>Quando voc\u00ea executar o comando <code>npm run test<\/code>, o <code>wp-scripts<\/code> encontrar\u00e1 e executar\u00e1 automaticamente todos os arquivos com a extens\u00e3o <strong>.test.js<\/strong>. Voc\u00ea tamb\u00e9m pode estender a configura\u00e7\u00e3o padr\u00e3o do Jest para dar suporte a qualquer necessidade de teste avan\u00e7ado, como cobertura de teste:<\/p>\n<pre><code class=\"language-js\">\/\/ jest.config.js\nconst defaultConfig = require('@wordpress\/scripts\/config\/jest-unit.config');\nmodule.exports = {\n  ...defaultConfig,\n  setupFilesAfterEnv: ['&lt;rootDir&gt;\/tests\/setupTests.js'],\n  collectCoverageFrom: [\n    'src\/**\/*.js',\n    '!src\/tests\/**\/*.js',\n    '!src\/vendor\/**\/*.js',\n  ],\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n<\/code><\/pre>\n<p>Essa configura\u00e7\u00e3o adiciona um arquivo de configura\u00e7\u00e3o personalizado, especifica os arquivos a serem inclu\u00eddos nos relat\u00f3rios de cobertura e define os limites de cobertura para garantir uma cobertura de teste abrangente em todos os seus projetos. Quando voc\u00ea executar esses testes, o Jest fornecer\u00e1 uma sa\u00edda que mostrar\u00e1 todos os testes aprovados e reprovados.<\/p>\n<p>Expandir as capacidades dos seus testes unit\u00e1rios dessa maneira pode oferecer uma melhoria significativa na qualidade e confiabilidade de seus temas e plugins WordPress, al\u00e9m de otimizar todo o seu processo de desenvolvimento.<\/p>\n<h2>Como integrar wp-scripts em seus fluxos de trabalho<\/h2>\n<p>O escopo do uso de wp-scripts \u00e9 t\u00e3o amplo quanto voc\u00ea precisar. Para ilustrar isso, vamos analisar algumas abordagens r\u00e1pidas que voc\u00ea pode adotar ao usar o <code>wp-scripts<\/code> para automatizar tarefas t\u00edpicas.<\/p>\n<h3>Criando templates reutiliz\u00e1veis para projetos<\/h3>\n<p>Voc\u00ea provavelmente precisar\u00e1 iniciar novos projetos com frequ\u00eancia \u2014 talvez at\u00e9 diariamente. Criar um template personalizado pr\u00e9-configurado com o <code>wp-scripts<\/code> pode economizar muito tempo de configura\u00e7\u00e3o.<\/p>\n<p>Voc\u00ea pode come\u00e7ar com um projeto base: um novo tema ou plugin WordPress que inclua sua configura\u00e7\u00e3o do <code>wp-scripts<\/code>:<\/p>\n<pre><code class=\"language-bash\">mkdir my-agency-base-theme\ncd my-agency-base-theme\nnpm init -y\nnpm install --save-dev @wordpress\/scripts\n<\/code><\/pre>\n<p>Em seguida, configure a estrutura do projeto e crie os diret\u00f3rios e arquivos necess\u00e1rios:<\/p>\n<pre><code class=\"language-bash\">mkdir src build\ntouch src\/index.js src\/style.scss\ntouch functions.php style.css\n<\/code><\/pre>\n<p>Nesse ponto, voc\u00ea configura <code>wp-scripts<\/code> e atualiza o arquivo <code>package.json<\/code> com os comandos relevantes:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\",\n    \"lint:js\": \"wp-scripts lint-js\",\n    \"lint:css\": \"wp-scripts lint-style\",\n    \"test\": \"wp-scripts test-unit-js\"\n  }\n}\n<\/code><\/pre>\n<p>Voc\u00ea pode expandir isso para criar configura\u00e7\u00f5es para o webpack, ESLint e stylelint.<\/p>\n<p>Para tornar esse template reutiliz\u00e1vel e de f\u00e1cil acesso, um <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-github\/\">reposit\u00f3rio do GitHub<\/a> \u00e9 ideal. Por exemplo, considere uma origem remota de <code>https:\/\/github.com\/your-agency\/theme-template.git<\/code>.<\/p>\n<p>Ao iniciar um novo projeto, voc\u00ea pode executar um comando simples:<\/p>\n<pre><code class=\"language-bash\">npx create-wordpress-theme@latest my-new-theme --template your-agency\/theme-template\n<\/code><\/pre>\n<p>Isso clonar\u00e1 seu reposit\u00f3rio de templates e configurar\u00e1 um novo tema com sua configura\u00e7\u00e3o predefinida de <code>wp-scripts<\/code>.<\/p>\n<p>Voc\u00ea pode personalizar ainda mais o template adicionando c\u00f3digo boilerplate espec\u00edfico da ag\u00eancia, como fun\u00e7\u00f5es ou componentes comumente usados. \u00c9 importante manter esse reposit\u00f3rio de templates atualizado, utilizando a vers\u00e3o mais recente do <code>wp-scripts<\/code> e implementando todas as melhorias no fluxo de trabalho que voc\u00ea decidir.<\/p>\n<h3>Controle de vers\u00e3o e colabora\u00e7\u00e3o<\/h3>\n<p>Voc\u00ea pode fazer mais quando se trata de <code>wp-scripts<\/code> e trabalhar com controle de vers\u00e3o. No entanto, muitas vezes, voc\u00ea deve implementar algumas pr\u00e1ticas t\u00edpicas para garantir que a qualidade do c\u00f3digo seja alta:<\/p>\n<ul>\n<li>Inclua <code>package.json<\/code> e <code>package-lock.json<\/code> no controle de vers\u00e3o. Isso garante que todos os membros da equipe usar\u00e3o as mesmas depend\u00eancias.<\/li>\n<li>Certifique-se de que voc\u00ea incluiu artefatos de build, como <strong>\/build<\/strong> e <strong>\/node_modules<\/strong>, no arquivo <code>.gitignore<\/code>.<\/li>\n<li>Certifique-se de fazer refer\u00eancia a todos os scripts de que voc\u00ea precisa no arquivo <code>package.json<\/code> antes de confirm\u00e1-lo.<\/li>\n<li>Considere a possibilidade de usar um arquivo <code>.nvmrc<\/code> para especificar a vers\u00e3o correta do Node.js para o seu projeto.<\/li>\n<\/ul>\n<p>Voc\u00ea pode optar por implementar <a href=\"https:\/\/kinsta.com\/pt\/blog\/git-hooks\/\">hooks de pr\u00e9-commit<\/a> usando ferramentas como o <a href=\"https:\/\/typicode.github.io\/husky\/\">Husky<\/a>. Essa \u00e9 uma \u00f3tima maneira de executar um linter antes de cada confirma\u00e7\u00e3o, como neste exemplo:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"husky\": {\n    \"hooks\": {\n        \"pre-commit\": \"npm run lint:js && npm run lint:css\"\n    }\n}\n\u2026\n<\/code><\/pre>\n<p>Dessa forma, voc\u00ea pode garantir que o lint e os testes sejam executados automaticamente antes de fazer commits e pushes. Essa \u00e9 outra maneira de voc\u00ea manter a qualidade do c\u00f3digo em toda a sua equipe.<\/p>\n<h3>Integra\u00e7\u00e3o cont\u00ednua e implanta\u00e7\u00e3o cont\u00ednua (CI\/CD)<\/h3>\n<p>Ao integrar o <code>wp-scripts<\/code> ao seu pipeline de CI\/CD, voc\u00ea pode simplificar o processo de implanta\u00e7\u00e3o de temas e plugins. <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-configurar-pipeline-ci-cd\/\">O GitHub Actions<\/a> \u00e9 apenas uma maneira de voc\u00ea integrar isso \u00e0 sua configura\u00e7\u00e3o do <code>wp-scripts<\/code>.<\/p>\n<p>A primeira etapa \u00e9 criar um arquivo de fluxo de trabalho dedicado em um diret\u00f3rio de <strong>fluxos de trabalho<\/strong> do seu reposit\u00f3rio:<\/p>\n<pre><code class=\"language-json\">name: CI\/CD\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions\/checkout@v2\n    - name: Use Node.js\n      uses: actions\/setup-node@v2\n      with:\n        node-version: '14'\n    - name: Cache dependencies\n      uses: actions\/cache@v2\n      with:\n        path: ~\/.npm\n        key: ${{ runner.OS }}-node-${{ hashFiles('**\/package-lock.json') }}\n    - name: Install dependencies\n      run: npm ci\n    - name: Run linters\n      run: |\n        npm run lint:js\n        npm run lint:css\n    - name: Run tests\n      run: npm run test\n    - name: Build\n      run: npm run build\n    - name: Deploy\n      if: github.ref == 'refs\/heads\/main'\n      run: |\n        # Add your deployment script here\n        # For example, using rsync to a remote server:\n        # rsync -avzc --delete .\/build\/ user@example.com:\/path\/to\/wp-content\/themes\/your-theme\/\n<\/code><\/pre>\n<p>A etapa de implanta\u00e7\u00e3o pode variar dependendo do seu provedor de hospedagem. Voc\u00ea pode usar o rsync, integrar-se a servi\u00e7os como o <a href=\"https:\/\/www.deployhq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DeployHQ<\/a> ou o <a href=\"https:\/\/kinsta.com\/partners\/buddy\/\">Buddy<\/a>, ou optar por uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-configurar-pipeline-ci-cd\/#trigger-deployment-with-curl-in-cicd-pipeline\">integra\u00e7\u00e3o simples com cURL<\/a>. Caso sua implanta\u00e7\u00e3o exija senhas ou chaves, elas devem ser adicionadas como <em>secrets<\/em> nas configura\u00e7\u00f5es do reposit\u00f3rio do GitHub.<\/p>\n<p>Esse fluxo de trabalho executa linters, testes e cria seu projeto em cada push e pull request. O melhor de tudo \u00e9 que ele \u00e9 implantado somente quando voc\u00ea envia altera\u00e7\u00f5es para a branch principal.<\/p>\n<h3>Criando uma ferramenta de linha de comando (CLI) personalizada<\/h3>\n<p>Se voc\u00ea precisar de ferramentas personalizadas, o site <code>wp-scripts<\/code> pode ajudar. Por exemplo, talvez voc\u00ea queira implantar uma ferramenta de CLI personalizada que atenda \u00e0s necessidades da sua ag\u00eancia.<\/p>\n<p>Em alguns casos, sua ferramenta precisar\u00e1 de algumas depend\u00eancias:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts commander chalk\n<\/code><\/pre>\n<p>Aqui, o <a href=\"https:\/\/www.npmjs.com\/package\/commander\" target=\"_blank\" rel=\"noopener noreferrer\">Commander<\/a> analisa os argumentos da linha de comando e o <a href=\"https:\/\/www.npmjs.com\/package\/chalk\" target=\"_blank\" rel=\"noopener noreferrer\">chalk<\/a> melhora a exibi\u00e7\u00e3o visual do texto de sa\u00edda.<\/p>\n<p>A partir daqui, voc\u00ea pode come\u00e7ar a codificar a ferramenta aproveitando o <code>wp-scripts<\/code>. Aqui est\u00e1 um exemplo de como esse arquivo ficaria:<\/p>\n<pre><code class=\"language-js\">#!\/usr\/bin\/env node\nconst { program } = require('commander');\nconst { spawn } = require('child_process');\nconst path = require('path');\nconst chalk = require('chalk');\n\nconst wpScripts = path.resolve(__dirname, '.\/node_modules\/.bin\/wp-scripts');\n\nconst runWpScripts = (script, args) =&gt; {\n  console.log(chalk.blue(`Running wp-scripts ${script}...`));\n  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });\n  result.on('exit', (code) =&gt; {\n    if (code !== 0) {\n      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));\n    }\n  });\n};\n\nprogram\n  .version('1.0.0')\n  .description('Custom WordPress development CLI for Agency XYZ');\n\nprogram\n  .command('build')\n  .description('Build the project')\n  .action(() =&gt; runWpScripts('build'));\n\nprogram\n  .command('start')\n  .description('Start the development server')\n  .action(() =&gt; runWpScripts('start'));\n\nprogram\n  .command('lint')\n  .description('Lint JavaScript and CSS files')\n  .action(() =&gt; {\n    runWpScripts('lint-js');\n    runWpScripts('lint-style');\n  });\n\nprogram\n  .command('test')\n  .description('Run unit tests')\n  .action(() =&gt; runWpScripts('test-unit-js'));\n\nprogram\n  .command('deploy')\n  .description('Deploy the project')\n  .action(() =&gt; {\n    console.log(chalk.green('Deploying project...'));\n    \/\/ Add your deployment logic here\n    \/\/ For example:\n    \/\/ spawn('rsync', ['-avz', 'build\/', 'user@server:\/path\/to\/wordpress\/wp-content\/themes\/your-theme\/']);\n  });\n\nprogram.parse(process.argv);\n<\/code><\/pre>\n<p>Adicionar o campo bin ao seu arquivo package.json permite que voc\u00ea transforme a ferramenta CLI em um execut\u00e1vel:<\/p>\n<pre><code class=\"language-js\">\u2026\n{\n  \"name\": \"agency-wp-cli\",\n  \"version\": \"1.0.0\",\n  \"bin\": {\n    \"agency-wp\": \".\/cli.js\"\n  },\n  \/\/ ... other fields\n}\n\u2026\n<\/code><\/pre>\n<p>Para vincular a CLI a uma instala\u00e7\u00e3o local, voc\u00ea pode simplesmente executar <code>npm link<\/code>. Agora, voc\u00ea pode testar a CLI no aplicativo de Terminal:<\/p>\n<pre><code class=\"language-bash\">agency-wp build\nagency-wp lint\nagency-wp deploy\n<\/code><\/pre>\n<p>Voc\u00ea deve publicar a ferramenta em um registro npm privado para que outros membros da equipe possam instal\u00e1-la quando quiserem:<\/p>\n<pre><code class=\"language-bash\">npm publish --registry=<a href=\"https:\/\/your-private-registry.com\">https:\/\/your-private-registry.com<\/a>\n<\/code><\/pre>\n<p>Quando precisar dela, voc\u00ea s\u00f3 precisar\u00e1 executar <code>npm install --save-dev agency-wp-cli<\/code> para instalar a ferramenta. A partir da\u00ed, voc\u00ea pode fazer refer\u00eancia \u00e0 CLI em <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"agency-wp build\",\n    \"start\": \"agency-wp start\",\n    \"lint\": \"agency-wp lint\",\n    \"test\": \"agency-wp test\",\n    \"deploy\": \"agency-wp deploy\"\n  }\n}\n<\/code><\/pre>\n<p>Ao criar e usar uma ferramenta como essa, voc\u00ea garante que todos na sua ag\u00eancia usem os mesmos comandos e processos. Isso pode reduzir as inconsist\u00eancias e otimizar ainda mais o fluxo de trabalho de desenvolvimento WordPress.<\/p>\n<h3>Otimiza\u00e7\u00e3o de desempenho<\/h3>\n<p>Quando voc\u00ea gerencia v\u00e1rios sites WordPress de alto tr\u00e1fego, a otimiza\u00e7\u00e3o do desempenho se torna crucial para o seu desempenho. H\u00e1 v\u00e1rias t\u00e9cnicas avan\u00e7adas que o <code>wp-scripts<\/code> pode ajudar voc\u00ea a implementar.<\/p>\n<h4>Divis\u00e3o avan\u00e7ada de c\u00f3digo (<em>Advanced Code Splitting)<\/em><\/h4>\n<p>Por exemplo, a divis\u00e3o de c\u00f3digo permite que voc\u00ea divida seu pacote JavaScript em partes menores, que podem ser carregadas sob demanda. Isso pode aumentar o tempo de carregamento inicial, especialmente para aplicativos grandes.<\/p>\n<p>Primeiro, modifique seu arquivo <code>webpack.config.js<\/code> para ativar a divis\u00e3o de c\u00f3digo:<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: '.\/src\/index.js',\n    admin: '.\/src\/admin.js',\n  },\n  output: {\n    filename: '[name].js',\n    chunkFilename: '[name].[contenthash].js',\n  },\n  optimization: {\n    ...defaultConfig.optimization,\n    splitChunks: {\n      chunks: 'all',\n      minSize: 0,\n      cacheGroups: {\n        vendor: {\n          test: \/[\\\/]node_modules[\\\/]\/,\n          name(module) {\n            const packageName = module.context.match(\/[\\\/]node_modules[\\\/](.*?)([\\\/]|$)\/)[1];\n            return `vendor.${packageName.replace('@', '')}`;\n          },\n        },\n      },\n    },\n  },\n};\n<\/code><\/pre>\n<p>Em todo o seu c\u00f3digo JavaScript, voc\u00ea usa importa\u00e7\u00f5es din\u00e2micas para dividi-lo em partes menores:<\/p>\n<pre><code class=\"language-js\">\/\/ Instead of: import { heavyFunction } from '.\/heavyModule';\n\nbutton.addEventListener('click', () =&gt; {\n  import('.\/heavyModule').then(module =&gt; {\n    module.heavyFunction();\n  });\n});\n<\/code><\/pre>\n<p>Voc\u00ea tamb\u00e9m precisa enfileirar cada divis\u00e3o em seus arquivos do WordPress:<\/p>\n<pre><code class=\"language-php\">function enqueue_split_scripts() {\n  $asset_file = include(get_template_directory() . '\/build\/index.asset.php');  \n\n  wp_enqueue_script('main', get_template_directory_uri() . '\/build\/main.js', $asset_file['dependencies'], $asset_file['version'], true);\n  wp_enqueue_script('admin', get_template_directory_uri() . '\/build\/admin.js', $asset_file['dependencies'], $asset_file['version'], true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_split_scripts');\n<\/code><\/pre>\n<p>Isso deve reduzir os tempos de carregamento sem exigir muito esfor\u00e7o de implementa\u00e7\u00e3o.<\/p>\n<h4>Tree Shaking<\/h4>\n<p>No contexto do JavaScript, o <em>tree shaking<\/em> \u00e9 a t\u00e9cnica usada para eliminar c\u00f3digo n\u00e3o utilizado. Tanto o <code>wp-scripts<\/code> quanto o <code>webpack<\/code>\u00a0realizam <em>tree shaking<\/em> para builds de produ\u00e7\u00e3o, mas \u00e9 poss\u00edvel otimiz\u00e1-lo ainda mais. O processo pode ser mais complexo do que descrito aqui, mas \u00e9 importante garantir o uso de sintaxe ES6 de import e export.<\/p>\n<pre><code class=\"language-php\">\/\/ Good for tree shaking\nexport function usedFunction() { \/* ... *\/ }\n\n\/\/ Bad for tree shaking\nmodule.exports = {\n  usedFunction: function() { \/* ... *\/ },\n};\n<\/code><\/pre>\n<p>Em seguida, especifique os arquivos com efeitos colaterais <a href=\"https:\/\/travislramos.com\/blog\/understanding-tree-shaking-in-javascript\">&#8220;side effects&#8221;<\/a>&#8230;<\/p>\n<pre><code class=\"language-js\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": [\"*.css\", \"*.scss\"]\n}\n<\/code><\/pre>\n<p>&#8230;ou marque como isento de efeitos colaterais &#8220;side effects&#8221;:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": false\n}\n<\/code><\/pre>\n<p>Algumas bibliotecas maiores n\u00e3o suportam <em>tree shaking<\/em>, assim como outras. Nesses casos, voc\u00ea deve usar um plugin espec\u00edfico para essa tarefa:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev babel-plugin-transform-imports\n<\/code><\/pre>\n<p>Isso tamb\u00e9m significa que voc\u00ea deve atualizar os arquivos de configura\u00e7\u00e3o do babel para obter uma instala\u00e7\u00e3o ideal e sem erros.<\/p>\n<h4>Otimiza\u00e7\u00e3o de ativos<\/h4>\n<p>O processo de build do <code>wp-scripts<\/code> minimizar\u00e1 os arquivos CSS e JavaScript para voc\u00ea, e voc\u00ea tamb\u00e9m pode levar isso adiante. Por exemplo, voc\u00ea pode instalar um plugin espec\u00edfico de otimiza\u00e7\u00e3o de imagem:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev imagemin-webpack-plugin\n<\/code><\/pre>\n<p>Depois de adicionar isso ao seu arquivo de configura\u00e7\u00e3o do Webpack, voc\u00ea pode usar dicas de recursos adicionando o c\u00f3digo correto ao seu arquivo <code>functions.php<\/code> ou ao arquivo principal do plugin:<\/p>\n<pre><code class=\"language-php\">function add_resource_hints( $urls, $relation_type ) {\n  if ( 'preconnect' === $relation_type ) {\n    $urls[] = 'https:\/\/fonts.googleapis.com';\n    $urls[] = 'https:\/\/fonts.gstatic.com';\n  }\n  return $urls;\n}\n\nadd_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );\n<\/code><\/pre>\n<p>Uma tarefa como essa mostra a flexibilidade que voc\u00ea tem com o <code>wp-scripts<\/code>, na medida em que pode adapt\u00e1-lo \u00e0s necessidades de sua ag\u00eancia ou projeto.<\/p>\n<h4>An\u00e1lise do tamanho do pacote<\/h4>\n<p>Compreender a composi\u00e7\u00e3o do seu pacote \u00e9 fundamental para a otimiza\u00e7\u00e3o. Com o <code>wp-scripts<\/code>, voc\u00ea pode facilitar isso com o sinalizador <code>--analyze<\/code>.<\/p>\n<pre><code class=\"language-bash\">npm run build -- --analyze\n<\/code><\/pre>\n<p>A primeira etapa \u00e9 adicionar o script relevante ao seu arquivo <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"scripts\": {\n    \"analyze\": \"wp-scripts build --analyze\"\n  }\n}\n<\/code><\/pre>\n<p>Quando voc\u00ea executar o comando <code>analyze<\/code>, ele gerar\u00e1 um relat\u00f3rio que mostra o tamanho de cada m\u00f3dulo no seu pacote. Essa implementa\u00e7\u00e3o simples ajuda a identificar \u00e1reas para otimiza\u00e7\u00e3o.<\/p>\n<h4>Implementando o Critical CSS<\/h4>\n<p>O Critical CSS do seu site \u00e9 o CSS m\u00ednimo necess\u00e1rio para carregar o conte\u00fado acima da dobra (<em>above-the-fold<\/em>). Inserir esse CSS inline pode melhorar o tempo de carregamento percebido.<\/p>\n<p>Para isso, ser\u00e1 necess\u00e1rio usar o plugin\u00a0<a style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\" href=\"https:\/\/www.npmjs.com\/package\/critical-css-webpack-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Critical CSS do Webpack<\/a><span style=\"background-color: var(--kmt-sys-color-background-neutral-weak, #f9f5f3);font-weight: var(--kmt-sys-typography-body-font-weight)\">:<\/span><\/p>\n<pre><code class=\"language-bash\">npm install --save-dev critical-css-webpack-plugin\n<\/code><\/pre>\n<p>A pr\u00f3xima tarefa \u00e9 atualizar seu arquivo de configura\u00e7\u00e3o do Webpack para fazer refer\u00eancia ao plugin:<\/p>\n<pre><code class=\"language-js\">const CriticalCssPlugin = require('critical-css-webpack-plugin');\nconst defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  plugins: [\n    ...defaultConfig.plugins,\n    new CriticalCssPlugin({\n      base: 'dist\/',\n      src: 'index.html',\n      target: 'styles\/critical.css',\n      extract: true,\n      inline: true,\n      minify: true,\n      dimensions: [\n        {\n          height: 500,\n          width: 300,\n        },\n        {\n          height: 900,\n          width: 1300,\n        },\n      ],\n    }),\n  ],\n};\n<\/code><\/pre>\n<p>Para us\u00e1-lo, voc\u00ea precisa adicionar um snippet ao seu arquivo <code>header.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;style&gt;\n  &lt;?php echo file_get_contents(get_template_directory() . '\/build\/styles\/critical.css'); ?&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Esse processo essencialmente extrai e insere o Critical CSS inline, permitindo um carregamento inicial mais r\u00e1pido. Ele gera o CSS cr\u00edtico para tamanhos espec\u00edficos de viewport, o que pode melhorar significativamente o tempo de carregamento percebido dos seus temas.<\/p>\n<h2>Resumo<\/h2>\n<p>Para o desenvolvimento em ag\u00eancias, o <code>wp-scripts<\/code>\u00a0pode ser uma ferramenta poderosa que melhora significativamente seu fluxo de trabalho em projetos de temas e plugins. Ao fornecer um processo de build padronizado, suporte a JavaScript moderno e ferramentas integradas de testes e linting, o <code>wp-scripts<\/code> permite que voc\u00ea se concentre na cria\u00e7\u00e3o de projetos WordPress de alta qualidade enquanto automatiza algumas das tarefas mais importantes.<\/p>\n<p>O uso do <code>wp-scripts<\/code> n\u00e3o apenas ajuda voc\u00ea a acompanhar as pr\u00e1ticas modernas de desenvolvimento, mas tamb\u00e9m posiciona sua ag\u00eancia na vanguarda do desenvolvimento WordPress, preparada para enfrentar os desafios e aproveitar as oportunidades que surgirem.<\/p>\n<p>O wp-scripts oferece a funcionalidade e o alcance de que voc\u00ea precisa para os projetos de desenvolvimento da sua ag\u00eancia? Compartilhe seus pensamentos conosco na se\u00e7\u00e3o de coment\u00e1rios abaixo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O trabalho de desenvolvimento WordPress para ag\u00eancias pode ser competitivo mesmo nas melhores circunst\u00e2ncias. Ele exige m\u00e1xima efici\u00eancia e consist\u00eancia em diversos projetos de clientes. Independentemente &#8230;<\/p>\n","protected":false},"author":259,"featured_media":70520,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1073,1032,1026,1039],"class_list":["post-70519","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agencia","topic-desempenho-do-wordpress","topic-desenvolvimento-wordpress","topic-design-sites-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Desenvolvimento Avan\u00e7ado em WordPress com wp-scripts<\/title>\n<meta name=\"description\" content=\"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts\" \/>\n<meta property=\"og:description\" content=\"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-02T09:25:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-10T14:30:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts\",\"datePublished\":\"2024-12-02T09:25:27+00:00\",\"dateModified\":\"2024-12-10T14:30:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\"},\"wordCount\":4294,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\",\"name\":\"Desenvolvimento Avan\u00e7ado em WordPress com wp-scripts\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png\",\"datePublished\":\"2024-12-02T09:25:27+00:00\",\"dateModified\":\"2024-12-10T14:30:23+00:00\",\"description\":\"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desenvolvimento WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Desenvolvimento Avan\u00e7ado em WordPress com wp-scripts","description":"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/","og_locale":"pt_PT","og_type":"article","og_title":"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts","og_description":"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!","og_url":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2024-12-02T09:25:27+00:00","article_modified_time":"2024-12-10T14:30:23+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Steve Bonisteel","Tempo estimado de leitura":"28 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts","datePublished":"2024-12-02T09:25:27+00:00","dateModified":"2024-12-10T14:30:23+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/"},"wordCount":4294,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/","url":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/","name":"Desenvolvimento Avan\u00e7ado em WordPress com wp-scripts","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png","datePublished":"2024-12-02T09:25:27+00:00","dateModified":"2024-12-10T14:30:23+00:00","description":"Um desenvolvimento WordPress eficiente exige ferramentas de alto n\u00edvel. Este artigo aborda o uso do wp-scripts e t\u00e9cnicas para build, linting, testes e muito mais!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Desenvolvimento WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/desenvolvimento-wordpress\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimento Avan\u00e7ado em WordPress: Como Construir seu Pr\u00f3ximo Projeto com wp-scripts"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=70519"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70519\/revisions"}],"predecessor-version":[{"id":70580,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/70519\/revisions\/70580"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/70519\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/70520"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=70519"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=70519"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=70519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}