1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
---
title: export
slug: Web/JavaScript/Reference/Statements/export
tags:
- ECMAScript 2015
- Instruction
- JavaScript
- Modules
- export
translation_of: Web/JavaScript/Reference/Statements/export
original_slug: Web/JavaScript/Reference/Instructions/export
---
{{jsSidebar("Statements")}}
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")}}.
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.
## Syntaxe
// 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 { nom1, nom2, …, nomN };
// Renommage des valeurs exportées
export { variable1 as nom1, variable2 as nom2, …, nomN };
// Renommage avec la décomposition pour l'affectation
export const { nom1, nom2: truc } = o;
// 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 { 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 :
- Les exports nommés :
```js
// exporte une fonction déclarée précédemment
export { maFonction };
// exporte une constante
export const machin = Math.sqrt(2);
```
- Les exports par défaut (fonction) :
```js
export default function() {}
```
- Les exports par défaut (classe) :
```js
export default class {}
```
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
```
La syntaxe suivante n'exporte pas le défaut depuis le module importé :
```js
export * from …;
```
Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place :
```js
export {default} from 'mod';
```
Il est possible de renommer un export afin d'éviter des conflits de nommage :
```js
export { maFonction as fonction1
maVariable as variable1 };
```
On peut également agréger les valeurs exportées à celles d'autres modules qu'on aurait importés :
```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';
```
## Exemples
### Utilisation d'exports nommés
Dans le module, on pourra utiliser le code suivant :
```js
// module "mon-module.js"
function cube(x) {
return x * x * x;
}
const machin = Math.PI + Math.SQRT2;
export { cube, machin };
```
De cette façon, dans un autre script, on pourra avoir :
```js
import { cube, machin } from 'mon-module';
console.log(cube(3)); // 27
console.log(machin); // 4.555806215962888
```
> **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.
### Utilisation d'exports par défaut
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 :
```js
// module "mon-module.js"
export default function cube(x) {
return x * x * x;
}
```
Alors, dans un autre script, il sera facile d'importer l'export par défaut :
```js
import cube from './mon-module.js';
console.log(cube(3)); // 27
```
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)
|
