{"meta":{"title":"Création d’une action JavaScript","intro":"Dans ce tutoriel, vous apprendrez à créer une action JavaScript à l'aide de la boîte à outils Actions.","product":"GitHub Actions","breadcrumbs":[{"href":"/fr/actions","title":"GitHub Actions"},{"href":"/fr/actions/tutorials","title":"Tutoriels"},{"href":"/fr/actions/tutorials/create-actions","title":"Créer des actions"},{"href":"/fr/actions/tutorials/create-actions/create-a-javascript-action","title":"Créer une action JavaScript"}],"documentType":"article"},"body":"# Création d’une action JavaScript\n\nDans ce tutoriel, vous apprendrez à créer une action JavaScript à l'aide de la boîte à outils Actions.\n\n## Introduction\n\nDans ce guide, vous allez découvrir les composants de base qui sont nécessaires pour créer et utiliser une action JavaScript empaquetée. Afin de nous concentrer sur les composants nécessaires à l’empaquetage de l’action, nous avons réduit la fonctionnalité du code de l’action à son strict minimum. L’action affiche « Hello World » dans les journaux ou « Hello \\[who-to-greet] » si vous fournissez un nom personnalisé.\n\nCe guide utilise le GitHub Actions module toolkit Node.js pour accélérer le développement. Pour plus d’informations, consultez le dépôt [actions/toolkit](https://github.com/actions/toolkit).\n\nUne fois que vous aurez terminé ce projet, vous saurez comment créer votre propre action JavaScript et la tester dans un workflow.\n\nPour garantir la compatibilité de vos actions JavaScript avec tous les exécuteurs hébergés sur GitHub (Ubuntu, Windows et macOS), le code JavaScript packagé que vous écrivez doit être du code JavaScript pur et ne doit pas dépendre d’autres fichiers binaires. Les actions JavaScript s’exécutent directement sur l’exécuteur et utilisent des fichiers binaires qui existent déjà dans l’image de l’exécuteur.\n\n> \\[!WARNING]\n> Lors de la création de flux de travail et d’actions, vous devez toujours déterminer si votre code pourrait exécuter des entrées non fiables provenant de personnes malveillantes potentielles. Certains contextes doivent être traités comme des entrées non fiables, car un attaquant peut insérer son propre contenu malveillant. Pour plus d’informations, consultez « [Informations de référence sur l’utilisation sécurisée](/fr/actions/reference/security/secure-use#good-practices-for-mitigating-script-injection-attacks) ».\n\n## Prérequis\n\nAvant de commencer, vous devez télécharger Node.js et créer un dépôt public GitHub .\n\n1. Téléchargez et installez Node.js 24.x, qui inclut npm.\n\n   <https://nodejs.org/en/download/>\n\n2. Créez un nouveau dépôt public sur GitHub et appelez-le « hello-world-javascript-action ». Pour plus d’informations, consultez « [Création d’un dépôt](/fr/repositories/creating-and-managing-repositories/creating-a-new-repository) ».\n\n3. Clonez votre dépôt sur votre ordinateur. Pour plus d’informations, consultez « [Clonage d’un dépôt](/fr/repositories/creating-and-managing-repositories/cloning-a-repository) ».\n\n4. À partir de votre terminal, remplacez les répertoires par votre nouveau dépôt.\n\n   ```shell copy\n   cd hello-world-javascript-action\n   ```\n\n5. À partir de votre terminal, initialisez le répertoire avec npm pour générer un fichier `package.json`.\n\n   ```shell copy\n   npm init -y\n   ```\n\n## Création d’un fichier de métadonnées d’action\n\nCréez un fichier nommé `action.yml` dans le répertoire `hello-world-javascript-action` avec l’exemple de code suivant. Pour plus d’informations, consultez « [Référence syntaxique des métadonnées](/fr/actions/reference/workflows-and-actions/metadata-syntax) ».\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: node24\n  main: dist/index.js\n```\n\nCe fichier définit l’entrée `who-to-greet` et la sortie`time`. Il indique également à l’exécuteur d’actions comment exécuter cette action JavaScript.\n\n## Ajouter des paquets d'ensemble d'outils d'actions\n\nLe kit de ressources d’actions est une collection de packages Node.js qui vous permet de créer rapidement des actions JavaScript avec plus de cohérence.\n\nLe package [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) du kit de ressources fournit une interface aux commandes de workflow, aux variables d’entrée et de sortie, aux états de sortie et aux messages de débogage.\n\nLe kit de ressources offre également un package [`@actions/github`](https://github.com/actions/toolkit/tree/main/packages/github) qui retourne un client REST Octokit authentifié et un accès aux contextes GitHub Actions.\n\nLe kit de ressources offre plus que les packages `core` et `github`. Pour plus d’informations, consultez le dépôt [actions/toolkit](https://github.com/actions/toolkit).\n\nÀ partir de votre terminal, installez les packages `core` et `github` du kit de ressources d’actions.\n\n```shell copy\nnpm install @actions/core @actions/github\n```\n\nVous devriez maintenant voir un répertoire `node_modules` et un fichier `package-lock.json` qui suivent toutes les dépendances installées ainsi que leurs versions. Vous ne devez pas commiter le répertoire `node_modules` dans votre référentiel.\n\n## Écriture du code d’action\n\nCette action utilise le kit de ressources pour obtenir la variable d’entrée `who-to-greet` nécessaire dans le fichier de métadonnées de l’action, et affiche « Hello \\[who-to-greet] » dans un message de débogage dans le journal. Ensuite, le script obtient l’heure actuelle et la définit comme une variable de sortie que pourront utiliser les prochaines actions d’un travail.\n\nGitHub Actions fournissez des informations contextuelles sur l’événement webhook, les références Git, le flux de travail, l’action et la personne qui a déclenché le flux de travail. Pour accéder aux informations de contexte, vous pouvez utiliser le package `github`. L’action que vous allez écrire affiche la charge utile de l’événement webhook dans le journal.\n\nAjoutez un fichier nommé `src/index.js` en utilisant le code suivant.\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 une erreur est provoquée dans l’exemple `index.js` ci-dessus, `core.setFailed(error.message);` utilise le paquet [`@actions/core`](https://github.com/actions/toolkit/tree/main/packages/core) de l’outil d’actions pour enregistrer un message et définir un code de sortie d’échec. Pour plus d’informations, consultez « [Définition des codes de sortie pour les actions](/fr/actions/how-tos/create-and-publish-actions/set-exit-codes) ».\n\n## Création d’un fichier README\n\nPour expliquer aux utilisateurs comment utiliser votre action, vous pouvez créer un fichier README. Un fichier README est très utile si vous prévoyez de partager votre action publiquement, mais c’est aussi un excellent moyen de vous rappeler comment utiliser l’action.\n\nDans votre répertoire `hello-world-javascript-action`, créez un fichier `README.md` qui spécifie les informations suivantes :\n\n* Une description détaillée de ce que fait l’action.\n* Les arguments d’entrée et de sortie obligatoires.\n* Les arguments d’entrée et de sortie facultatifs.\n* Les secrets utilisés par l’action.\n* Les variables d’environnement utilisées par l’action.\n* Un exemple d’utilisation de votre action dans un workflow.\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## Valider, baliser et envoyer votre action\n\nGitHub télécharge chaque action exécutée dans un workflow au moment de l’exécution et l’exécute comme un paquet de code complet avant que vous puissiez utiliser des commandes de workflow comme `run` pour interagir avec la machine d’exécution. Cela signifie que vous devez inclure toutes les dépendances de package qui sont nécessaires pour exécuter le code JavaScript. Par exemple, cette action utilise les packages `@actions/core` et `@actions/github`.\n\nVérifier votre répertoire `node_modules` peut entraîner des problèmes. Vous pouvez également utiliser des outils tels que [`rollup.js`](https://github.com/rollup/rollup) ou [`@vercel/ncc`](https://github.com/vercel/ncc) pour regrouper votre code et ses dépendances dans un seul fichier à distribuer.\n\n1. Installez `rollup` et ses plugins en exécutant cette commande dans votre terminal.\n\n   `npm install --save-dev rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve`\n\n2. Créez un nouveau fichier nommé `rollup.config.js` à la racine de votre référentiel avec le code suivant.\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. Compilez votre fichier `dist/index.js`.\n\n   `rollup --config rollup.config.js`\n\n   Vous verrez un nouveau fichier `dist/index.js` contenant votre code et toutes les dépendances.\n\n4. Depuis votre terminal, commiter les mises à jour.\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\nLorsque vous commitez et envoyez (push) votre code, votre référentiel mis à jour devrait ressembler à ceci :\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## Tester votre action dans un workflow\n\nVous êtes maintenant prêt à tester votre action dans un workflow.\n\nLes actions publiques peuvent être utilisées par les workflows dans n’importe quel dépôt. Lorsqu’une action se trouve dans un référentiel privé, les paramètres du référentiel déterminent si l’action est disponible uniquement dans le même référentiel ou dans d’autres référentiels appartenant à la même  d’entreprise. Pour plus d’informations, consultez « [Gestion des paramètres de GitHub Actions pour un référentiel](/fr/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository) ».\n\n### Exemple utilisant une action publique\n\nCet exemple montre comment votre nouvelle action publique peut être exécutée à partir d’un dépôt externe.\n\nCopiez le code YAML suivant dans un nouveau fichier à l’emplacement `.github/workflows/main.yml`, puis mettez à jour la ligne `uses: octocat/hello-world-javascript-action@1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b` avec votre nom d’utilisateur et le nom du dépôt public que vous avez créé ci-dessus. Vous pouvez également remplacer l’entrée `who-to-greet` par votre nom.\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\nLorsque ce workflow sera déclenché, l’exécuteur téléchargera l’action `hello-world-javascript-action` à partir de votre dépôt public, puis l’exécutera.\n\n### Exemple utilisant une action privée\n\nCopiez le code du workflow dans un fichier `.github/workflows/main.yml` du dépôt de votre action. Vous pouvez également remplacer l’entrée `who-to-greet` par votre nom.\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\nDans votre dépôt, cliquez sur l’onglet **Actions**, puis sélectionnez la dernière exécution du workflow. Sous **Travaux** ou dans le graphe de visualisation, cliquez sur **A job to say hello**.\n\nCliquez sur **Hello world action step** et vous devriez voir « Hello Mona the Octocat » ou le nom que vous avez utilisé pour l’entrée `who-to-greet` imprimée dans le journal. Pour voir l’horodatage, cliquez sur **Obtenir l’heure de la sortie**.\n\n## Dépôts de modèles pour créer des actions JavaScript\n\nGitHub fournit des référentiels de modèles pour la création d’actions JavaScript et TypeScript. Vous pouvez utiliser ces modèles pour commencer rapidement à créer une action qui inclut des tests, un linting et d’autres pratiques recommandées.\n\n* [Dépôt de modèles `javascript-action`](https://github.com/actions/javascript-action)\n* [Dépôt de modèles `typescript-action`](https://github.com/actions/typescript-action)\n\n## Exemples d’actions JavaScript sur GitHub.com\n\nVous trouverez de nombreux exemples d’actions JavaScript sur GitHub.com.\n\n* [DevExpress/testcafe-action](https://github.com/DevExpress/testcafe-action)\n* [duckduckgo/privacy-configuration](https://github.com/duckduckgo/privacy-configuration)"}