{"id":77381,"date":"2024-12-02T10:20:07","date_gmt":"2024-12-02T09:20:07","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=77381&#038;preview=true&#038;preview_id=77381"},"modified":"2024-12-10T15:29:06","modified_gmt":"2024-12-10T14:29:06","slug":"desarrollo-wp-scripts","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/","title":{"rendered":"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts"},"content":{"rendered":"<p>El trabajo de desarrollo de WordPress para las agencias es, en el mejor de los casos, competitivo. Requiere una eficiencia y coherencia m\u00e1ximas en los proyectos de varios clientes.<\/p>\n<p>Independientemente de lo experimentado que seas como desarrollador, la gesti\u00f3n de toda una cartera de temas y plugins personalizados sigue requiriendo un esfuerzo constante cuando se trata de agilizar el flujo de trabajo. Entra en <code>wp-scripts<\/code>: un potente conjunto de utilidades que puede revolucionar la forma en que tu agencia aborda el desarrollo de WordPress.<\/p>\n<p>Esta completa gu\u00eda examina las capacidades de <code>wp-scripts<\/code>, y explora t\u00e9cnicas para tus procesos de construcci\u00f3n. A lo largo de toda la gu\u00eda, se tratar\u00e1 la compilaci\u00f3n y empaquetado optimizados, el linting automatizado, las pruebas unitarias y mucho m\u00e1s \u2014 todo ello te interesar\u00e1 si tienes que hacer malabarismos con varios proyectos de WordPress de gran envergadura.<\/p>\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>El concepto de \u00abproceso de construcci\u00f3n\u00bb<\/h2>\n<p>Antes de ver los detalles de <code>wp-scripts<\/code>, vamos a entender el concepto m\u00e1s amplio de tu proceso de construcci\u00f3n de desarrollo web. Consiste en una serie de tareas automatizadas que ayudan a convertir tu c\u00f3digo fuente en una aplicaci\u00f3n o sitio web listo para producci\u00f3n.<\/p>\n<p>Por ejemplo, hay muchos trabajos que se benefician de la automatizaci\u00f3n de esta manera:<\/p>\n<ul>\n<li>Compilar JavaScript moderno en c\u00f3digo compatible con el navegador.<\/li>\n<li>Transpilar lenguajes de preprocesador CSS (<a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a>, por ejemplo) a CSS est\u00e1ndar.<\/li>\n<li>Minificar y optimizar activos como <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, CSS y medios.<\/li>\n<li>Ejecutando linters para detectar posibles errores y hacer cumplir las normas de codificaci\u00f3n.<\/li>\n<li>Ejecutando <a href=\"https:\/\/kinsta.com\/es\/blog\/pruebas-unitarias-laravel\/\">pruebas unitarias<\/a> para garantizar una mejor funcionalidad del c\u00f3digo.<\/li>\n<\/ul>\n<p>Estos son buenos aspectos a automatizar para cualquier <a href=\"https:\/\/kinsta.com\/es\/blog\/workflow-wordpress\/\">flujo de trabajo de desarrollo<\/a>, pero para las agencias, el proceso es igual de crucial. Para empezar, puedes mantener la coherencia en varios proyectos (y en tu equipo).<\/p>\n<p>Tambi\u00e9n puedes desarrollar y desplegar a trav\u00e9s de ciclos m\u00e1s r\u00e1pidos y mantener todos tus proyectos aprovechando esa coherencia, incluso los m\u00e1s complejos. Para el usuario final, el rendimiento optimizado que obtengas repercutir\u00e1 en su experiencia general.<\/p>\n<p>Normalmente, tu agencia puede \u00abimprovisar\u00bb procesos de creaci\u00f3n personalizados utilizando herramientas 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>, o incluso procesos manuales. Sin embargo, estos enfoques a menudo pueden dar lugar a incoherencias entre proyectos, por no mencionar una importante sobrecarga de mantenimiento.<\/p>\n<h2>wp-scripts: un cambio revolucionario en el flujo de trabajo para el desarrollo de WordPress dentro de una agencia<\/h2>\n<p>En el contexto de WordPress, un proceso de construcci\u00f3n tambi\u00e9n puede ofrecer una racionalizaci\u00f3n significativa para el desarrollo de temas y plugins. Te permite utilizar herramientas y pr\u00e1cticas modernas y, al mismo tiempo, garantizar la compatibilidad de la plataforma.<\/p>\n<p>El paquete <code>@wordpress\/scripts<\/code> &#8211; <code>wp-scripts<\/code> a lo largo de este post \u2014 es una colecci\u00f3n de archivos de configuraci\u00f3n y scripts que te ayudan a simplificar el proceso de construcci\u00f3n de los proyectos de 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=\"Un fragmento de c\u00f3digo que muestra la secci\u00f3n de scripts de un archivo package.json para un proyecto de WordPress. Enumera varios scripts npm para tareas como la construcci\u00f3n, la comprobaci\u00f3n de motores y licencias, el formateo, el linting (para CSS, JavaScript, docs Markdown y package.json), la actualizaci\u00f3n de paquetes, la creaci\u00f3n de archivos zip de plugins, el inicio del proyecto y la ejecuci\u00f3n de pruebas (tanto de extremo a extremo como unitarias). Todos los scripts utilizan wp-scripts como comando base.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-186951\" class=\"wp-caption-text\">Parte de una referencia wp-scripts para los distintos scripts que utilizar\u00e1 un proyecto.<\/figcaption><\/figure>\n<p>El equipo de Make WordPress Core desarrolla y mantiene el paquete, que forma parte integral de los editores de bloques y de sitios. Lo mejor de todo es que tambi\u00e9n puedes utilizarlo para desarrollar temas y plugins personalizados.<\/p>\n<p>Para abordar el desarrollo de WordPress a escala dentro de una agencia, <code>wp-scripts<\/code> ser\u00e1 una parte central del flujo de trabajo. Es m\u00e1s que una simple herramienta de construcci\u00f3n; es una soluci\u00f3n integral para los proyectos modernos de WordPress que se ajusta a la necesidad de un flujo de trabajo de desarrollo sofisticado.<\/p>\n<h3>La funcionalidad clave de wp-scripts<\/h3>\n<p>A medida que las pr\u00e1cticas m\u00e1s modernas de JavaScript se introducen en el ecosistema de WordPress, necesitamos herramientas de construcci\u00f3n m\u00e1s estandarizadas para darles cabida. Un conjunto unificado de herramientas de construcci\u00f3n en forma de <code>wp-scripts<\/code> beneficia a todo el ecosistema de desarrollo de WordPress.<\/p>\n<p>Como tal, <code>wp-scripts<\/code> ofrece una serie de funcionalidades que hacen que el desarrollo de WordPress sea m\u00e1s eficiente:<\/p>\n<ul>\n<li><strong>Configuraci\u00f3n &#8216;Cero-configuraci\u00f3n&#8217;.<\/strong> Puedes empezar sin necesidad de complejas configuraciones de <a href=\"https:\/\/kinsta.com\/es\/blog\/vite-vs-webpack\/\">webpack<\/a>.<\/li>\n<li><strong>Compatibilidad con JavaScript moderno.<\/strong> Tu c\u00f3digo ES6 se transpilar\u00e1 para que sea compatible con los navegadores, y te proporcionar\u00e1 una mayor confianza en su precisi\u00f3n.<\/li>\n<li><strong>Procesamiento de CSS incorporado.<\/strong> Si utilizas preprocesadores de CSS como Sass, obtendr\u00e1s soporte desde el principio<\/li>\n<li><strong>Herramientas de calidad del c\u00f3digo.<\/strong> El paquete integra <a href=\"https:\/\/kinsta.com\/es\/blog\/extensiones-vscode\/#1-prettier\">ESLint y Prettier<\/a> para un estilo y calidad de c\u00f3digo consistentes.<\/li>\n<li><strong>Utilidades de prueba.<\/strong> Dispones de <a href=\"https:\/\/kinsta.com\/es\/blog\/jest\/\">Jest<\/a> dentro del paquete para realizar pruebas unitarias y facilitar la ejecuci\u00f3n.<\/li>\n<li><strong>Recarga en caliente.<\/strong> Si tienes la posibilidad de recargar tus cambios en tiempo real, puedes acelerar el tiempo de desarrollo.<\/li>\n<\/ul>\n<p>Combinado, <code>wp-scripts<\/code> ofrece muchas ventajas clave para las agencias que gestionan varios proyectos de WordPress. Por ejemplo, puedes estandarizar tu entorno de desarrollo en todos los proyectos y replicar el proceso de construcci\u00f3n tambi\u00e9n en cualquier proyecto nuevo. El paquete te permitir\u00e1 centralizar tus dependencias de herramientas de compilaci\u00f3n, lo que hace que las actualizaciones y los parches de seguridad sean m\u00e1s manejables.<\/p>\n<p>En general, puedes preocuparte menos por los problemas de compatibilidad, reducir el tiempo de configuraci\u00f3n y erradicar muchos de los errores t\u00edpicos que se cometen a lo largo de un proceso de construcci\u00f3n menos \u00e1gil.<\/p>\n<h3>Comparaci\u00f3n de wp-scripts con un proceso de desarrollo de WordPress t\u00edpico<\/h3>\n<p>El desarrollo t\u00edpico de WordPress suele implicar el uso de la <a href=\"https:\/\/kinsta.com\/es\/blog\/wp-enqueue-scripts\/\">cola manual para scripts y estilos<\/a>. Adem\u00e1s, es probable que escribas <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-javascript\/\">JavaScript vainilla<\/a> o <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jquery\/\">jQuery<\/a>, y que dependas de herramientas de construcci\u00f3n de terceros \u2014 o que no haya ning\u00fan proceso de construcci\u00f3n.<\/p>\n<p>En cambio, wp-scripts proporciona un enfoque moderno e integrado en casi todas las \u00e1reas:<\/p>\n<table>\n<tbody>\n<tr>\n<td>Elemento<\/td>\n<td>Desarrollo t\u00edpico<\/td>\n<td>wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>JavaScript<\/td>\n<td>A menudo JavaScript vainilla o jQuery<\/td>\n<td>Compatibilidad con ES6 y React<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>CSS directo o preprocesadores b\u00e1sicos<\/td>\n<td>Soporte para procesamiento Sass y PostCSS<\/td>\n<\/tr>\n<tr>\n<td>Proceso de construcci\u00f3n<\/td>\n<td>Una configuraci\u00f3n manual o personalizada utilizando Gulp o Grunt<\/td>\n<td>Configuraci\u00f3n cero utilizando webpack, integrado en el paquete.<\/td>\n<\/tr>\n<tr>\n<td>Calidad del c\u00f3digo<\/td>\n<td>Linting manual o herramientas independientes integradas con tu editor de c\u00f3digo<\/td>\n<td>ESLint y Prettier est\u00e1n integrados en wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>Pruebas unitarias<\/td>\n<td>Si no es un paso olvidado, suele haber una configuraci\u00f3n independiente<\/td>\n<td>El paquete integra pruebas Jest<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>En general, <code>wp-scripts<\/code> ofrece mayor flexibilidad gracias a su integraci\u00f3n con herramientas que quiz\u00e1 ya no utilices. Por ejemplo, el esfuerzo de configurar <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> o <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> puede ser algo que te saltes por falta de tiempo.<\/p>\n<h2>C\u00f3mo configurar tu entorno de desarrollo para incorporar wp-scripts<\/h2>\n<p>Utilizar <code>wp-scripts<\/code> tiene sus propios requisitos, pero es probable que ya utilices esas herramientas. Si lo necesitas, instala <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">Node.js y npm<\/a> junto con un entorno de desarrollo local de WordPress. <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a> ser\u00e1 una buena soluci\u00f3n, gracias a que se ejecuta en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-docker\/\">Docker<\/a> y es compatible con los entornos staging de 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=\"La interfaz de DevKinsta muestra informaci\u00f3n sobre tu sitio web en WordPress. Incluye el tipo de sitio, el tipo de base de datos, el servidor web y la versi\u00f3n de PHP. La parte superior de la interfaz muestra botones para Abrir sitio, Sincronizar, Gestor de base de datos y WP Admin. En la parte izquierda se muestra una peque\u00f1a vista previa del sitio web. La parte inferior de la interfaz tiene una secci\u00f3n de Estado del sitio con un bot\u00f3n Detener sitio.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-186952\" class=\"wp-caption-text\">La interfaz principal de DevKinsta.<\/figcaption><\/figure>\n<p>Si ya utilizas el paquete <code>create-block<\/code> para <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">desarrollar plugins de Bloques de WordPress<\/a>, esto instala <code>wp-scripts<\/code> junto con sus otros activos. A partir de aqu\u00ed, puedes empezar a configurar un proyecto de desarrollo de paquetes.<\/p>\n<h3>Configurar un nuevo proyecto de WordPress con wp-scripts<\/h3>\n<p>El trabajo que emprendas estar\u00e1 dentro del directorio <strong>wp-content<\/strong> de tu instalaci\u00f3n de WordPress. El subdirectorio espec\u00edfico estar\u00e1 relacionado con el tipo de proyecto que crees: <strong>wp-content\/themes<\/strong> para temas y <strong>wp-content\/plugins<\/strong> para plugins.<\/p>\n<p>En cualquier caso, la carpeta de tu proyecto debe incluir una serie de archivos y directorios:<\/p>\n<ul>\n<li>Un archivo <code>package.json<\/code>.<\/li>\n<li>Un directorio <strong>build<\/strong>.<\/li>\n<li>Un directorio <strong>src<\/strong> que tambi\u00e9n incluya un archivo <code>index.js<\/code>.<\/li>\n<\/ul>\n<p>Para crear un archivo <code>package.json<\/code>, navega hasta el directorio de tu proyecto utilizando tu Terminal o una aplicaci\u00f3n de l\u00ednea de comandos. Ejecutar el comando <code>npm init<\/code> te llevar\u00e1 a trav\u00e9s de un proceso de configuraci\u00f3n interactivo, y tu \u00abpunto de entrada\u00bb deber\u00eda 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=\"Una ventana de terminal con fondo oscuro que muestra la salida de un comando npm init para un proyecto de tema de WordPress. El texto explica que esta utilidad guiar\u00e1 al usuario en la creaci\u00f3n de un archivo package.json, incluyendo elementos comunes y sugiriendo valores por defecto razonables. Proporciona instrucciones sobre c\u00f3mo instalar paquetes y guardarlos como dependencias. El terminal muestra los detalles de la configuraci\u00f3n inicial, incluyendo el nombre del paquete, la versi\u00f3n, la descripci\u00f3n y el punto de entrada.\" width=\"1200\" height=\"420\"><figcaption id=\"caption-attachment-186953\" class=\"wp-caption-text\">Ejecuci\u00f3n parcial del proceso npm init, mostrando el valor del punto de entrada.<\/figcaption><\/figure>\n<p>A continuaci\u00f3n, instala <code>wp-scripts<\/code> como dependencia de desarrollo:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts --save-dev\n<\/code><\/pre>\n<p>Deber\u00edas ver tambi\u00e9n un par de directorios y archivos autogenerados: <strong>node_modules<\/strong> y <code>package-lock.json<\/code>. En cualquier caso, ahora tienes que hacer referencia a los scripts predefinidos dentro del archivo <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>Es probable que vuelvas a menudo a este archivo para a\u00f1adir m\u00e1s scripts cuando sea necesario. Por ejemplo:<\/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>Puede que tambi\u00e9n tengas que <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/enqueueing-assets-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">poner en cola los activos de tu tema o plugin<\/a> aqu\u00ed y luego guardar los cambios.<\/p>\n<h3>Comprender y utilizar webpack con wp-scripts<\/h3>\n<p>Para empaquetar activos ocultos, <code>wp-scripts<\/code> utiliza webpack. No necesitas configurarlo, aunque comprender su funci\u00f3n puede ayudarte a aprovechar <code>wp-scripts<\/code> de una manera m\u00e1s eficaz. Webpack tiene muchas responsabilidades en cuanto a su configuraci\u00f3n:<\/p>\n<ul>\n<li>Ayuda a resolver las dependencias entre tus m\u00f3dulos JavaScript.<\/li>\n<li>Puede transpilar JavaScript moderno a c\u00f3digo compatible con el navegador.<\/li>\n<li>Te ayudar\u00e1 a procesar y optimizar tus estilos.<\/li>\n<li>Podr\u00e1 generar mapas de fuentes para depurar m\u00e1s f\u00e1cilmente.<\/li>\n<li>Te ayudar\u00e1 a crear paquetes minificados listos para producci\u00f3n.<\/li>\n<\/ul>\n<p>Ya tienes una configuraci\u00f3n predeterminada de webpack en <code>wp-scripts<\/code>. Esto funciona bien para la mayor\u00eda de los proyectos de WordPress. En algunos casos, sin embargo, puede que necesites crear configuraciones personalizadas.<\/p>\n<h3>Configuraci\u00f3n avanzada de webpack para agencias<\/h3>\n<p>Aunque la configuraci\u00f3n predeterminada de webpack es ideal para la mayor\u00eda de los proyectos de desarrollo, hay ocasiones en las que necesitas crear una configuraci\u00f3n para tus necesidades espec\u00edficas. Por ejemplo, puedes tratar con estructuras de temas complejas o arquitecturas de plugins \u00fanicas. Aqu\u00ed es donde te resultar\u00e1 \u00fatil un archivo <code>webpack.config.js<\/code> en la ra\u00edz de tu proyecto:<\/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>Esta configuraci\u00f3n permite m\u00faltiples puntos de entrada, lo que es particularmente \u00fatil para temas o plugins que requieren scripts separados para diferentes partes del admin o frontend de WordPress. De este modo, puedes ampliar tu configuraci\u00f3n predeterminada y mantener las ventajas de <code>wp-scripts<\/code>.<\/p>\n<h2>Aspectos b\u00e1sicos del uso de wp-scripts<\/h2>\n<p>Con un entorno de desarrollo adecuado y la estructura de archivos y carpetas correcta, puedes empezar a utilizar <code>wp-scripts<\/code>. Hay unos cuantos comandos b\u00e1sicos y fundamentales que ocupar\u00e1n la mayor parte de tu tiempo.<\/p>\n<p>El comando <code>start<\/code> vigila tus archivos en busca de cambios, recompila activos sobre la marcha y proporciona recarga en caliente para una experiencia de desarrollo m\u00e1s fluida:<\/p>\n<pre><code class=\"language-bash\">npm run start\n<\/code><\/pre>\n<p>Util\u00edzalo al principio de un proyecto para iniciar un servidor de desarrollo, aunque no optimizar\u00e1 el c\u00f3digo compilado dentro de tu archivo <strong>build\/index.js<\/strong>.<\/p>\n<p>Cuando necesites desplegar tu proyecto, el comando <code>build<\/code> compilar\u00e1 tus activos para producci\u00f3n:<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Una vez que lo ejecutes, realizar\u00e1 algunas tareas. Por ejemplo, transpila tu JavaScript, compila tu Sass y SCSS a CSS, minifica todos tus activos y genera <a href=\"https:\/\/web.dev\/articles\/source-maps\" target=\"_blank\" rel=\"noopener noreferrer\">mapas de fuentes<\/a>. Al final, lo enviar\u00e1 todo al archivo <code>build\/index.js<\/code>. El proceso de construcci\u00f3n tambi\u00e9n crea un archivo <code>build\/index.asset.php<\/code> para gestionar el cache busting<\/p>\n<p>El paquete <code>wp-scripts<\/code> tambi\u00e9n proporciona varios comandos de linting para ayudarte a mantener una alta calidad del c\u00f3digo:<\/p>\n<ul>\n<li><code>npm run lint:js<\/code>. Util\u00edzalo para limpiar tus archivos JavaScript.<\/li>\n<li><code>npm run lint:css<\/code>. Esto limpia tus archivos CSS o Sass.<\/li>\n<li><code>npm run lint:pkg-json<\/code>. Valida tu archivo <code>package.json<\/code>.<\/li>\n<\/ul>\n<p>Para las pruebas unitarias, s\u00f3lo tienes que llamar a <code>npm run test<\/code>, que utiliza Jest para ejecutar tu conjunto de pruebas.<\/p>\n<h2>Explorando las utilidades b\u00e1sicas de wp-scripts<\/h2>\n<p>Las tareas b\u00e1sicas de construcci\u00f3n pueden llevarte mucho tiempo, y los comandos t\u00edpicos necesitar\u00e1n mucha automatizaci\u00f3n. Sin embargo, <code>wp-scripts<\/code> proporciona un conjunto de sofisticadas utilidades que atender\u00e1n las complejas necesidades de tu desarrollo de WordPress:<\/p>\n<ul>\n<li><strong>Compilaci\u00f3n avanzada.<\/strong> Con configuraciones optimizadas, puedes transpilar el JavaScript moderno \u2014incluidos los M\u00f3dulos ECMAScript (ESM) y Javascript XML (JSX) \u2014 y compilar Sass.<\/li>\n<li><strong>Agrupaci\u00f3n inteligente.<\/strong> Puedes aprovechar la divisi\u00f3n de c\u00f3digo (code splitting) y la depuraci\u00f3n de m\u00f3dulos innecesarios (<a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\">tree shaking<\/a>) de webpack para optimizar la entrega de tus recursos.<\/li>\n<li><strong>Linting exhaustivo.<\/strong> Puedes aplicar est\u00e1ndares de codificaci\u00f3n en los archivos JavaScript, CSS y <code>package.json<\/code>.<\/li>\n<li><strong>Pruebas integradas.<\/strong> Con Jest, puedes ejecutar pruebas unitarias e informes de cobertura.<\/li>\n<li><strong>Servidor de desarrollo.<\/strong> Puedes utilizar la recarga en caliente para un desarrollo r\u00e1pido en m\u00faltiples proyectos.<\/li>\n<\/ul>\n<p>Puedes ampliar la funcionalidad predeterminada de cada uno para aprovechar un proceso de desarrollo de WordPress m\u00e1s personalizado, independientemente de si trabajas con temas o plugins.<\/p>\n<h3>Manejo de JSX y JavaScript moderno<\/h3>\n<p>Muchos proyectos de WordPress trabajan con <a href=\"https:\/\/kinsta.com\/es\/blog\/javascript-react\/\">elementos modernos de JavaScript<\/a>, como <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-tutoriales-de-react\/\">componentes React<\/a>, funciones de flecha, desestructuraci\u00f3n, <code>async<\/code>\/<code>await<\/code>, y mucho m\u00e1s. Incluso algunos aspectos del c\u00f3digo base, como el Editor de Bloques, utilizan JavaScript moderno para construir su funcionalidad.<\/p>\n<p>Sin embargo, los navegadores no entienden de forma nativa estas sintaxis avanzadas, por lo que es necesario m\u00e1s trabajo para transpilarlas y compilarlas.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-jsx\/\">JSX<\/a> te permite escribir c\u00f3digo similar al HTML dentro de tu JavaScript, lo que facilita la descripci\u00f3n del aspecto que deben tener tus interfaces y otros elementos. Para empezar, esto puede mejorar la legibilidad y la capacidad de mantenimiento. Tambi\u00e9n puedes acceder a potentes componentes React para crear interfaces de usuario (IU) din\u00e1micas.<\/p>\n<p><code>wp-scripts<\/code> utiliza el <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">compilador de JavaScript Babel<\/a> para transpilar tu JavaScript y JSX modernos en c\u00f3digo que los navegadores puedan entender. Se encarga de toda la configuraci\u00f3n compleja y necesaria, lo que te permite centrarte en escribir c\u00f3digo.<\/p>\n<p>Puedes aprovechar esto a trav\u00e9s de tu archivo <code>src\/index.js <\/code>. Echa un vistazo a este peque\u00f1o ejemplo de c\u00f3mo podr\u00edas implementar JSX y JavaScript moderno utilizando <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>Tambi\u00e9n tienes que poner en cola el script dentro del archivo <strong>functions.php<\/strong> de tu tema, o dentro del archivo principal de tu 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>Una vez que ejecutes el comando <code>npx wp-scripts build<\/code>, <code>wp-scripts<\/code> transpilar\u00e1 tu JavaScript y JSX modernos para crear un archivo <code>build\/index.js<\/code> compatible con el navegador.<\/p>\n<h3>Comprobaciones de calidad del c\u00f3digo y linting sofisticado<\/h3>\n<p>El paquete <code>wp-scripts<\/code> incluye varias herramientas que te ayudar\u00e1n a mantener la calidad del c\u00f3digo y a imponer un estilo coherente en todos tus proyectos: Junto con ESLint y Prettier, tambi\u00e9n puedes acceder a <strong>stylelint<\/strong> para CSS y SCSS linting.<\/p>\n<p>El primer paso es a\u00f1adir los scripts de linting a tu archivo <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>A continuaci\u00f3n, crea archivos de configuraci\u00f3n personalizados en el directorio ra\u00edz de tu proyecto. Por ejemplo, ESLint requiere que trabajes dentro del archivo <code>.eslintrc.js<\/code>. Este ejemplo (en parte) impone el uso de literales de plantilla para cadenas en tu 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 stylelint, edita el archivo <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>Si mantienes una gran base de c\u00f3digo en varios proyectos, tener un estilo de c\u00f3digo coherente es crucial. De este modo, puedes ampliar las configuraciones por defecto de ESLint y stylelint para hacer cumplir las normas de codificaci\u00f3n de tu agencia.<\/p>\n<p>A partir de aqu\u00ed, puedes ejecutar <code>npm run lint<\/code> para poner en marcha este proceso, ampliado con el tipo de linter espec\u00edfico. Por ejemplo, si tienes c\u00f3digo que establece alguna concatenaci\u00f3n t\u00edpica&#8230;<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(\"Hello \" + name + \"!\");\n<\/code><\/pre>\n<p>&#8230;al ejecutar <code>npm run lint:js<\/code> se marcar\u00e1 un error y se te sugerir\u00e1 que utilices en su lugar un literal de plantilla:<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(`Hello ${name}!`);\n<\/code><\/pre>\n<p>Esta es una forma inestimable de limpiar el c\u00f3digo de tu tema o plugin de WordPress y te da la posibilidad de adaptar el conjunto de reglas a tus necesidades y normas espec\u00edficas.<\/p>\n<h3>Pruebas unitarias<\/h3>\n<p>Las pruebas unitarias son cruciales para garantizar la fiabilidad y la capacidad de mantenimiento de tu c\u00f3digo. La herramienta que utiliza <code>wp-scripts<\/code> como framework de pruebas es Jest.<\/p>\n<p>Cuando ejecutas el comando <code>test<\/code>, Jest busca archivos con las extensiones <code>.test.js<\/code> o <code>.spec.js<\/code>, o archivos en un directorio <strong>__tests__<\/strong>. A continuaci\u00f3n, ejecuta las pruebas definidas en estos archivos e informa de los resultados.<\/p>\n<p>Primero tienes que hacer referencia al script de prueba dentro de tu archivo <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>Si lo necesitas, crea un archivo 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 de aqu\u00ed, crea un archivo de prueba, 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>Una vez que ejecutes el comando <code>npm run test<\/code>, <code>wp-scripts<\/code> encontrar\u00e1 y ejecutar\u00e1 autom\u00e1ticamente todos los archivos con la extensi\u00f3n <strong>.test.js<\/strong>. Tambi\u00e9n puedes ampliar la configuraci\u00f3n predeterminada de Jest para dar soporte a cualquier necesidad avanzada de pruebas, como la cobertura de pruebas:<\/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>Esta configuraci\u00f3n a\u00f1ade un archivo de configuraci\u00f3n personalizado, especifica los archivos que se incluir\u00e1n en los informes de cobertura y establece umbrales de cobertura para garantizar una cobertura de pruebas completa en todos tus proyectos. Cuando ejecutes estas pruebas, Jest proporcionar\u00e1 una salida que mostrar\u00e1 las pruebas que pasan y las que fallan.<\/p>\n<p>Ampliar las capacidades de tus pruebas unitarias de este modo puede ofrecer una mejora significativa de la calidad y fiabilidad de tus temas y plugins de WordPress, y agilizar todo tu proceso de desarrollo.<\/p>\n<h2>C\u00f3mo integrar wp-scripts en tus flujos de trabajo<\/h2>\n<p>El alcance del uso de wp-scripts es tan amplio como necesites. Para ilustrarlo, repasemos algunos enfoques r\u00e1pidos que podr\u00edas adoptar al utilizar <code>wp-scripts<\/code> para automatizar tareas habituales.<\/p>\n<h3>Crear plantillas de proyecto reutilizables<\/h3>\n<p>Es probable que tengas que iniciar nuevos proyectos con frecuencia \u2014 incluso a diario. Crear una plantilla de proyecto personalizada mediante la preconfiguraci\u00f3n de <code>wp-scripts<\/code> preconfigurado puede ahorrarte mucho tiempo de configuraci\u00f3n.<\/p>\n<p>Puedes empezar con un proyecto base: un nuevo tema o plugin de WordPress que incluya tu configuraci\u00f3n de <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>A continuaci\u00f3n, configura la estructura del proyecto y crea los directorios y archivos necesarios:<\/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>En este punto, configura <code>wp-scripts<\/code> y actualiza el archivo <code>package.json<\/code> con los comandos pertinentes:<\/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>Puedes ampliar esto para crear configuraciones para webpack, ESLint y stylelint.<\/p>\n<p>Para hacer de esto una plantilla reutilizable a la que sea f\u00e1cil acceder, lo ideal es un <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-github\/\">repositorio de GitHub<\/a>. Por ejemplo, considera un origen remoto de <code>https:\/\/github.com\/your-agency\/theme-template.git<\/code>.<\/p>\n<p>Cuando comiences un nuevo proyecto, puedes ejecutar un comando sencillo:<\/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>Esto clonar\u00e1 tu repositorio de plantillas y crear\u00e1 un nuevo tema con tu configuraci\u00f3n predefinida <code>wp-scripts<\/code>.<\/p>\n<p>Puedes personalizar a\u00fan m\u00e1s la plantilla a\u00f1adiendo c\u00f3digo boilerplate espec\u00edfico de la agencia, como funciones o componentes de uso com\u00fan. Es importante mantener actualizado este repositorio de plantillas, utilizando la \u00faltima versi\u00f3n de <code>wp-scripts<\/code> e implementando cualquier mejora del flujo de trabajo que decidas.<\/p>\n<h3>Control de versiones y colaboraci\u00f3n<\/h3>\n<p>Cuando se trata de <code>wp-scripts<\/code> y de trabajar con el control de versiones, puedes hacer m\u00e1s. Aunque, a menudo, debes aplicar algunas pr\u00e1cticas comunes para asegurarte de que mantienes alta la calidad del c\u00f3digo:<\/p>\n<ul>\n<li>Incluye <code>package.json<\/code> y <code>package-lock.json<\/code> en el control de versiones. Esto garantiza que todos los miembros del equipo utilizar\u00e1n las mismas dependencias.<\/li>\n<li>Aseg\u00farate de incluir en tu archivo <code>.gitignore<\/code> artefactos de construcci\u00f3n como <strong>\/build<\/strong> y <strong>\/node_modules<\/strong>.<\/li>\n<li>Aseg\u00farate de hacer referencia a todos los scripts que necesites en tu archivo <code>package.json<\/code> antes de hacer commit.<\/li>\n<li>Considera la posibilidad de utilizar un archivo <code>.nvmrc<\/code> para especificar la versi\u00f3n correcta de Node.js para tu proyecto.<\/li>\n<\/ul>\n<p>Puedes optar por implementar <a href=\"https:\/\/kinsta.com\/es\/blog\/git-hooks\/\">hooks pre-commit<\/a> a trav\u00e9s de herramientas como <a href=\"https:\/\/typicode.github.io\/husky\/\">Husky<\/a>. Esta es una buena forma de ejecutar un linter antes de cada commit, como ejemplo:<\/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>De este modo, puedes asegurarte de que haces lint y pruebas autom\u00e1ticamente antes de commits y env\u00edos. Es otra forma de mantener la calidad del c\u00f3digo en todo tu equipo.<\/p>\n<h3>Integraci\u00f3n continua y despliegue continuo (CI\/CD)<\/h3>\n<p>Integrar <code>wp-scripts<\/code> en tu proceso CI\/CD puede agilizar el proceso de despliegue tanto de temas como de plugins. <a href=\"https:\/\/kinsta.com\/es\/blog\/como-configurar-pipeline-ci-cd\/\">GitHub Actions<\/a>\u00a0son s\u00f3lo una forma de integrar esto en tu configuraci\u00f3n de <code>wp-scripts<\/code>.<\/p>\n<p>El primer paso es crear un archivo de flujo de trabajo dedicado dentro de un directorio de <strong>flujos de trabajo<\/strong> de tu repositorio:<\/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>El paso de despliegue variar\u00e1 en funci\u00f3n de tu host. Puedes utilizar rsync, integrarte con servicios como <a href=\"https:\/\/www.deployhq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DeployHQ<\/a> o <a href=\"https:\/\/kinsta.com\/partners\/buddy\/\">Buddy<\/a>, o bien optar por una <a href=\"https:\/\/kinsta.com\/es\/blog\/como-configurar-pipeline-ci-cd\/#trigger-deployment-with-curl-in-cicd-pipeline\">simple integraci\u00f3n cURL<\/a>. Si tu despliegue requiere contrase\u00f1as o claves, debes a\u00f1adirlas como secretos a la configuraci\u00f3n de tu repositorio de GitHub.<\/p>\n<p>Este flujo de trabajo ejecuta linters, pruebas y construye tu proyecto en cada push y pull request. Lo mejor de todo es que s\u00f3lo se despliega cuando env\u00edas cambios a la rama principal.<\/p>\n<h3>Crear una herramienta de interfaz de l\u00ednea de comandos (CLI) personalizada<\/h3>\n<p>Si necesitas herramientas personalizadas, <code>wp-scripts<\/code> puede ayudarte. Por ejemplo, puede que quieras desplegar una herramienta CLI personalizada que se adapte a las necesidades de tu agencia.<\/p>\n<p>En algunos casos, tu herramienta necesitar\u00e1 algunas dependencias:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts commander chalk\n<\/code><\/pre>\n<p>Aqu\u00ed, <a href=\"https:\/\/www.npmjs.com\/package\/commander\" target=\"_blank\" rel=\"noopener noreferrer\">Commander<\/a> analiza los argumentos de la l\u00ednea de comandos, y <a href=\"https:\/\/www.npmjs.com\/package\/chalk\" target=\"_blank\" rel=\"noopener noreferrer\">Chalk<\/a> mejora la presentaci\u00f3n visual del texto de salida.<\/p>\n<p>A partir de aqu\u00ed, puedes empezar a codificar la herramienta aprovechando <code>wp-scripts<\/code>. Aqu\u00ed tienes un ejemplo de c\u00f3mo quedar\u00eda ese archivo:<\/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>Si a\u00f1ades el campo bin a tu archivo package.json, podr\u00e1s convertir la herramienta CLI en un ejecutable:<\/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 enlazar la CLI para una instalaci\u00f3n local, s\u00f3lo tienes que ejecutar <code>npm link<\/code>. Ahora puedes probar la CLI en tu aplicaci\u00f3n Terminal:<\/p>\n<pre><code class=\"language-bash\">agency-wp build\nagency-wp lint\nagency-wp deploy\n<\/code><\/pre>\n<p>Deber\u00edas publicar la herramienta en un registro npm privado para que otros miembros del equipo puedan instalarla cuando lo deseen:<\/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>Cuando la necesiten, s\u00f3lo tendr\u00e1n que ejecutar <code>npm install --save-dev agency-wp-cli<\/code> para instalar su herramienta. Desde aqu\u00ed, puedes hacer referencia a la CLI dentro de <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>Crear y utilizar una herramienta como \u00e9sta garantiza que todos los miembros de tu agencia utilicen los mismos comandos y procesos. Esto puede reducir las incoherencias y agilizar a\u00fan m\u00e1s tu flujo de trabajo de desarrollo de WordPress.<\/p>\n<h3>Optimizaci\u00f3n del rendimiento<\/h3>\n<p>Cuando gestionas varios sitios de WordPress con mucho tr\u00e1fico, la optimizaci\u00f3n del rendimiento se vuelve crucial para tu rendimiento. Hay varias t\u00e9cnicas avanzadas que <code>wp-scripts<\/code> puede ayudarte a implementar.<\/p>\n<h4>Divisi\u00f3n avanzada del c\u00f3digo<\/h4>\n<p>Por ejemplo, la divisi\u00f3n de c\u00f3digo te permite dividir tu paquete JavaScript en trozos m\u00e1s peque\u00f1os, que puedes cargar bajo demanda. Esto puede aumentar tus tiempos de carga iniciales, especialmente en aplicaciones grandes.<\/p>\n<p>En primer lugar, modifica tu archivo <code>webpack.config.js<\/code> para activar la divisi\u00f3n del 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>A lo largo de tu c\u00f3digo JavaScript, utilizas importaciones din\u00e1micas para dividirlo en trozos m\u00e1s peque\u00f1os:<\/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>Tambi\u00e9n tienes que poner en cola cada fragmento dentro de tus archivos de 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>Esto deber\u00eda reducir los tiempos de carga y tampoco lleva demasiado tiempo implementarlo.<\/p>\n<h4 id=\"tree-shaking\" class=\"has-anchor-hash\">Tree shaking<\/h4>\n<p>En el contexto de JavaScript, \u00abtree shaking\u00bb es la forma de deshacerse del c\u00f3digo no utilizado. Tanto <code>wp-scripts<\/code> como <code>webpack<\/code> realizan el \u00abtree shaking\u00bb en las construcciones de producci\u00f3n, pero puedes optimizarlo a\u00fan m\u00e1s. La aplicaci\u00f3n es m\u00e1s compleja de lo que explicamos aqu\u00ed, pero en cualquier caso, debes asegurarte de que utilizas la sintaxis de importaci\u00f3n y exportaci\u00f3n de ES6:<\/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>A continuaci\u00f3n, especifica los archivos con <a href=\"https:\/\/travislramos.com\/blog\/understanding-tree-shaking-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">\u00abside effects\u00bb<\/a> (efectos secundarios) &#8230;<\/p>\n<pre><code class=\"language-js\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": [\"*.css\", \"*.scss\"]\n}\n<\/code><\/pre>\n<p>&#8230;o m\u00e1rcalos como libres de side effects:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": false\n}\n<\/code><\/pre>\n<p>Algunas bibliotecas de mayor tama\u00f1o no admiten tree shaking, al igual que muchas otras. En estos casos, debes utilizar un plugin espec\u00edfico para el trabajo:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev babel-plugin-transform-imports\n<\/code><\/pre>\n<p>Esto tambi\u00e9n significar\u00e1 que deber\u00e1s actualizar tambi\u00e9n tus archivos de configuraci\u00f3n de babel para una instalaci\u00f3n \u00f3ptima y sin errores.<\/p>\n<h4>Optimizaci\u00f3n de activos<\/h4>\n<p>El proceso de construcci\u00f3n de <code>wp-scripts<\/code> minimizar\u00e1 los archivos CSS y JavaScript por ti, y t\u00fa tambi\u00e9n puedes llevar esto m\u00e1s all\u00e1. Por ejemplo, puedes instalar un plugin espec\u00edfico de optimizaci\u00f3n de im\u00e1genes:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev imagemin-webpack-plugin\n<\/code><\/pre>\n<p>Una vez que lo a\u00f1adas a tu archivo de configuraci\u00f3n de webpack, podr\u00e1s utilizar sugerencias de recursos a\u00f1adiendo el c\u00f3digo adecuado a tu archivo <code>functions.php<\/code> o al archivo principal del 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>Una tarea como \u00e9sta muestra la flexibilidad que tienes con <code>wp-scripts<\/code>, en la medida en que puedes adaptarlo a las necesidades de tu agencia o proyecto.<\/p>\n<h4>Analizar el tama\u00f1o del paquete<\/h4>\n<p>Comprender la composici\u00f3n de tu paquete es crucial para la optimizaci\u00f3n. Con <code>wp-scripts<\/code>, puedes hacerlo f\u00e1cilmente con la bandera <code>--analyze<\/code>.<\/p>\n<pre><code class=\"language-bash\">npm run build -- --analyze\n<\/code><\/pre>\n<p>El primer paso es a\u00f1adir el script correspondiente a tu archivo <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>Una vez que ejecutes el comando <code>analyze<\/code>, generar\u00e1 un informe que muestra el tama\u00f1o de cada m\u00f3dulo de tu paquete. Esta sencilla implementaci\u00f3n te ayuda a identificar \u00e1reas de optimizaci\u00f3n.<\/p>\n<h4>Implementaci\u00f3n del CSS cr\u00edtico<\/h4>\n<p>El CSS cr\u00edtico de tu sitio es lo m\u00ednimo que necesita tu p\u00e1gina para cargar el contenido de la parte superior de la p\u00e1gina. Al poner este CSS inline puedes mejorar el tiempo de carga percibido.<\/p>\n<p>Para conseguirlo se necesita el plugin <a href=\"https:\/\/www.npmjs.com\/package\/critical-css-webpack-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Critical CSS Webpack<\/a>:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev critical-css-webpack-plugin\n<\/code><\/pre>\n<p>La siguiente tarea es actualizar tu archivo de configuraci\u00f3n de webpack para que haga referencia al 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 poder utilizarlo, tienes que a\u00f1adir un fragmento a tu archivo <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>Esto b\u00e1sicamente extrae y pone inline el CSS cr\u00edtico para un renderizado inicial m\u00e1s r\u00e1pido. Genera CSS cr\u00edtico para tama\u00f1os de ventana espec\u00edficos, lo que puede mejorar el tiempo de carga percibido de tus temas.<\/p>\n<h2>Resumen<\/h2>\n<p>Para el desarrollo de una agencia, <code>wp-scripts<\/code> puede ser una poderosa herramienta que mejore significativamente tu flujo de trabajo, tanto para proyectos de temas como de plugins. Al proporcionar un proceso de creaci\u00f3n estandarizado, compatibilidad moderna con JavaScript y herramientas integradas de pruebas y linting, <code>wp-scripts<\/code> te permite centrarte en crear proyectos de WordPress de alta calidad mientras automatizas algunas de las tareas m\u00e1s importantes.<\/p>\n<p>Aprovechar <code>wp-scripts<\/code> no s\u00f3lo te ayuda a mantenerte al d\u00eda con las pr\u00e1cticas modernas de desarrollo. Es una forma de situarte a la vanguardia del desarrollo de WordPress, listo para afrontar los retos y oportunidades que se le presenten a tu agencia.<\/p>\n<p>\u00bfOfrece wp-scripts la funcionalidad y el alcance que necesitas para los proyectos de desarrollo de tu agencia? \u00a1Comparte tus opiniones con nosotros en la secci\u00f3n de comentarios m\u00e1s abajo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El trabajo de desarrollo de WordPress para las agencias es, en el mejor de los casos, competitivo. Requiere una eficiencia y coherencia m\u00e1ximas en los proyectos &#8230;<\/p>\n","protected":false},"author":259,"featured_media":77382,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1391,1345,1358,1351],"class_list":["post-77381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agencia","topic-desarrollo-wordpress","topic-diseno-sitios-web-wordpress","topic-rendimiento-de-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>Desarrollo avanzado de WordPress con wp-scripts<\/title>\n<meta name=\"description\" content=\"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.\" \/>\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\/es\/blog\/desarrollo-wp-scripts\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts\" \/>\n<meta property=\"og:description\" content=\"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-02T09:20:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-10T14:29:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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\/es\/blog\/desarrollo-wp-scripts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts\",\"datePublished\":\"2024-12-02T09:20:07+00:00\",\"dateModified\":\"2024-12-10T14:29:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\"},\"wordCount\":4286,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\",\"name\":\"Desarrollo avanzado de WordPress con wp-scripts\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"datePublished\":\"2024-12-02T09:20:07+00:00\",\"dateModified\":\"2024-12-10T14:29:06+00:00\",\"description\":\"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desarrollo WordPress\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Desarrollo avanzado de WordPress con wp-scripts","description":"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.","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\/es\/blog\/desarrollo-wp-scripts\/","og_locale":"es_ES","og_type":"article","og_title":"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts","og_description":"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.","og_url":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2024-12-02T09:20:07+00:00","article_modified_time":"2024-12-10T14:29:06+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png","twitter_creator":"@Kinsta_ES","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Steve Bonisteel","Tiempo de lectura":"28 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts","datePublished":"2024-12-02T09:20:07+00:00","dateModified":"2024-12-10T14:29:06+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/"},"wordCount":4286,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/","url":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/","name":"Desarrollo avanzado de WordPress con wp-scripts","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","datePublished":"2024-12-02T09:20:07+00:00","dateModified":"2024-12-10T14:29:06+00:00","description":"El desarrollo de WordPress requiere herramientas de primera categor\u00eda. Este art\u00edculo trata sobre el uso de wp-scripts, adem\u00e1s de t\u00e9cnicas de compilaci\u00f3n, linting, pruebas y mucho m\u00e1s.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Desarrollo WordPress","item":"https:\/\/kinsta.com\/es\/secciones\/desarrollo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Desarrollo avanzado de WordPress: c\u00f3mo crear tu pr\u00f3ximo proyecto con wp-scripts"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/77381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=77381"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/77381\/revisions"}],"predecessor-version":[{"id":77415,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/77381\/revisions\/77415"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/77381\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/77382"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=77381"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=77381"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=77381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}