{"meta":{"title":"Creación de una acción de JavaScript","intro":"En este tutorial, aprenderás como desarrollar una acción de JavaScript usando el kit de herramientas de acciones.","product":"GitHub Actions","breadcrumbs":[{"href":"/es/actions","title":"GitHub Actions"},{"href":"/es/actions/tutorials","title":"Tutoriales"},{"href":"/es/actions/tutorials/create-actions","title":"Creación de acciones"},{"href":"/es/actions/tutorials/create-actions/create-a-javascript-action","title":"Creación de una acción de JavaScript"}],"documentType":"article"},"body":"# Creación de una acción de JavaScript\n\nEn este tutorial, aprenderás como desarrollar una acción de JavaScript usando el kit de herramientas de acciones.\n\n## Introducción\n\nEn esta guía, aprenderás acerca de los componentes básicos necesarios para crear y usar una acción de JavaScript empaquetada. Para centrar esta guía en los componentes necesarios para empaquetar la acción, la funcionalidad del código de la acción es mínima. La acción imprime \"Hello World\" en los registros o \"Hello \\[who-to-greet]\"si proporcionas un nombre personalizado.\n\nEsta guía usa el módulo Node.js del kit de herramientas GitHub Actions para acelerar el desarrollo. Para obtener más información, consulte el repositorio [actions/toolkit](https://github.com/actions/toolkit).\n\nUna vez que completes este proyecto, deberías comprender cómo crear tu propia acción de JavaScript y probarla en un flujo de trabajo.\n\nPara garantizar que tus acciones de JavaScript son compatibles con todos los ejecutores hospedados en GitHub (Ubuntu, Windows, y macOS), el código empaquetado de JavaScript que escribas debe ser puramente JavaScript y no depender de otros binarios. Las acciones de JavaScript se ejecutan directamente en el ejecutor y utiliza binarios que ya existen en la imagen del ejecutor.\n\n> \\[!WARNING]\n> Al crear flujos de trabajo y acciones, siempre debe tener en cuenta si el código podría ejecutar una entrada de posibles atacantes que no es de confianza. Se tratará a algunos contextos como una entrada no confiable, ya que un atacante podrían insertar su propio contenido malintencionado. Para más información, consulta [Referencia de uso seguro](/es/actions/security-guides/security-hardening-for-github-actions#understanding-the-risk-of-script-injections).\n\n## Prerrequisitos\n\nAntes de que comiences, necesitarás descargar Node.js y crear un repositorio público de GitHub.\n\n1. Descarga e instala Node.js 20.x, que incluye npm.\n\n   <https://nodejs.org/en/download/>\n\n2. Crea un repositorio público nuevo en GitHub y llámalo \"hello-world-javascript-action\". Para más información, consulta [Crear un repositorio nuevo](/es/repositories/creating-and-managing-repositories/creating-a-new-repository).\n\n3. Clona tu repositorio en tu computadora. Para más información, consulta [Clonar un repositorio](/es/repositories/creating-and-managing-repositories/cloning-a-repository).\n\n4. Desde tu terminal, cambia los directorios en tu repositorio nuevo.\n\n   ```shell copy\n   cd hello-world-javascript-action\n   ```\n\n5. Desde el terminal, inicialice el directorio con npm para generar un archivo `package.json`.\n\n   ```shell copy\n   npm init -y\n   ```\n\n## Crear un archivo de metadatos de una acción\n\nCree un nuevo archivo denominado `action.yml` en el directorio `hello-world-javascript-action` con el siguiente código de ejemplo. Para más información, consulta [Guía de referencia de la sintaxis de metadatos](/es/actions/creating-actions/metadata-syntax-for-github-actions).\n\n```yaml copy\nname: Hello World\ndescription: Greet someone and record the time\n\ninputs:\n  who-to-greet: # id of input\n    description: Who to greet\n    required: true\n    default: World\n\noutputs:\n  time: # id of output\n    description: The time we greeted you\n\nruns:\n  using: node20\n  main: dist/index.js\n```\n\nEste archivo define la entrada `who-to-greet` y la salida `time`. También informa al ejecutor de la acción cómo empezar a ejecutar esta acción de JavaScript.\n\n## Agregar paquetes del conjunto de herramientas para acciones\n\nEl kit de herramientas de acciones es una recopilación de los paquetes Node.js que te permiten desarrollar rápidamente acciones de JavaScript con más consistencia.\n\nEl paquete [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) del kit de herramientas proporciona una interfaz para los comandos de flujo de trabajo, las variables de entrada y salida, los estados de salida y los mensajes de depuración.\n\nEl kit de herramientas también ofrece un paquete [`@actions/github`](https://github.com/actions/toolkit/tree/main/packages/github) que devuelve un cliente REST de Octokit autenticado y acceso a contextos de GitHub Actions.\n\nEl kit de herramientas ofrece mucho más que los paquetes `core` y `github`. Para obtener más información, consulte el repositorio [actions/toolkit](https://github.com/actions/toolkit).\n\nEn el terminal, instale los paquetes `core` y `github` del kit de herramientas de acciones.\n\n```shell copy\nnpm install @actions/core @actions/github\n```\n\nAhora deberías ver un directorio `node_modules` y un archivo `package-lock.json` que realiza un seguimiento de las dependencias instaladas y sus versiones. No debes subir el directorio `node_modules` a tu repositorio.\n\n## Escribir el código de la acción\n\nEsta acción usa el kit de herramientas para obtener la variable de entrada `who-to-greet` requerida en el archivo de metadatos de la acción e imprime \"Hello \\[a\\_quien\\_se\\_salude]\" en un mensaje de depuración del registro. A continuación, el script obtiene la hora actual y la establece como una variable de salida que pueden usar las acciones que se ejecutan posteriormente en un trabajo.\n\nLas Acciones de GitHub proporcionan información de contexto sobre el evento de webhooks, las referencias de Git, el flujo de trabajo, la acción y la persona que activó el flujo de trabajo. Para acceder a la información de contexto, puede usar el paquete `github`. La acción que escribirás imprimirá el evento de webhook que carga el registro.\n\nAgregue un nuevo archivo denominado `src/index.js` con el código siguiente.\n\n```javascript copy\nimport * as core from \"@actions/core\";\nimport * as github from \"@actions/github\";\n\ntry {\n  // `who-to-greet` input defined in action metadata file\n  const nameToGreet = core.getInput(\"who-to-greet\");\n  core.info(`Hello ${nameToGreet}!`);\n\n  // Get the current time and set it as an output variable\n  const time = new Date().toTimeString();\n  core.setOutput(\"time\", time);\n\n  // Get the JSON webhook payload for the event that triggered the workflow\n  const payload = JSON.stringify(github.context.payload, undefined, 2);\n  core.info(`The event payload: ${payload}`);\n} catch (error) {\n  core.setFailed(error.message);\n}\n```\n\nSi se produce un error en el ejemplo anterior `index.js`, `core.setFailed(error.message);` usa el paquete [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) del kit de herramientas de acciones para registrar un mensaje y establecer un código de salida con errores. Para más información, consulta [Establecimiento de códigos de salida para acciones](/es/actions/creating-actions/setting-exit-codes-for-actions).\n\n## Crear un README\n\nPuedes crear un archivo README para que las personas sepan cómo usar tu acción. Un archivo README resulta más útil cuando planificas el intercambio de tu acción públicamente, pero también es una gran manera de recordarle a tu equipo cómo usar la acción.\n\nEn el directorio `hello-world-javascript-action`, cree un archivo `README.md` que especifique la información siguiente:\n\n* Una descripción detallada de lo que hace la acción.\n* Los argumentos de entrada y salida obligatorios.\n* Los argumentos de entrada y salida opcionales.\n* Los secretos que usa la acción.\n* Las variables de entorno que usa la acción.\n* Un ejemplo de cómo usar la acción en un flujo de trabajo.\n\n````markdown copy\n# Hello world JavaScript action\n\nThis action prints \"Hello World\" or \"Hello\" + the name of a person to greet to the log.\n\n## Inputs\n\n### `who-to-greet`\n\n**Required** The name of the person to greet. Default `\"World\"`.\n\n## Outputs\n\n### `time`\n\nThe time we greeted you.\n\n## Example usage\n\n```yaml\nuses: actions/hello-world-javascript-action@e76147da8e5c81eaf017dede5645551d4b94427b\nwith:\n  who-to-greet: Mona the Octocat\n```\n````\n\n## Confirmación, etiquetado e inserción de una acción\n\nGitHub descarga cada acción ejecutada en un flujo de trabajo en tiempo de ejecución y la ejecuta como un paquete completo de código antes de que puedas usar comandos de flujo de trabajo como `run` para interactuar con la máquina del ejecutor. Eso significa que debes incluir cualquier dependencia del paquete requerida para ejecutar el código de JavaScript. Por ejemplo, esta acción usa paquetes `@actions/core` y `@actions/github`.\n\nComprobar tu directorio `node_modules` puede causar problemas. Como alternativa, puedes usar herramientas como [`rollup.js`](https://github.com/rollup/rollup) o [`@vercel/ncc`](https://github.com/vercel/ncc) para combinar el código y las dependencias en un archivo para su distribución.\n\n1. Instala `rollup` y sus complementos ejecutando este comando en el terminal.\n\n   `npm install --save-dev rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve`\n\n2. Crea un nuevo archivo llamado `rollup.config.js` en la raíz del repositorio con el código siguiente.\n\n   ```javascript copy\n   import commonjs from \"@rollup/plugin-commonjs\";\n   import { nodeResolve } from \"@rollup/plugin-node-resolve\";\n\n   const config = {\n     input: \"src/index.js\",\n     output: {\n       esModule: true,\n       file: \"dist/index.js\",\n       format: \"es\",\n       sourcemap: true,\n     },\n     plugins: [commonjs(), nodeResolve({ preferBuiltins: true })],\n   };\n\n   export default config;\n   ```\n\n3. Compile el archivo `dist/index.js`.\n\n   `rollup --config rollup.config.js`\n\n   Verás un nuevo archivo `dist/index.js` con el código y las dependencias.\n\n4. Desde el terminal, confirma las actualizaciones.\n\n   ```shell copy\n   git add src/index.js dist/index.js rollup.config.js package.json package-lock.json README.md action.yml\n   git commit -m \"Initial commit of my first action\"\n   git tag -a -m \"My first action release\" v1.1\n   git push --follow-tags\n   ```\n\nAl confirmar e insertar el código, el repositorio actualizado debe tener este aspecto:\n\n```text\nhello-world-javascript-action/\n├── action.yml\n├── dist/\n│   └── index.js\n├── package.json\n├── package-lock.json\n├── README.md\n├── rollup.config.js\n└── src/\n    └── index.js\n```\n\n## Probar tu acción en un flujo de trabajo\n\nAhora estás listo para probar tu acción en un flujo de trabajo.\n\nLos flujos de trabajo de cualquier repositorio pueden usar acciones públicas. Cuando una acción está en un repositorio privado, la configuración del repositorio indica si la acción está disponible solo en el mismo repositorio o también en los demás repositorios que pertenecen a la misma al mismo usuario o la misma organización. Para más información, consulta [Administración de la configuración de GitHub Actions para un repositorio](/es/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository).\n\n### Ejemplo usando una acción pública\n\nEste ejemplo demuestra cómo se puede ejecutar tu acción nueva y pública desde dentro de un repositorio externo.\n\nCopie el siguiente código YAML en un nuevo archivo en `.github/workflows/main.yml` y actualice la línea `uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b` con su nombre de usuario y el nombre del repositorio público que ha creado anteriormente. También puede reemplazar la entrada `who-to-greet` por su nombre.\n\n```yaml copy\non:\n  push:\n    branches:\n      - main\n\njobs:\n  hello_world_job:\n    name: A job to say hello\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Hello world action step\n        id: hello\n        uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b\n        with:\n          who-to-greet: Mona the Octocat\n\n      # Use the output from the `hello` step\n      - name: Get the output time\n        run: echo \"The time was ${{ steps.hello.outputs.time }}\"\n```\n\nCuando se desencadene este flujo de trabajo, el ejecutor descargará la acción `hello-world-javascript-action` desde su repositorio público y luego la ejecutará.\n\n### Ejemplo usando una acción privada\n\nCopie el código de flujo de trabajo en un archivo `.github/workflows/main.yml` del repositorio de la acción. También puede reemplazar la entrada `who-to-greet` por su nombre.\n\n```yaml copy\non:\n  push:\n    branches:\n      - main\n\njobs:\n  hello_world_job:\n    name: A job to say hello\n    runs-on: ubuntu-latest\n\n    steps:\n      # To use this repository's private action,\n      # you must check out the repository\n      - name: Checkout\n        uses: actions/checkout@v6\n\n      - name: Hello world action step\n        uses: ./ # Uses an action in the root directory\n        id: hello\n        with:\n          who-to-greet: Mona the Octocat\n\n      # Use the output from the `hello` step\n      - name: Get the output time\n        run: echo \"The time was ${{ steps.hello.outputs.time }}\"\n```\n\nEn el repositorio, haga clic en la pestaña **Actions** y seleccione la última ejecución de flujo de trabajo. En **Jobs** o en el gráfico de visualización, haga clic en **A job to say hello**.\n\nEn el registro, debería ver el **paso de acción Hola mundo** y debería ver \"Hello Mona the Octocat\", o el nombre que haya usado para la entrada `who-to-greet` impreso en el registro. Para ver la marca de tiempo, haz clic en **Obtener la hora de salida**.\n\n## Repositorios de plantillas para crear acciones de JavaScript\n\nGitHub ofrece repositorios de plantillas para crear acciones de JavaScript y TypeScript. Puedes utilizar estas plantillas para comenzar rápidamente con la creación de una nueva acción que incluya pruebas, linting y otros procedimientos recomendados.\n\n* [              Repositorio de plantilla de `javascript-action`](https://github.com/actions/javascript-action)\n* [              Repositorio de plantilla de `typescript-action`](https://github.com/actions/typescript-action)\n\n## Acciones de JavaScript de ejemplo en GitHub.com\n\nPuedes encontrar muchos ejemplos de acciones de JavaScript en GitHub.com.\n\n* [DevExpress/testcafe-action](https://github.com/DevExpress/testcafe-action)\n* [duckduckgo/privacy-configuration](https://github.com/duckduckgo/privacy-configuration)"}