diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-08-03 08:03:23 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-03 08:08:25 +0200 |
| commit | bf8e099b9c8b3c60d60b3712b4fc97b052c39887 (patch) | |
| tree | c101746d082c9581c94f5937519c7d0e2f4af8cb /files/fr/web/javascript/reference/statements/export | |
| parent | 844f5103992238c0c23203286dad16a466e89c97 (diff) | |
| download | translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.gz translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.tar.bz2 translated-content-bf8e099b9c8b3c60d60b3712b4fc97b052c39887.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/javascript/reference/statements/export')
| -rw-r--r-- | files/fr/web/javascript/reference/statements/export/index.md | 232 |
1 files changed, 116 insertions, 116 deletions
diff --git a/files/fr/web/javascript/reference/statements/export/index.md b/files/fr/web/javascript/reference/statements/export/index.md index 30f421a8c5..0241dc3518 100644 --- a/files/fr/web/javascript/reference/statements/export/index.md +++ b/files/fr/web/javascript/reference/statements/export/index.md @@ -10,172 +10,172 @@ tags: translation_of: Web/JavaScript/Reference/Statements/export original_slug: Web/JavaScript/Reference/Instructions/export --- -<div>{{jsSidebar("Statements")}}</div> +{{jsSidebar("Statements")}} -<p>L'instruction <strong><code>export</code></strong> est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}.</p> +L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}. -<p>Les modules exportés sont interprétés en <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a> dans tous les cas. L'instruction <code>export</code> ne peut pas être utilisée dans les scripts embarqués.</p> +Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `export` ne peut pas être utilisée dans les scripts embarqués. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">// Exporter des propriétés individuelles -export let <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var>; // utilisable avec var, const -export let <var>nom1</var> = …, <var>nom2</var> = …, …, <var>nomN</var>; // utilisable avec var, const -export function nomFonction(){...} -export class NomClasse {...} + // Exporter des propriétés individuelles + export let nom1, nom2, …, nomN; // utilisable avec var, const + export let nom1 = …, nom2 = …, …, nomN; // utilisable avec var, const + export function nomFonction(){...} + export class NomClasse {...} -// Export d'une liste de valeur -export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> }; + // Export d'une liste de valeur + export { nom1, nom2, …, nomN }; -// Renommage des valeurs exportées -export { <var>variable1</var> as <var>nom1</var>, <var>variable2</var> as <var>nom2</var>, …, <var>nomN</var> }; + // Renommage des valeurs exportées + export { variable1 as nom1, variable2 as nom2, …, nomN }; -// Renommage avec la décomposition pour l'affectation -export const { <var>nom1</var>, <var>nom2: truc</var><var> </var>} = o; + // Renommage avec la décomposition pour l'affectation + export const { nom1, nom2: truc } = o; -// Exports par défauts -export default <em>expression</em>; -export default function (…) { … } // fonctionne avec class, function* -export default function nom1(…) { … } // fonctionne avec class, function* -export { <var>nom1</var> as default, … }; + // Exports par défauts + export default expression; + export default function (…) { … } // fonctionne avec class, function* + export default function nom1(…) { … } // fonctionne avec class, function* + export { nom1 as default, … }; -// Agrégation de modules -export * from …; -export { <var>nom1</var>, <var>nom2</var>, …, <var>nomN</var> } from …; -export { <var>import1</var> as <var>nom1</var>, <var>import2</var> as <var>nom2</var>, …, <var>nomN</var> } from …; -export { default } from …;</pre> + // Agrégation de modules + export * from …; + export { nom1, nom2, …, nomN } from …; + export { import1 as nom1, import2 as nom2, …, nomN } from …; + export { default } from …; + +- `nomN` + - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script). + +## Description + +Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus : -<dl> - <dt><code>nomN</code></dt> - <dd>Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script).</dd> -</dl> +- Les exports nommés : -<h2 id="Description">Description</h2> + ```js + // exporte une fonction déclarée précédemment + export { maFonction }; -<p>Il existe deux types d'export différents : les exports <strong>nommés</strong> et les exports <strong>par défaut</strong>. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus :</p> + // exporte une constante + export const machin = Math.sqrt(2); + ``` -<ul> - <li>Les exports nommés : - <pre class="brush: js">// exporte une fonction déclarée précédemment -export { maFonction }; +- Les exports par défaut (fonction) : -// exporte une constante -export const machin = Math.sqrt(2);</pre> - </li> - <li>Les exports par défaut (fonction) : - <pre class="brush: js">export default function() {} </pre> - </li> - <li>Les exports par défaut (classe) : - <pre class="brush: js">export default class {} </pre> - </li> -</ul> + ```js + export default function() {} + ``` -<p>Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant.</p> +- Les exports par défaut (classe) : -<p>Mais un export par défaut peut être importé avec n'importe quel nom, par exemple :</p> + ```js + export default class {} + ``` -<pre class="brush: js">let k; +Les exports nommés sont utiles pour exporter plusieurs valeurs. Lors de l'importation, il est obligatoire d'utiliser le même nom de l'objet correspondant. + +Mais un export par défaut peut être importé avec n'importe quel nom, par exemple : + +```js +let k; export default k = 12; // dans le fichier test.js import m from './test'; // notez que nous avons la liberté d'utiliser import m au lieu de import k, parce que k était l'export par défaut -console.log (m); // enregistrera 12</pre> +console.log (m); // enregistrera 12 +``` -<p>La syntaxe suivante n'exporte pas le défaut depuis le module importé :</p> +La syntaxe suivante n'exporte pas le défaut depuis le module importé : -<pre class="brush: js">export * from …;</pre> +```js +export * from …; +``` -<p>Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :</p> +Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place : -<pre class="brush: js">export {default} from 'mod';</pre> +```js +export {default} from 'mod'; +``` -<p>Il est possible de renommer un export afin d'éviter des conflits de nommage :</p> +Il est possible de renommer un export afin d'éviter des conflits de nommage : -<pre class="brush: js">export { maFonction as fonction1 - maVariable as variable1 };</pre> +```js +export { maFonction as fonction1 + maVariable as variable1 }; +``` -<p>On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :</p> +On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés : -<pre class="brush: js">// Dans moduleParent.js +```js +// Dans moduleParent.js export { maFonction, maVariable } from 'moduleFils1.js'; export { maClasse } from 'moduleFils2.js' // Dans le module de plus haut niveau -import { maFonction, maVariable, maClasse } from 'moduleParent.js';</pre> +import { maFonction, maVariable, maClasse } from 'moduleParent.js'; +``` -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_d'exports_nommés">Utilisation d'exports nommés</h3> +### Utilisation d'exports nommés -<p>Dans le module, on pourra utiliser le code suivant :</p> +Dans le module, on pourra utiliser le code suivant : -<pre class="brush: js">// module "mon-module.js" +```js +// module "mon-module.js" function cube(x) { return x * x * x; } const machin = Math.PI + Math.SQRT2; export { cube, machin }; -</pre> +``` -<p>De cette façon, dans un autre script, on pourra avoir :</p> +De cette façon, dans un autre script, on pourra avoir : -<pre class="brush: js">import { cube, machin } from 'mon-module'; +```js +import { cube, machin } from 'mon-module'; console.log(cube(3)); // 27 -console.log(machin); // 4.555806215962888</pre> +console.log(machin); // 4.555806215962888 +``` -<div class="note"> -<p><strong>Note :</strong> Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} <code>"module"</code> : <code><script type="module" src="./demo.js"></script></code> sinon il y aura une erreur quant aux origines multiples (<a href="/fr/docs/Web/HTTP/CORS">CORS</a>).<br> - Il n'est pas possible de charger des modules JavaScript via une URL <code>file://</code> pour des raisons de sécurité (voir <a href="/fr/docs/Web/HTTP/CORS">CORS</a> également). Il faudra utiliser un serveur HTTP.</p> -</div> +> **Note :** Si l'import est réalisé dans un script HTML, il faut que celui-ci soit chargé avec l'attribut {{htmlattrxref("type")}} `"module"` : `<script type="module" src="./demo.js"></script>` sinon il y aura une erreur quant aux origines multiples ([CORS](/fr/docs/Web/HTTP/CORS)). +> Il n'est pas possible de charger des modules JavaScript via une URL `file://` pour des raisons de sécurité (voir [CORS](/fr/docs/Web/HTTP/CORS) également). Il faudra utiliser un serveur HTTP. -<h3 id="Utilisation_d'exports_par_défaut">Utilisation d'exports par défaut</h3> +### Utilisation d'exports par défaut -<p>Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours<em> </em>pour le module, on peut utiliser un export par défaut :</p> +Si on souhaite n'exporter qu'une seule valeur ou avoir une valeur de secours\* \*pour le module, on peut utiliser un export par défaut : -<pre class="brush: js">// module "mon-module.js" +```js +// module "mon-module.js" export default function cube(x) { return x * x * x; } -</pre> +``` -<p>Alors, dans un autre script, il sera facile d'importer l'export par défaut :</p> +Alors, dans un autre script, il sera facile d'importer l'export par défaut : -<pre class="brush: js">import cube from './mon-module.js'; +```js +import cube from './mon-module.js'; console.log(cube(3)); // 27 -</pre> - -<p>Notez qu'il n'est pas possible d'utiliser <code>var</code>, <code>let</code> ou <code>const</code> avec <code>export default</code>.</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Définition initiale</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("javascript.statements.export")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{jsxref("Instructions/import", "import")}}</li> - <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li> - <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post par Jason Orendorff</li> - <li><a href="https://exploringjs.com/es6/ch_modules.html">Livre d'Axel Rauschmayer : "Exploring JS: Modules"</a></li> - <li><a href="https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript">Un billet illustré de Lin Clark, traduit en français, sur les modules</a></li> -</ul> +``` + +Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------- | ---------------------------- | ------------------- | +| {{SpecName('ES2015', '#sec-exports', 'Exports')}} | {{Spec2('ES2015')}} | Définition initiale | +| {{SpecName('ESDraft', '#sec-exports', 'Exports')}} | {{Spec2('ESDraft')}} | | + +## Compatibilité des navigateurs + +{{Compat("javascript.statements.export")}} + +## Voir aussi + +- {{jsxref("Instructions/import", "import")}} +- [Guide sur les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules) +- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff +- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) +- [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) |
