You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/13-modules/02-import-export/article.md
+5-39Lines changed: 5 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -93,36 +93,14 @@ say.sayBye('John');
93
93
94
94
Eh bien, il y a quelques raisons.
95
95
96
-
<<<<<<< HEAD
97
-
1. Les outils de construction modernes ([webpack](http://webpack.js.org) et autres) regroupent les modules et les optimisent pour accélérer le chargement et supprimer les éléments inutilisés.
96
+
1. Lister explicitement ce qu'il faut importer donne des noms plus courts : `sayHi()` au lieu de `say.sayHi()`.
97
+
2. La liste explicite des importations donne un meilleur aperçu de la structure du code : ce qui est utilisé et où. Cela facilite la prise en charge du code et la refactorisation.
98
98
99
-
Disons que nous avons ajouté à notre projet une bibliothèque tierce, say.js, avec de nombreuses fonctions:
100
-
```js
101
-
// 📁 say.js
102
-
exportfunctionsayHi() { ... }
103
-
exportfunctionsayBye() { ... }
104
-
exportfunctionbecomeSilent() { ... }
105
-
```
106
-
107
-
Maintenant, si nous n’utilisons qu’une des fonctions de say.js dans notre projet:
108
-
```js
109
-
// 📁 main.js
110
-
import {sayHi} from './say.js';
111
-
```
112
-
… Ensuite, l'optimiseur verra cela et supprimera les autres fonctions du code fourni, rendant ainsi la construction plus petite. C'est ce qu'on appelle "tree-shaking".
113
-
114
-
2. Énumérer explicitement ce qu'il faut importer donne des noms plus courts:`sayHi()` au lieu de `say.sayHi()`.
115
-
3. La liste explicite des importations donne une meilleure vue d'ensemble de la structure du code: ce qui est utilisé et où. Cela facilite la prise en charge du code et la refactorisation.
116
-
=======
117
-
1. Explicitly listing what to import gives shorter names: `sayHi()` instead of `say.sayHi()`.
118
-
2. Explicit list of imports gives better overview of the code structure: what is used and where. It makes code support and refactoring easier.
119
-
120
-
```smart header="Don't be afraid to import too much"
121
-
Modern build tools, such as [webpack](https://webpack.js.org/) and others, bundle modules together and optimize them to speedup loading. They also removed unused imports.
99
+
```smart header="N'ayez pas peur d'importer trop"
100
+
Les outils de construction modernes, tels que [webpack](https://webpack.js.org/) et d'autres, regroupent les modules et les optimisent pour accélérer le chargement. Ils ont également supprimé les importations inutilisées.
122
101
123
-
For instance, if you `import * as library` from a huge code library, and then use only few methods, then unused ones [will not be included](https://github.com/webpack/webpack/tree/main/examples/harmony-unused#examplejs) into the optimzed bundle.
102
+
Par exemple, si vous importer `import * as library` à partir d'une énorme bibliothèque de codes, puis n'utilisez que quelques méthodes, celles qui ne sont pas utilisées [ne seront pas incluses] (https://github.com/webpack/webpack/tree/main/examples/harmony-unused#examplejs) dans le bundle optimisé.
124
103
```
125
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
126
104
127
105
## Import "as"
128
106
@@ -390,11 +368,7 @@ export {default as User} from './user.js';
390
368
...
391
369
```
392
370
393
-
<<<<<<< HEAD
394
371
La différence notable entre `export ... from` et `import/export` est que les modules réexportés ne sont pas disponibles dans le fichier actuel. Donc, dans l'exemple ci-dessus de `auth/index.js`, nous ne pouvons pas utiliser les fonctions `login/logout` réexportées.
395
-
=======
396
-
The notable difference of `export ... from` compared to `import/export` is that re-exported modules aren't available in the current file. So inside the above example of `auth/index.js` we can't use re-exported `login/logout` functions.
397
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
398
372
399
373
### Ré-exportation de l'exportation par défaut
400
374
@@ -413,11 +387,7 @@ On peut y rencontrer deux problèmes :
413
387
414
388
1.`export User from './user.js'` çe ne fonctionnera pas... Cela conduirait à une erreur de syntaxe.
415
389
416
-
<<<<<<< HEAD
417
390
Pour réexporter l'exportation par défaut, nous devrions écrire `export {default as User}`, comme dans l'exemple ci-dessus.
418
-
=======
419
-
To re-export the default export, we have to write `export {default as User}`, as in the example above.
420
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
421
391
422
392
2.`export * from './user.js'` ne réexporte que les exportations nommées, et ignore celle par défaut.
0 commit comments