npm<\/code>.<\/p>\nnpm<\/h3>\n
Esta gu\u00eda no entrar\u00e1 en detalles sobre todas las cosas que puede hacer con npm<\/code>, pero explicar\u00e1 el concepto b\u00e1sico y las cosas que son relevantes para nuestros prop\u00f3sitos. Lo usaremos npm<\/code>para dos cosas; para instalar las bibliotecas requeridas en nuestro proyecto y para ejecutar comandos para construir (compilar) nuestros archivos Javascript.<\/p>\nCon npm<\/code>usted puede instalar cualquier paquete Javascript p\u00fablico de c\u00f3digo abierto. Si tuvi\u00e9ramos que desarrollar con React (fuera de WordPress), necesitar\u00edamos instalar bibliotecas React y bibliotecas webpack. WordPress ofrece una amplia gama de bibliotecas (principalmente para Gutenberg) que puede instalar, pero en realidad solo estamos interesados \u200b\u200ben una: @wordpress\/scripts<\/code>\u2013 que nos ayuda a simplificar nuestra configuraci\u00f3n.<\/p>\nCada vez que instale una biblioteca, npm<\/code>se crear\u00e1 una subcarpeta " node_modules<\/code>" donde se almacenan las bibliotecas instaladas. Nunca necesitar\u00e1 ingresar a esta carpeta ni cambiar nada aqu\u00ed, pero tenga en cuenta que esta carpeta contendr\u00e1 f\u00e1cilmente (\u00a1literalmente!) decenas de miles de archivos. Esta es una carpeta que nunca debe asignar a git o incluir en cualquier tema o complemento terminado. Las bibliotecas solo se necesitan durante el desarrollo.<\/p>\nCuando su entorno est\u00e1 configurado, puede usarlo npm<\/code>para ejecutar scripts definidos en su package.json<\/code>archivo. Dependiendo del proyecto, normalmente tendr\u00eda al menos dos guiones; uno para construir los scripts y otro para iniciar el "modo de observaci\u00f3n". En el "modo de observaci\u00f3n", npm<\/code>inicia un proceso en la terminal que espera y escucha los cambios realizados en cualquier archivo, y los compila en tiempo de ejecuci\u00f3n cada vez que presiona guardar. Es posible que est\u00e9 familiarizado con este concepto si ha utilizado programas compiladores SCSS o LESS anteriormente. Es mucho m\u00e1s eficiente ejecutar un script de "vigilancia" en segundo plano que se vuelve a compilar cada vez que guarda, en lugar de ir a la terminal y ejecutar el comando de compilaci\u00f3n despu\u00e9s de cada cambio.<\/p>\npaquete web y babel<\/h3>\n
Puede obtenerlo desarrollando para Gutenberg sin hacer ning\u00fan paquete web o configuraci\u00f3n de babel. Debido a que usamos las bibliotecas de WordPress, ellos lo manejar\u00e1n por nosotros. Sin embargo, esto tiene un inconveniente: el valor predeterminado es una ubicaci\u00f3n y un nombre de archivo fijos para los archivos de origen y de salida. Todo el desarrollo de Javascript debe escribirse dentro de un archivo, en project-folder\/src\/index.js<\/code>, y la compilaci\u00f3n siempre terminar\u00e1 en project-folder\/build\/index.js<\/code>. Si est\u00e1 de acuerdo con esto, puede omitir toda la parte sobre la configuraci\u00f3n del paquete web. Sin embargo, si est\u00e1 desarrollando un tema o complemento con varias caracter\u00edsticas de Gutenberg (bloques personalizados, filtros, etc.), es posible que al menos desee un nombre de archivo de salida y una ubicaci\u00f3n diferentes, adem\u00e1s de permitir varios archivos.<\/p>\nSi usa el paquete de WordPress para manejar la configuraci\u00f3n (@wordpress\/scripts<\/code>), Babel ya est\u00e1 configurado. Pero debe tener en cuenta que es posible que el paquete de WordPress no incluya complementos que desee usar. Hay, por ejemplo, un paquete que le permite usar las nuevas llamadas "funciones de flecha" (myFunction = (param) => { }<\/code>), para definir funciones sin necesidad de vincular this<\/code>. Si absolutamente desea utilizar estas funciones de ESNext, deber\u00e1 configurar Babel usted mismo en lugar de utilizar los valores predeterminados de WordPress. Voy a explicar c\u00f3mo a continuaci\u00f3n.<\/p>\nEl proceso<\/h3>\n
El proceso de desarrollo con webpack una vez que todo est\u00e1 configurado e instalado, es navegar a la carpeta de su proyecto en la terminal e iniciar el script "ver". Permanecer\u00e1 abierto y escuchar\u00e1 los cambios realizados en sus archivos JS. Cada vez que presione guardar en sus archivos Javascript, el terminal generar\u00e1 informaci\u00f3n (con suerte) de que ha vuelto a compilar con \u00e9xito el archivo. Si hubo alg\u00fan error de compilaci\u00f3n, aparecer\u00e1 en la terminal. Para detener el proceso de "ver", presione CTRL + C.<\/p>\n
Configuraci\u00f3n del entorno<\/h2>\n
Supongo que ya tiene un WordPress local ejecut\u00e1ndose en alguna pila LAMP (programas como WampServer, XAMPP, Docker o similares), y que tiene un complemento o un tema listo para comenzar a codificar su Javascript.<\/p>\n
Recomiendo crear una subcarpeta dedicada para su desarrollo de Javascript, ya que podr\u00eda terminar con varios archivos y carpetas de configuraci\u00f3n. Esto facilita la separaci\u00f3n de archivos y carpetas (por ejemplo node_modules\/<\/code>) que no desea incluir en las confirmaciones de git o las compilaciones finales. Pero est\u00e1 perfectamente bien usar su tema principal o carpeta de complementos como carpeta de proyecto para el desarrollo de Javascript.<\/p>\nEn la terminal (la terminal de Mac OS o el s\u00edmbolo del sistema de Windows funcionan bien), navegue hasta la carpeta de su proyecto. En cuanto a este tutorial, asumir\u00e9 que estamos en un tema y hemos creado una subcarpeta vac\u00eda gutenberg-dev\/<\/code>como nuestra carpeta de proyecto.<\/p>\nEl primer paso es inicializar un proyecto npm, que b\u00e1sicamente es simplemente indicar npm<\/code>que se genere un package.json<\/code>archivo. Este package.json<\/code>archivo informa npm<\/code>sobre qu\u00e9 paquetes se requieren y qu\u00e9 scripts est\u00e1n disponibles para ejecutar. Escriba esto en la terminal;<\/p>\nnpm init -y<\/code><\/pre>\nEsto genera un package.json<\/code>archivo con contenido predeterminado en la carpeta de su proyecto.<\/p>\nA continuaci\u00f3n, instalaremos el paquete de WordPress que nos ayudar\u00e1 a reducir la cantidad de configuraci\u00f3n que tendremos que hacer. Ejecute este comando:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\nLa etiqueta --save-dev<\/code>informa npm<\/code>que las bibliotecas dadas solo son necesarias para el desarrollo y --save-exact<\/code>se asegura de que npm<\/code>solo instale una versi\u00f3n, la \u00faltima.<\/p>\nAbre el package.json<\/code>archivo en tu editor. (npm<\/code>tambi\u00e9n habr\u00e1 generado un package-lock.json<\/code>al instalar paquetes, puede simplemente ignorar este archivo, es en el package.json<\/code>que har\u00e1 cambios). Debe estar lleno con la configuraci\u00f3n predeterminada, y es posible que observe que la instalaci\u00f3n del paquete que hicimos anteriormente agreg\u00f3 una entrada @wordpress\/scripts<\/code>de una determinada versi\u00f3n en devDependencies<\/code>. A medida que instale m\u00e1s paquetes, npm<\/code>se actualizar\u00e1 package.json<\/code>con entradas para cada paquete. Todo lo que debemos preocuparnos en este archivo es la scripts<\/code>propiedad, que son para scripts (comandos) que puede usar npm<\/code>para ejecutar. Actualice la propiedad de scripts en esto (puede eliminar la "prueba" predeterminada):<\/p>\n\"scripts\": {\n \"build\": \"wp-scripts build\",\n \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\nEste fragmento de c\u00f3digo dice npm<\/code>que tenemos dos scripts que podemos ejecutar en esta carpeta de proyecto; \u00abconstruir" y \u00abcomenzar\u00bb. Ejecutamos un script con el comando npm run <scriptname><\/code>, en el que npm<\/code>buscar\u00e1 package.json<\/code>y ejecutar\u00e1 el comando definido como su valor. Usamos la herramienta wp-scripts<\/code>que viene en el paquete que instalamos hace un momento para compilar nuestro Javascript una vez (\"build\"<\/code>) o iniciar el modo "ver"\/"escuchar" para compilar cada vez que guardamos los cambios (\"start\"<\/code>).<\/p>\nEsto tambi\u00e9n nos permite usar el paquete web de WordPress y la configuraci\u00f3n de Babel, por lo que no tenemos que hacerlo nosotros mismos.<\/p>\n
En la carpeta de su proyecto, cree una subcarpeta llamada src\/<\/code>. Dentro de esta carpeta crea un index.js<\/code>archivo.<\/p>\nSi est\u00e1 de acuerdo con los valores predeterminados del paquete web, \u00a1ya ha terminado! Escriba su c\u00f3digo ES6 y JSX en index.js<\/code>, y d\u00edgale npm<\/code>que los compile ejecutando el comando de compilaci\u00f3n:<\/p>\nnpm run build<\/code><\/pre>\no inicie un proceso de "observaci\u00f3n" en la terminal que escuche los cambios realizados con este comando (utilice CTRL+C para detener el proceso de observaci\u00f3n):<\/p>\n
npm run start<\/code><\/pre>\nEjecutar cualquiera de estos generar\u00e1 una build\/<\/code>subcarpeta en su proyecto directamente con el resultado compilado en formato build\/index.js<\/code>.<\/p>\n\u00a1Eso es todo para la configuraci\u00f3n del entorno m\u00e1s b\u00e1sica! \u00a1Ya est\u00e1 listo para escribir Javascript ES6 para Gutenberg!<\/strong><\/p>\nSi desea cambiar la ubicaci\u00f3n y los nombres de archivo de sus archivos fuente o de salida, siga leyendo.<\/p>\n
Configuraci\u00f3n de rutas y nombres de archivos de origen y salida<\/h3>\n
Si usted, como yo, no est\u00e1 satisfecho con el nombre de archivo y la estructura predeterminados, especialmente para los archivos de salida, debe considerar la configuraci\u00f3n del paquete web. Normalmente, por ejemplo, si estuviera desarrollando para React fuera de WordPress, necesitar\u00eda configurar una configuraci\u00f3n de paquete web completo con el complemento Babel. Afortunadamente, WordPress se encarga de esto por nosotros y nos permite extender la configuraci\u00f3n del propio paquete web de WordPress y ajustar solo las partes que queremos cambiar.<\/p>\n
En la carpeta de su proyecto (la misma carpeta que package.json<\/code>) cree un archivo llamado webpack.config.js<\/code>y \u00e1bralo en su editor. Escriba lo siguiente en este archivo:<\/p>\nconst defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n ...defaultConfig,\n entry: {\n 'block-mynamespace-myblock': '.\/src\/block-mynamespace-myblock.js'\n },\n output: {\n path: path.join(__dirname, '..\/assets\/js\/gutenberg'),\n filename: '[name].js'\n }\n}<\/code><\/pre>\nLo primero que hacemos es obtener @wordpress\/scripts<\/code>la configuraci\u00f3n del paquete web en la variable defaultConfig<\/code>. Dentro de la configuraci\u00f3n del paquete web module.exports<\/code>, lo primero que hacemos es aplicar todo defaultConfig<\/code>utilizando el operador de propagaci\u00f3n (...<\/code>). Estas dos partes se aseguran de que ampliemos la configuraci\u00f3n del paquete web de WordPress al incluir todo lo que contiene. Despu\u00e9s del operador de propagaci\u00f3n podemos ajustar o agregar cualquier propiedad que deseemos cambiar; en nuestro caso, la ubicaci\u00f3n de origen y la ubicaci\u00f3n de salida.<\/p>\nLa entry<\/code>propiedad define los archivos de origen, que es por defecto .\/src\/index.js<\/code>. Cada entrada en entry<\/code>la propiedad es un par clave+valor que el paquete web compilar\u00e1 (y observar\u00e1). En el ejemplo anterior, he definido ‘ block-mynamespace-myblock<\/code>‘ ubicado en src\/block-mynamespace-myblock.js<\/code>como un punto de entrada. Puede agregar tantos pares clave+valor aqu\u00ed para cada archivo fuente que desee compilar.<\/p>\nLa output<\/code>propiedad decide la ubicaci\u00f3n de los archivos compilados. En path<\/code>usted define la carpeta de destino para todos los archivos compilados. Estoy usando un asistente de ruta para poder navegar por los directorios correctamente en mi configuraci\u00f3n. En el ejemplo anterior, le digo a webpack que todos los archivos compilados deber\u00edan terminar en mi theme-folder\/assets\/js\/gutenberg\/<\/code>carpeta. Lo importante es usar ..\/<\/code>para desplazarse hacia arriba en el \u00e1rbol de directorios, fuera de la carpeta del proyecto y en otra carpeta donde quiero que est\u00e9n todos los archivos Javascript de mi tema. Ajuste la ruta para que se ajuste a la estructura de su proyecto.<\/p>\nEn segundo lugar, le digo a webpack que todos los nombres de archivo deben nombrarse como sus entry<\/code>nombres de clave correspondientes. Esta configuraci\u00f3n de paquete web compilar\u00e1 mi theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>archivo theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Si tuviera que agregar otro archivo fuente como par clave+valor en entry<\/code>, se compilar\u00eda en la misma carpeta con la clave como nombre de archivo.<\/p>\nRealice los ajustes deseados en su webpack.config.js<\/code>archivo y gu\u00e1rdelo. Vuelva a ejecutar cualquiera de los npm<\/code>comandos de compilaci\u00f3n para generar archivos en sus nuevas ubicaciones.<\/p>\n\u00a1Eso es todo! Ahora ha ampliado la configuraci\u00f3n del paquete web de WordPress y ahora controla d\u00f3nde deben ir su fuente y sus archivos de salida.<\/strong><\/p>\nSin embargo, quiero incluir un \u00faltimo consejo en esta gu\u00eda. La configuraci\u00f3n predeterminada de WordPress para Babel podr\u00eda carecer de ciertos complementos de Babel para ciertas caracter\u00edsticas nuevas en ESNext. Por ejemplo, con el valor predeterminado anterior y los valores predeterminados de WordPress, no podr\u00e1 usar funciones de flecha en su c\u00f3digo. Si esto te importa, sigue leyendo.<\/p>\n
Agregue soporte para las sintaxis ESNext m\u00e1s nuevas con Babel<\/h3>\n
Al momento de escribir esto, la configuraci\u00f3n predeterminada de Babel de WordPress no tiene soporte para "sintaxis experimentales", que incluye, por ejemplo, funciones de flecha. Para agregar soporte para esto, debe proporcionar su archivo de configuraci\u00f3n de Babel, y hasta el momento no he encontrado una manera de extender la configuraci\u00f3n de Babel de WordPress como lo hicimos con la configuraci\u00f3n del paquete web anterior. Por lo tanto, debemos redefinir los ajustes preestablecidos de Babel y agregar el complemento de "sintaxis experimentales". Pero no te preocupes, es un archivo muy peque\u00f1o.<\/p>\n
El primer paso es instalar algunos paquetes que necesitamos para los ajustes preestablecidos de Babel; necesitamos instalar los mismos definidos en la configuraci\u00f3n de Babel de WordPress. Ejecute este comando para instalar @babel\/preset-env<\/code>y @babel\/preset-react<\/code>, as\u00ed como el paquete que nos interesa; @babel\/plugin-proposal-class-properties<\/code>:<\/p>\nnpm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\nEl segundo paso es agregar el archivo de configuraci\u00f3n de Babel. En la carpeta de su proyecto, cree un archivo llamado .babelrc<\/code>(sin extensi\u00f3n de archivo).<\/p>\nNota para Windows: si est\u00e1 sentado en una m\u00e1quina con Windows, no puede crear archivos sin extensiones de archivo. Para evitar esto, puede crear este archivo usando terminal\/S\u00edmbolo del sistema. Ejecute este comando:<\/p>\n
echo hi > .babelrc<\/code><\/pre>\nEste comando generar\u00e1 "hola" en el archivo .babelrc<\/code>de la carpeta actual. Ahora puede abrir este archivo en su editor, eliminar el "hola" y agregar el contenido real a continuaci\u00f3n.<\/p>\nDeber\u00eda .babelrc<\/code>verse algo como esto:<\/p>\n{\n \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n \"plugins\": [\n [\n \"@babel\/plugin-proposal-class-properties\"\n ]\n ]\n}<\/code><\/pre>\nDefinimos los mismos ajustes preestablecidos que normalmente har\u00eda en un proyecto de React, y lo mismo que hace WordPress. Lo que estamos agregando es la plugins<\/code>propiedad. Dentro de la matriz de plugins<\/code>a\u00f1adimos el @babel\/plugin-proposal-class-properties<\/code>complemento de Babel necesario para las "sintaxis experimentales", como las funciones de flecha.<\/p>\nConclusi\u00f3n<\/h2>\n
Tenga en cuenta que WordPress puede cambiar su configuraci\u00f3n en cualquier momento, esto es especialmente probable porque Gutenberg es bastante nuevo. Debido a que ampliamos la configuraci\u00f3n de WordPress, es posible que en alg\u00fan momento necesitemos actualizar nuestra configuraci\u00f3n nuevamente para satisfacer nuestras necesidades. Quiz\u00e1s WordPress decida incluir soporte para sintaxis experimentales para que no tengamos que hacer toda la configuraci\u00f3n de Babel.<\/p>\n
Esta no es de ninguna manera una gu\u00eda exhaustiva para configurar Webpack y Babel, sino el resultado de una gran cantidad de experimentos y desciframientos. Espero que esto le haya ayudado a aprender a configurar su propio entorno de desarrollo de Gutenberg, y lo haya hecho lo suficientemente f\u00e1cil para que no sea un obst\u00e1culo tan grande para comenzar a aprender ES6, ESNext, JSX y todas esas cosas buenas beneficiosas para desarrollar para Gutenberg!<\/p>\n
Fuente de grabaci\u00f3n:
awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"Esta es una gu\u00eda completa sobre c\u00f3mo configurar npm, webpack y babel para escribir c\u00f3digo para Gutenberg con sintaxis ES6, ESNext y JSX.<\/p>\n","protected":false},"author":1,"featured_media":151834,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[810,831,935,935,914,1110,914,810,831,840,840,861,861],"tags":[1172],"class_list":["post-233829","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-complementos","category-guia-para-principiantes","category-gutenberg-2","category-otro","category-n-a","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=233829"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233829\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}