Skip to content

Commit 177e1dc

Browse files
Traduction de modules.md (#21)
* First part of modules.md translated Signed-off-by: Bruno Lesieur <[email protected]> * Traduction done. Signed-off-by: Bruno Lesieur <[email protected]> * Relecture Signed-off-by: Bruno Lesieur <[email protected]> * Revue de @rspt Signed-off-by: Bruno Lesieur <[email protected]> * @forresst review Signed-off-by: Bruno Lesieur <[email protected]> * still @forresst review Signed-off-by: Bruno Lesieur <[email protected]> * @forresst review, the return Signed-off-by: Bruno Lesieur <[email protected]>
1 parent 028b347 commit 177e1dc

File tree

1 file changed

+69
-69
lines changed

1 file changed

+69
-69
lines changed

en/guide/modules.md

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,93 @@
11
---
2-
title: Modules (En)
3-
description: Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations.
2+
title: Modules
3+
description: Les modules sont des extensions de Nuxt.js qui augmentent ses fonctionnalités et permettent de l'intégration continue.
44
---
55

6-
> Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations.
6+
> Les modules sont des extensions de Nuxt.js qui augmentent ses fonctionnalités et permettent de l'intégration continue.
77
88
## Introduction
99

10-
<p style="width: 294px;position: fixed; top : 64px; right: 4px;" class="Alert Alert--orange"><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/nuxt" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>While developing production grade application using Nuxt, you will find out soon that Nuxt core functionalities are not enough and writing configs and plugins for each project is a repetitive, boring and time consuming job. Also adding every new feature into Nuxt is not possible as it would make it a fat framework.</p>
10+
Pendant la phase d'amélioration de votre application pour la production, vous allez découvrir que les fonctionnalités offertes par celui-ci ne sont pas complètes. Faire la configuration et ajouter les plugins de chaque projet est répétitif, ennuyant et prend du temps. Ajouter chaque nouvelle fonctionnalité dans Nuxt serait impossible sans rendre le framework lourd.
1111

12-
This was the reason Nuxt introduces a higher order modular system to easily extend the core. Modules are basically **functions** which are called sequentially when booting Nuxt and core awaits for all of them to be finished before continue it's job. So they have the chance to customize almost any aspect of Nuxt and thanks to modular design of Nuxt itself and webpack [Tapable](https://github.com/webpack/tapable) technology they can also register hooks for certain entry points like builder initialization.
12+
C'est pourquoi Nuxt introduit un système modulaire d'ordre supérieur pour facilement étendre ses fonctionnalités de base. Les modules sont en fait des **fonctions** qui sont appelées de manière séquentielle lors de la phase de démarrage de Nuxt. Le cœur va attendre que chacun d'entre eux soit chargé avant de continuer son travail. Ainsi vous avez la possibilité de personnaliser le moindre aspect de Nuxt. Grâce à sa conception modulaire ainsi que webpack [Tapable](https://github.com/webpack/tapable), il peut également abonner des points d'ancrage (« hooks ») pour certaines étapes comme l'initialisation de la phase de build.
1313

14-
Another point of using modules is that they can be refactored and packaged out of the project and released as npm packages so you can share and use high quality integration and solutions from Nuxt community with no pain! You might interested in modules if you:
14+
Un autre point à propos des modules est qu'ils peuvent être refactorisés et packagés en dehors du projet de manière à être versionnés en tant que packages npm. Ainsi vous pouvez partager et utiliser des intégrations et solutions de qualité auprès de la communauté Nuxt sans effort ! Vous pourriez être intéressé par les modules si :
1515

16-
- Are a member of an **agile team** that want to set up your project instantly and avoid **re-inventing** the wheel for common tasks like Google Analytics tools for your new project.
17-
- Are an **enterprise** company which **quality** and **reusability** is important for your projects.
18-
- Are a lovely **Open Source** enthusiast and interested in **sharing** your works with community in an easy manner.
19-
- Are a lazy programmer and don't like digging into details setting up every new library or integration (Someone else should already provided a module for that but you can always ask community for making one).
20-
- Tired of breaking low level API and Usage changes, and need **things that just work™**.
16+
- vous êtes un membre d'une **équipe agile** qui souhaite mettre en place son projet instantanément et éviter de **réinventer** la roue pour les tâches habituelles comme des mécanismes Google Analytics pour vos nouveaux projets,
17+
- vous êtes une **société** qui accorde de l'importance à la **qualité** et la **réutilisabilité** de ses projets,
18+
- Vous êtes un membre super enthousiaste de la communauté *Open Source* et que vous souhaitez *partager* avec la communauté d'une façon simple.
19+
- Vous êtes un développeur occupé et vous n'aimez pas vous encombrer avec des détails comme le paramétrage de chaque nouvelle bibliothèque ou intégration (quelqu'un l'aura surement déjà fait pour vous, ou vous pourriez demander à quelqu'un de la communauté de le faire).
20+
- Vous êtes fatigué de l'utilisation des API bas niveau et de leur changement continu et vous souhaiter **simplement des choses fonctionnelles**.
2121

22-
## Write a basic Module
22+
## Écrire un module basique
2323

24-
As already mentioned modules are just simple functions. They can be packaged as npm modules or directly included in project source code.
24+
Comme précédemment mentionnés, les modules sont juste de simples fonctions. Ils peuvent être packagés en tant que modules npm ou directement inclus dans le code source du projet.
2525

2626
**modules/simple.js**
2727

2828
```js
2929
module.exports = function SimpleModule (moduleOptions) {
30-
// Write your code here
30+
// Écrivez votre code ici
3131
}
3232

33-
// REQUIRED if publishing as an npm package
33+
// Requis en cas de publication en tant que package npm
3434
// module.exports.meta = require('./package.json')
3535
```
3636

3737
**`moduleOptions`**
3838

39-
This is the object passed using `modules` array by user we can use it to customize it's behavior.
39+
Ceci est un objet passé en utilisant le tableau `modules` par les utilisateurs qui souhaitent personnaliser son comportement.
4040

4141
**`this.options`**
4242

43-
You can directly access to Nuxt options using this reference. This is `nuxt.config.js` with all default options assigned to and can be used for shared options between modules.
43+
Vous pouvez accéder directement aux options de Nuxt en utilisant cette référence. C'est la configuration `nuxt.config.js` avec ses options par défaut assignées qui peuvent être utilisées en tant qu'options partagées à travers les modules.
4444

4545
**`this.nuxt`**
4646

47-
This is a reference to current Nuxt instance. Refer to [Nuxt class docs for available methods](/api/internals-nuxt).
47+
C'est une référence à l'instance courante de Nuxt. Consultez la documentation sur la [Classe Nuxt](/api/internals-nuxt) pour obtenir les méthodes disponibles.
4848

4949
**`this`**
5050

51-
Context of modules. Refer to [ModuleContainer](/api/internals-module-container) class docs for available methods.
51+
Le contexte des modules. Consultez la documentation sur la [Classe ModuleContainer](/api/internals-module-container) pour obtenir les méthodes disponibles.
5252

5353
**`module.exports.meta`**
5454

55-
This line is **required** if you are publishing module as an npm package. Nuxt internally uses meta to work better with your package.
55+
Cette ligne est **obligatoire** si vous publiez un module en tant que package npm. Nuxt utilise en interne les meta pour mieux fonctionner avec votre package.
5656

5757
**nuxt.config.js**
5858

5959
```js
6060
module.exports = {
6161
modules: [
62-
// Simple usage
62+
// Utilisation simple
6363
'~/modules/simple'
6464

65-
// Passing options
65+
// Passage des options
6666
['~/modules/simple', { token: '123' }]
6767
]
6868
}
6969
```
7070

71-
We then tell Nuxt to load some specific modules for a project with optional parameters as options. Please refer to [modules configuration](/api/configuration-modules) docs for more info!
71+
Nous pouvons dire à Nuxt de charger des modules spécifiques pour un projet avec des paramètres optionnels en tant qu'options. Consultez la documentation sur la [configuration des modules](/api/configuration-modules) pour plus d'informations !
7272

73-
## Async Modules
73+
## Modules asynchrones
7474

75-
Not all modules will do everything synchronous. For example you may want to develop a module which needs fetching some API or doing async IO. For this, Nuxt supports async modules which can return a Promise or call a callback.
75+
Tous les modules ne font pas tout de manière synchrone. Par exemple vous pouvez développer un module qui a besoin d'aller récupérer des informations depuis une API ou qui fait des échanges asynchrones. Nuxt permet le support de modules asynchrones grâce à l'utilisation d'une promesse ou d'une fonction de rappel.
7676

77-
### Use async/await
77+
### Utilisation de async / await
7878

79-
<p class="Alert Alert--orange">Be aware that `async`/`await` is only supported in Node.js > 7.2. So if you are a module developer at least warn users about that if using them. For heavily async modules or better legacy support you can use either a bundler to transform it for older Node.js comparability or using promise method.</p>
79+
<p class="Alert Alert--orange">Faites attention avec `async` et `await`, ils sont supportés uniquement depuis Node.js 7.2+. Donc si vous êtes un développeur de modules, n'oubliez pas d'avertir vos utilisateurs si vous les utilisez. Pour des modules asynchrones plus stables ou avec un support des versions antérieures vous pouvez utiliser un paqueteur pour les transformer en de vieille version de compatibilité Node.js ou utilisant des méthodes de promesse.</p>
8080

8181
```js
8282
const fse = require('fs-extra')
8383

8484
module.exports = async function asyncModule() {
85-
// You can do async works here using `async`/`await`
85+
// Vous pouvez développer de manière asynchrone ici en utilisant `async` / `await`
8686
let pages = await fse.readJson('./pages.json')
8787
}
8888
```
8989

90-
### Return a Promise
90+
### Retourner une promesse
9191

9292
```js
9393
const axios = require('axios')
@@ -96,12 +96,12 @@ module.exports = function asyncModule() {
9696
return axios.get('https://jsonplaceholder.typicode.com/users')
9797
.then(res => res.data.map(user => '/users/' + user.username))
9898
.then(routes => {
99-
// Do something by extending Nuxt routes
99+
// Faites quelque chose en étendant les routes de Nuxt
100100
})
101101
}
102102
```
103103

104-
### Use callbacks
104+
### Utiliser des fonctions de rappel
105105

106106
```js
107107
const axios = require('axios')
@@ -116,11 +116,11 @@ module.exports = function asyncModule(callback) {
116116
```
117117

118118

119-
## Common Snippets
119+
## Exemples courants
120120

121-
### Top level options
121+
### Options de haut niveau
122122

123-
Sometimes it is more convenient if we can use top level options while register modules in `nuxt.config.js`. So we can combine multiply option sources.
123+
Parfois il est plus simple d'utiliser des options de haut niveau lors de l'abonnement de modules à `nuxt.config.js`. Donc nous pouvons combiner les options de sources multiples.
124124

125125
**nuxt.config.js**
126126

@@ -130,7 +130,7 @@ module.exports = {
130130
'@nuxtjs/axios'
131131
],
132132

133-
// axios module is aware of this by using `this.options.axios`
133+
// Le module axios est informé de cela via `this.options.axios`
134134
axios: {
135135
option1,
136136
option2
@@ -147,9 +147,9 @@ module.exports = function (moduleOptions) {
147147
}
148148
```
149149

150-
### Provide plugins
150+
### Fournir des plugins
151151

152-
It is common that modules provide one or more plugins when added. For example [bootstrap-vue](https://bootstrap-vue.js.org) module would require to register itself into Vue. For this we can use `this.addPlugin` helper.
152+
Il est courant que les modules fournissent un ou plusieurs plugins quand ils sont ajoutés. Par exemple le module [bootstrap-vue](https://bootstrap-vue.js.org) nécessite d'être abonné lui-même dans Vue. Pour cela, nous pouvons utiliser la fonction utilitaire `this.addPlugin`.
153153

154154
**plugin.js**
155155

@@ -166,14 +166,14 @@ Vue.use(BootstrapVue)
166166
const path = require('path')
167167

168168
module.exports = function nuxtBootstrapVue (moduleOptions) {
169-
// Register `plugin.js` template
169+
// Abonner le template `plugin.js`
170170
this.addPlugin(path.resolve(__dirname, 'plugin.js'))
171171
}
172172
```
173173

174174
### Template plugins
175175

176-
Registered templates and plugins can leverage [lodash templates](https://lodash.com/docs/4.17.4#template) to conditionally change registered plugins output.
176+
Abonner des templates et des plugins peut influencer les [templates lodash](https://lodash.com/docs/4.17.4#template) pour changer conditionnellement les sorties des plugins abonnés.
177177

178178
**plugin.js**
179179

@@ -182,7 +182,7 @@ Registered templates and plugins can leverage [lodash templates](https://lodash.
182182
ga('create', '<%= options.ua %>', 'auto')
183183

184184
<% if (options.debug) { %>
185-
// Dev only code
185+
// Code uniquement pour le développement
186186
<% } %>
187187
```
188188

@@ -192,51 +192,51 @@ ga('create', '<%= options.ua %>', 'auto')
192192
const path = require('path')
193193

194194
module.exports = function nuxtBootstrapVue (moduleOptions) {
195-
// Register `plugin.js` template
195+
// Abonner le template `plugin.js`
196196
this.addPlugin({
197197
src: path.resolve(__dirname, 'plugin.js'),
198198
options: {
199-
// Nuxt will replace `options.ua` with `123` when copying plugin to project
199+
// Nuxt remplacera `options.ua` par `123` quand il copiera le plugin au projet.
200200
ua: 123,
201201

202-
// conditional parts with dev will be stripped from plugin code on production builds
202+
// les parties conditionnelles vont être retirées du code du plugin pour les builds de production
203203
debug: this.options.dev
204204
}
205205
})
206206
}
207207
```
208208

209-
### Add a CSS library
209+
### Ajouter une bibliothèque CSS
210210

211-
It is recommended checking if user already not provided same library to avoid adding duplicates. Also always consider having **an option to disable** adding css files by module.
211+
Il est recommandé de vérifier si un utilisateur ne fournit pas déjà la même bibliothèque pour éviter les ajouts en doublon. Fournissez donc toujours une **option de désactivation** lors de l'ajout de fichier CSS par un module.
212212

213213
**module.js**
214214

215215
```js
216216
module.exports = function (moduleOptions) {
217217
if (moduleOptions.fontAwesome !== false) {
218-
// Add Font Awesome
218+
// Ajout de Font Awesome
219219
this.options.css.push('font-awesome/css/font-awesome.css')
220220
}
221221
}
222222
```
223223

224-
### Emit assets
224+
### Fournir des ressources
225225

226-
We can register webpack plugins to emit assets during build.
226+
On peut abonner des plugins webpack pour fournir des ressources pendant la phase de build.
227227

228228
**module.js**
229229

230230
```js
231231
module.exports = function (moduleOptions) {
232-
const info = 'Built by awesome module - 1.3 alpha on ' + Date.now()
232+
const info = 'Construit par le module awesome - 1.3 alpha le ' + Date.now()
233233

234234
this.options.build.plugins.push({
235235
apply (compiler) {
236236
compiler.plugin('emit', (compilation, cb) => {
237237

238-
// This will generate `.nuxt/dist/info.txt' with contents of info variable.
239-
// Source can be buffer too
238+
// Cela va générer `.nuxt/dist/info.txt' avec les contenus des variables d'information.
239+
// La source peut être aussi mise en tampon
240240
compilation.assets['info.txt'] = { source: () => info, size: () => info.length }
241241

242242
cb()
@@ -246,60 +246,60 @@ module.exports = function (moduleOptions) {
246246
}
247247
```
248248

249-
### Register custom loaders
249+
### Abonner des loaders personnalisés
250250

251-
We can do the same as `build.extend` in `nuxt.config.js` using `this.extendBuild`.
251+
Nous pouvons faire la même chose que `build.extend` dans `nuxt.config.js` en utilisant `this.extendBuild`.
252252

253253
**module.js**
254254

255255
```js
256256
module.exports = function (moduleOptions) {
257257
this.extendBuild((config, { isClient, isServer }) => {
258-
// `.foo` Loader
258+
// Le loader `.foo`
259259
config.module.rules.push({
260260
test: /\.foo$/,
261261
use: [...]
262262
})
263263

264-
// Customize existing loaders
265-
// Refer to source code for Nuxt internals:
264+
// Personnalisation des loaders existants
265+
// Consultez le code source des mécanismes de Nuxt :
266266
// https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/webpack/base.config.js
267267
const barLoader = config.module.rules.find(rule => rule.loader === 'bar-loader')
268268
})
269269
}
270270
```
271271

272-
## Run Tasks on Specific hooks
272+
## Lancer des tâches sur des points d'ancrage spécifiques
273273

274-
Your module may need to do things only on specific conditions not just during Nuxt initialization. We can use powerful [Tapable](https://github.com/webpack/tapable) plugin system to do tasks on specific events. Nuxt will await for us if hooks return a Promise or are defined as `async`.
274+
Votre module peut avoir besoin de choses seulement sous certaines conditions et pas seulement lors de l'initialisation de Nuxt. Nous utilisons le puissant système de plugin [Tapable](https://github.com/webpack/tapable) pour réaliser des tâches sur des évènements spécifiques. Nuxt va les attendre si les points d'ancrage retournent une promesse ou sont définis comme `async`.
275275

276276
```js
277277
module.exports = function () {
278-
// Add hook for modules
278+
// Ajoute un point d'ancrage au module
279279
this.nuxt.plugin('module', moduleContainer => {
280-
// This will be called when all modules finished loading
280+
// Ceci sera appelé quand tous les modules auront fini d'être chargés
281281
})
282282

283-
// Add hook for renderer
283+
// Ajoute un point d'ancrage au moteur de rendu
284284
this.nuxt.plugin('renderer', renderer => {
285-
// This will be called when renderer was created
285+
// Ceci sera appelé quand le moteur de rendu aura été créé
286286
})
287287

288-
// Add hook for build
288+
// Ajoute un point d'ancrage au build
289289
this.nuxt.plugin('build', async builder => {
290-
// This will be called once when builder created
290+
// Ceci sera appelé une fois le build fait
291291

292-
// We can even register internal hooks here
292+
// On peut également enregistrer des points d'ancrage interne ici
293293
builder.plugin('compile', ({compiler}) => {
294-
// This will be run just before webpack compiler starts
294+
// Ceci sera lancé juste avant que le compilateur de webpack démarre
295295
})
296296
})
297297

298-
// Add hook for generate
298+
// Ajoute un point d'ancrage à la génération
299299
this.nuxt.plugin('generate', async generator => {
300-
// This will be called when a Nuxt generate starts
300+
// Ceci sera appelé quand la génération de Nuxt va commencer
301301
})
302302
}
303303
```
304304

305-
<p class="Alert">There are many many more hooks and possibilities for modules. Please refer to [Nuxt Internals](/api/internals) to learn more about Nuxt internal API.</p>
305+
<p class="Alert">Il existe beaucoup d'autres points d'ancrage et de possibilités pour les modules. Consultez les [mécanismes de Nuxt](/api/internals) pour en apprendre plus à propos de l'API interne de Nuxt.</p>

0 commit comments

Comments
 (0)