From 1550da66b3c807574befcc80758e8278cbac1530 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 30 Sep 2017 12:37:03 +0200 Subject: [PATCH 1/7] First part of modules.md translated Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 77 ++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 46 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index adbf4a555..7d2d8f0ef 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -1,89 +1,74 @@ --- title: Modules -description: Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations. +description: Les modules sont des extensions de Nuxt.js qui augmente ses fonctionnalités et permet de l'intégration continue. --- -> Modules are Nuxt.js extensions which can extend it's core functionality and add endless integrations. +> Les modules sont des extensions de Nuxt.js qui augmente ses fonctionnalités et permet de l'intégration continue. ## Introduction -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. - -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. +Pendant votre phase de préparation du développement pour la production avec Nuxt, vous allez découvrir que les fonctionnalités offertes par Nuxt ne sont pas suffisantes et que 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 est également impossible sans rendre le framework lourd. -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: +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 chaqun d'entre eux soit chargé avant de continuer son travail. Ainsi vous avez la possibilité de personnaliser le moindre aspet de Nuxt et 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 se build. -- 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 for your new project. -- Are an **enterprise** company which **quality** and **reusability** is important for your projects. -- Are a lovely **open source** enthusiast and interested in **sharing** your works with community in an easy manner. -- 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) -- Tired of breaking low level API and Usage changes, and need **things that just work™**. +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é en tant que packages npm. Ainsi vous pouvez partager et utiliser des intégrations et solutions de qualités auprès de la communauté Nuxt sans effort ! Vous pourriez être intéressé par les modules si : +- Ê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. +- Êtes une **société** qui accorde de l'importance à la **qualité** et la **réutilisabilité** de ses projets. +- Vous êtes un membre super enthousiaste de la communauté *Open Source* et que vous souhaitez *partager* avec la communauté d'une façon simple. +- Vous êtes un développeur flaimard 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). +- Vous êtes fatigué de l'utilisation des API bas niveau et de leur changement continue et vous souhaiter **simplement des choses fonctionnelles**. -## Write a basic Module -As already mentioned modules are just simple functions. -They can be packaged as NPM modules or directly included in project source code. +## Écrire un module basique + +Comme précédemment mentionné, les modules sont juste de simples fonctions. Ils peuvent être packagé en tant que modules npm ou directement inclus dans le code source du projet. **modules/simple.js** + ```js -module.exports = function SimpleModule (moduleOptions) { - // Write your code here +module.exports = function SimpleModule (moduleOptions) { + // Écrivez votre code ici } -// REQUIRED if publishing as an NPM package +// Requis en cas de publication en tant que package npm // module.exports.meta = require('./package.json') ``` **`moduleOptions`** -This is the object passed using `modules` array by user we can use it to customize it's behavior. - +Ceci est un objet passé en utilisant le tableau `modules` par les utilisateurs qui souhaite personnaliser son comportement. **`this.options`** -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. - +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és qui peut être utilisé en tant qu'options partagées à travers les modules. **`this.nuxt`** -This is a reference to current nuxt instance. Refer to nuxt class docs for available methods. - +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. **`this`** -Context of modules. Refer to [ModuleContainer](/api/internals-module-container) class docs for available methods. +Le contexte des modules. Consultez la documentation sur la [Classe ModuleContainer](/api/internals-module-container) pour obtenir les méthodes disponibles. **`module.exports.meta`** -This line is **required** if you are publishing module as an NPM package. -Nuxt internally uses meta to work better with your package. - +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. **nuxt.config.js** ```js module.exports = { modules: [ - // Simple usage + // Utilisation simple '~/modules/simple' - // Passing options + // Passage des options ['~/modules/simple', { token: '123' }] ] } ``` -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! - +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 ! ## Async Modules @@ -140,7 +125,7 @@ module.exports = function asyncModule(callback) { ## Common Snippets ### Top level options -Sometimes it is more convenient if we can use top level options while register modules in `nuxt.config.js`. +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. **nuxt.config.js** @@ -156,7 +141,7 @@ module.exports = { option1, option2 } -} +} ``` **module.js** @@ -171,7 +156,7 @@ module.exports = function (moduleOptions) { ### Provide plugins 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. +For this we can use `this.addPlugin` helper. **plugin.js** ```js @@ -192,7 +177,7 @@ module.exports = function nuxtBootstrapVue (moduleOptions) { ``` ### Template plugins -Registered templates and plugins can leverage [lodash templates](https://lodash.com/docs/4.17.4#template) +Registered templates and plugins can leverage [lodash templates](https://lodash.com/docs/4.17.4#template) to conditionally change registered plugins output. **plugin.js** @@ -246,12 +231,12 @@ We can register webpack plugins to emit assets during build. ```js module.exports = function (moduleOptions) { - const info = 'Built by awesome module - 1.3 alpha on ' + Date.now() + const info = 'Built by awesome module - 1.3 alpha on ' + Date.now() this.options.build.plugins.push({ apply (compiler) { compiler.plugin('emit', (compilation, cb) => { - + // This will generate `.nuxt/dist/info.txt' with contents of info variable. // Source can be buffer too compilation.assets['info.txt'] = { source: () => info, size: () => info.length } From be9a78ef5e72f02d37d07e9dc6dc7789d0aabc68 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 30 Sep 2017 14:25:03 +0200 Subject: [PATCH 2/7] Traduction done. Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 118 +++++++++++++++++++++----------------------- 1 file changed, 56 insertions(+), 62 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index 7d2d8f0ef..23401f959 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -70,30 +70,24 @@ module.exports = { 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 ! -## Async Modules +## Modules asynchrones -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. +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 asynchrone grâce à l'utilisation d'une promesse ou d'une fonction de rappel. -### Use async/await +### Utilisation de async / await -

- 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 comparability or using promise method. -

+

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 stable ou avec un support de version antérieur vous pouvez utiliser un paquageur pour les transformer en de vieille version de compatibilité Node.js ou utilisant des méthodes de promesse.

```js const fse = require('fs-extra') module.exports = async function asyncModule() { - // You can do async works here using async/await + // Vous pouvez développer de manière asynchrone ici en utilisant async / await let pages = await fse.readJson('./pages.json') } ``` -### Return a Promise +### Retourner une promesse ```js const axios = require('axios') @@ -102,12 +96,12 @@ module.exports = function asyncModule() { return axios.get('https://jsonplaceholder.typicode.com/users') .then(res => res.data.map(user => '/users/' + user.username)) .then(routes => { - // Do something by extending nuxt routes + // Faites quelque chose en étandant les routes de Nuxt }) } ``` -### Use callbacks +### Utiliser des fonctions de rappel ```js const axios = require('axios') @@ -122,11 +116,11 @@ module.exports = function asyncModule(callback) { ``` -## Common Snippets +## Exemples communs -### Top level options -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. +### Options de haut niveau + +Parfois il est plus simple d'utiliser des options de haut niveaux lors de l'abonnement de modules à `nuxt.config.js`. Donc nous pouvons combiner les options de sources multiples. **nuxt.config.js** @@ -136,7 +130,7 @@ module.exports = { '@nuxtjs/axios' ], - // axios module is aware of this by using this.options.axios + // Le module axios est informé de cela via `this.options.axios` axios: { option1, option2 @@ -153,12 +147,12 @@ module.exports = function (moduleOptions) { } ``` -### Provide plugins -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. +### Fournir des plugins + +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 enregistrer lui-même dans Vue. Pour cela, nous pouvons utiliser la fonction utilitaire `this.addPlugin`. **plugin.js** + ```js import Vue from 'vue' import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm' @@ -167,78 +161,82 @@ Vue.use(BootstrapVue) ``` **module.js** + ```js const path = require('path') module.exports = function nuxtBootstrapVue (moduleOptions) { - // Register plugin.js template + // Abonner le template `plugin.js` this.addPlugin(path.resolve(__dirname, 'plugin.js')) } ``` ### Template plugins -Registered templates and plugins can leverage [lodash templates](https://lodash.com/docs/4.17.4#template) -to conditionally change registered plugins output. + +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. **plugin.js** + ```js // Set Google Analytics UA ga('create', '<%= options.ua %>', 'auto') <% if (options.debug) { %> -// Dev only code +// Code uniquement pour le développement <% } %> ``` **module.js** + ```js const path = require('path') module.exports = function nuxtBootstrapVue (moduleOptions) { - // Register plugin.js template + // Abonner le template `plugin.js` this.addPlugin({ src: path.resolve(__dirname, 'plugin.js'), options: { - // Nuxt will replace options.ua with 123 when copying plugin to project + // Nuxt va remplacer `options.ua` par `123` quand il va copier le plugin au projet. ua: 123, - // conditional parts with dev will be stripped from plugin code on production builds + // les parties conditionnelles vont être retiré du code du pligen pour les builds de production debug: this.options.dev } }) } ``` -### Add a CSS library -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. +### Ajouter une bibliothèque CSS + +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. **module.js** ```js module.exports = function (moduleOptions) { if (moduleOptions.fontAwesome !== false) { - // Add font-awesome + // Ajouter Font Awesome this.options.css.push('font-awesome/css/font-awesome.css') } } ``` -### Emit assets -We can register webpack plugins to emit assets during build. +### Fournir des ressources + +On peut abonner des plugins webpack pour fournir des ressources pendant la phase de build. **module.js** ```js module.exports = function (moduleOptions) { - const info = 'Built by awesome module - 1.3 alpha on ' + Date.now() + const info = 'Construit par le module awesome - 1.3 alpha le ' + Date.now() this.options.build.plugins.push({ apply (compiler) { compiler.plugin('emit', (compilation, cb) => { - // This will generate `.nuxt/dist/info.txt' with contents of info variable. - // Source can be buffer too + // Cela va générer `.nuxt/dist/info.txt' avec les contenus des variables d'information. + // La source peut être mise en tampon aussi compilation.assets['info.txt'] = { source: () => info, size: () => info.length } cb() @@ -248,64 +246,60 @@ module.exports = function (moduleOptions) { } ``` -### Register custom loaders +### Abonner des loaders personnalisés -We can do the same as `build.extend` in `nuxt.config.js` using `this.extendBuild` +Nous pouvons faire la même chose que `build.extend` dans `nuxt.config.js` en utilisant `this.extendBuild`. **module.js** ```js module.exports = function (moduleOptions) { this.extendBuild((config, { isClient, isServer }) => { - // .foo Loader + // Le loader `.foo` config.module.rules.push({ test: /\.foo$/, use: [...] }) - // Customize existing loaders - // Refer to source code for Nuxt internals: + // Personnalisation des loaders existant + // Consultez le code source des mécanismes de Nuxt : // https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/webpack/base.config.js const barLoader = config.module.rules.find(rule => rule.loader === 'bar-loader') }) } ``` -## Run Tasks on Specific hooks -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`. +## Lancer des tâches sur des points d'ancrage spécifiques + +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 attendres si les points d'ancrage retournent une promesse ou sont définis comme `async`. ```js module.exports = function () { - // Add hook for modules + // Ajouter un point d'ancrage au module this.nuxt.plugin('module', moduleContainer => { - // This will be called when all modules finished loading + // Ceci va être appelé quand tous les modules auront fini d'être chargés }) - // Add hook for renderer + // Ajouter un point d'ancrage au moteur de rendu this.nuxt.plugin('renderer', renderer => { - // This will be called when renderer was created + // Ceci va être appelé quand le moteur de rendu aura été créé }) - // Add hook for build + // Ajouter un point d'ancrage au build this.nuxt.plugin('build', async builder => { - // This Will be called once when builder created + // Ceci va être appelé une fois le build fait - // We can even register internal hooks here + // On peut également enregistrer des points d'ancrage interne ici builder.plugin('compile', ({compiler}) => { - // This will be run just before webpack compiler starts + // Ceci va être lancé juste avant que le compilateur de webpack démarre }) }) - // Add hook for generate + // Ajouter un point d'ancrage à la génération this.nuxt.plugin('generate', async generator => { - // This Will be called when a nuxt generate starts + // Ceci va être appelé quand la génération de Nuxt va commencer }) } ``` -

- There are many many more hooks and possibilities for modules. - Please refer to [Nuxt Internals](/api/internals) to learn more about Nuxt internal API. -

\ No newline at end of file +

Il y a encore bien de 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.

From 87f85701aef01d0a6feef421fbfdb4f9e8c8235e Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 30 Sep 2017 14:40:21 +0200 Subject: [PATCH 3/7] Relecture Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index 23401f959..d62467649 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -1,27 +1,27 @@ --- title: Modules -description: Les modules sont des extensions de Nuxt.js qui augmente ses fonctionnalités et permet de l'intégration continue. +description: Les modules sont des extensions de Nuxt.js qui augmentent ses fonctionnalités et permettent de l'intégration continue. --- -> Les modules sont des extensions de Nuxt.js qui augmente ses fonctionnalités et permet de l'intégration continue. +> Les modules sont des extensions de Nuxt.js qui augmentent ses fonctionnalités et permettent de l'intégration continue. ## Introduction -Pendant votre phase de préparation du développement pour la production avec Nuxt, vous allez découvrir que les fonctionnalités offertes par Nuxt ne sont pas suffisantes et que 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 est également impossible sans rendre le framework lourd. +Pendant votre phase d'amélioration du passage du développement à la production avec Nuxt, 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. -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 chaqun d'entre eux soit chargé avant de continuer son travail. Ainsi vous avez la possibilité de personnaliser le moindre aspet de Nuxt et 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 se build. +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 soient chargés 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. -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é en tant que packages npm. Ainsi vous pouvez partager et utiliser des intégrations et solutions de qualités auprès de la communauté Nuxt sans effort ! Vous pourriez être intéressé par les modules si : +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 : -- Ê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. -- Êtes une **société** qui accorde de l'importance à la **qualité** et la **réutilisabilité** de ses projets. +- 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, +- vous êtes une **société** qui accorde de l'importance à la **qualité** et la **réutilisabilité** de ses projets, - Vous êtes un membre super enthousiaste de la communauté *Open Source* et que vous souhaitez *partager* avec la communauté d'une façon simple. -- Vous êtes un développeur flaimard 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). +- Vous êtes un développeur flaimard 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). - Vous êtes fatigué de l'utilisation des API bas niveau et de leur changement continue et vous souhaiter **simplement des choses fonctionnelles**. ## Écrire un module basique -Comme précédemment mentionné, les modules sont juste de simples fonctions. Ils peuvent être packagé en tant que modules npm ou directement inclus dans le code source du projet. +Comme précédemment mentionné, 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. **modules/simple.js** @@ -36,11 +36,11 @@ module.exports = function SimpleModule (moduleOptions) { **`moduleOptions`** -Ceci est un objet passé en utilisant le tableau `modules` par les utilisateurs qui souhaite personnaliser son comportement. +Ceci est un objet passé en utilisant le tableau `modules` par les utilisateurs qui souhaitent personnaliser son comportement. **`this.options`** -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és qui peut être utilisé en tant qu'options partagées à travers les modules. +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 peut être utilisées en tant qu'options partagées à travers les modules. **`this.nuxt`** @@ -72,17 +72,17 @@ Nous pouvons dire à Nuxt de charger des modules spécifiques pour un projet ave ## Modules asynchrones -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 asynchrone grâce à l'utilisation d'une promesse ou d'une fonction de rappel. +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. ### Utilisation de async / await -

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 stable ou avec un support de version antérieur vous pouvez utiliser un paquageur pour les transformer en de vieille version de compatibilité Node.js ou utilisant des méthodes de promesse.

+

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 de version antérieur vous pouvez utiliser un paqueteur pour les transformer en de vieille version de compatibilité Node.js ou utilisant des méthodes de promesse.

```js const fse = require('fs-extra') module.exports = async function asyncModule() { - // Vous pouvez développer de manière asynchrone ici en utilisant async / await + // Vous pouvez développer de manière asynchrone ici en utilisant `async` / `await` let pages = await fse.readJson('./pages.json') } ``` @@ -96,7 +96,7 @@ module.exports = function asyncModule() { return axios.get('https://jsonplaceholder.typicode.com/users') .then(res => res.data.map(user => '/users/' + user.username)) .then(routes => { - // Faites quelque chose en étandant les routes de Nuxt + // Faites quelque chose en étendant les routes de Nuxt }) } ``` @@ -116,11 +116,11 @@ module.exports = function asyncModule(callback) { ``` -## Exemples communs +## Exemples courants ### Options de haut niveau -Parfois il est plus simple d'utiliser des options de haut niveaux lors de l'abonnement de modules à `nuxt.config.js`. Donc nous pouvons combiner les options de sources multiples. +Parfois il est plus simple d'utiliser des options de hauts niveaux lors de l'abonnement de modules à `nuxt.config.js`. Donc nous pouvons combiner les options de sources multiples. **nuxt.config.js** @@ -199,7 +199,7 @@ module.exports = function nuxtBootstrapVue (moduleOptions) { // Nuxt va remplacer `options.ua` par `123` quand il va copier le plugin au projet. ua: 123, - // les parties conditionnelles vont être retiré du code du pligen pour les builds de production + // les parties conditionnelles vont être retirées du code du plugin pour les builds de production debug: this.options.dev } }) @@ -248,7 +248,7 @@ module.exports = function (moduleOptions) { ### Abonner des loaders personnalisés -Nous pouvons faire la même chose que `build.extend` dans `nuxt.config.js` en utilisant `this.extendBuild`. +Nous pouvons faire la même chose que `build.extend` dans `nuxt.config.js` en utilisant `this.extendBuild`. **module.js** @@ -271,7 +271,7 @@ module.exports = function (moduleOptions) { ## Lancer des tâches sur des points d'ancrage spécifiques -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 attendres si les points d'ancrage retournent une promesse ou sont définis comme `async`. +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`. ```js module.exports = function () { From 361b5fef19cc51e94284b0d4fed8c5370450d5a5 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 30 Sep 2017 17:07:48 +0200 Subject: [PATCH 4/7] Revue de @rspt Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index d62467649..969451cf5 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -9,19 +9,19 @@ description: Les modules sont des extensions de Nuxt.js qui augmentent ses fonct Pendant votre phase d'amélioration du passage du développement à la production avec Nuxt, 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. -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 soient chargés 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. +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. 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 : - 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, - vous êtes une **société** qui accorde de l'importance à la **qualité** et la **réutilisabilité** de ses projets, - Vous êtes un membre super enthousiaste de la communauté *Open Source* et que vous souhaitez *partager* avec la communauté d'une façon simple. -- Vous êtes un développeur flaimard 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). -- Vous êtes fatigué de l'utilisation des API bas niveau et de leur changement continue et vous souhaiter **simplement des choses fonctionnelles**. +- 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). +- Vous êtes fatigué de l'utilisation des API bas niveau et de leur changement continu et vous souhaiter **simplement des choses fonctionnelles**. ## Écrire un module basique -Comme précédemment mentionné, 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. +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. **modules/simple.js** @@ -40,7 +40,7 @@ Ceci est un objet passé en utilisant le tableau `modules` par les utilisateurs **`this.options`** -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 peut être utilisées en tant qu'options partagées à travers les modules. +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. **`this.nuxt`** @@ -76,7 +76,7 @@ Tous les modules ne font pas tout de manière synchrone. Par exemple vous pouvez ### Utilisation de async / await -

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 de version antérieur vous pouvez utiliser un paqueteur pour les transformer en de vieille version de compatibilité Node.js ou utilisant des méthodes de promesse.

+

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.

```js const fse = require('fs-extra') @@ -120,7 +120,7 @@ module.exports = function asyncModule(callback) { ### Options de haut niveau -Parfois il est plus simple d'utiliser des options de hauts niveaux lors de l'abonnement de modules à `nuxt.config.js`. Donc nous pouvons combiner les options de sources multiples. +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. **nuxt.config.js** @@ -149,7 +149,7 @@ module.exports = function (moduleOptions) { ### Fournir des plugins -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 enregistrer lui-même dans Vue. Pour cela, nous pouvons utiliser la fonction utilitaire `this.addPlugin`. +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`. **plugin.js** @@ -261,7 +261,7 @@ module.exports = function (moduleOptions) { use: [...] }) - // Personnalisation des loaders existant + // Personnalisation des loaders existants // Consultez le code source des mécanismes de Nuxt : // https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/webpack/base.config.js const barLoader = config.module.rules.find(rule => rule.loader === 'bar-loader') From c85330e03a142e3c4241c31e72e166c68d87c008 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 2 Oct 2017 13:46:11 +0200 Subject: [PATCH 5/7] @forresst review Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index 969451cf5..260c9cf66 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -7,7 +7,7 @@ description: Les modules sont des extensions de Nuxt.js qui augmentent ses fonct ## Introduction -Pendant votre phase d'amélioration du passage du développement à la production avec Nuxt, 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. +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. 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. @@ -196,7 +196,7 @@ module.exports = function nuxtBootstrapVue (moduleOptions) { this.addPlugin({ src: path.resolve(__dirname, 'plugin.js'), options: { - // Nuxt va remplacer `options.ua` par `123` quand il va copier le plugin au projet. + // Nuxt remplacera `options.ua` par `123` quand il copiera le plugin au projet. ua: 123, // les parties conditionnelles vont être retirées du code du plugin pour les builds de production @@ -215,7 +215,7 @@ Il est recommandé de vérifier si un utilisateur ne fournit pas déjà la même ```js module.exports = function (moduleOptions) { if (moduleOptions.fontAwesome !== false) { - // Ajouter Font Awesome + // Ajout de Font Awesome this.options.css.push('font-awesome/css/font-awesome.css') } } @@ -236,7 +236,7 @@ module.exports = function (moduleOptions) { compiler.plugin('emit', (compilation, cb) => { // Cela va générer `.nuxt/dist/info.txt' avec les contenus des variables d'information. - // La source peut être mise en tampon aussi + // La source peut être aussi mise en tampon compilation.assets['info.txt'] = { source: () => info, size: () => info.length } cb() @@ -275,17 +275,17 @@ Votre module peut avoir besoin de choses seulement sous certaines conditions et ```js module.exports = function () { - // Ajouter un point d'ancrage au module + // Ajoute un point d'ancrage au module this.nuxt.plugin('module', moduleContainer => { // Ceci va être appelé quand tous les modules auront fini d'être chargés }) - // Ajouter un point d'ancrage au moteur de rendu + // Ajoute un point d'ancrage au moteur de rendu this.nuxt.plugin('renderer', renderer => { // Ceci va être appelé quand le moteur de rendu aura été créé }) - // Ajouter un point d'ancrage au build + // Ajoute un point d'ancrage au build this.nuxt.plugin('build', async builder => { // Ceci va être appelé une fois le build fait @@ -295,7 +295,7 @@ module.exports = function () { }) }) - // Ajouter un point d'ancrage à la génération + // Ajoute un point d'ancrage à la génération this.nuxt.plugin('generate', async generator => { // Ceci va être appelé quand la génération de Nuxt va commencer }) From b67c31bf67de124604295edf8efb94b0fa8431c8 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 2 Oct 2017 13:56:27 +0200 Subject: [PATCH 6/7] still @forresst review Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index 260c9cf66..f07f3fb5d 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -291,7 +291,7 @@ module.exports = function () { // On peut également enregistrer des points d'ancrage interne ici builder.plugin('compile', ({compiler}) => { - // Ceci va être lancé juste avant que le compilateur de webpack démarre + // Ceci sera lancé juste avant que le compilateur de webpack démarre }) }) @@ -302,4 +302,4 @@ module.exports = function () { } ``` -

Il y a encore bien de 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.

+

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.

From a352686389686ca62adeecdc66ef33d5244ec890 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 2 Oct 2017 16:01:09 +0200 Subject: [PATCH 7/7] @forresst review, the return Signed-off-by: Bruno Lesieur --- en/guide/modules.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/en/guide/modules.md b/en/guide/modules.md index f07f3fb5d..285bed6a9 100644 --- a/en/guide/modules.md +++ b/en/guide/modules.md @@ -277,17 +277,17 @@ Votre module peut avoir besoin de choses seulement sous certaines conditions et module.exports = function () { // Ajoute un point d'ancrage au module this.nuxt.plugin('module', moduleContainer => { - // Ceci va être appelé quand tous les modules auront fini d'être chargés + // Ceci sera appelé quand tous les modules auront fini d'être chargés }) // Ajoute un point d'ancrage au moteur de rendu this.nuxt.plugin('renderer', renderer => { - // Ceci va être appelé quand le moteur de rendu aura été créé + // Ceci sera appelé quand le moteur de rendu aura été créé }) // Ajoute un point d'ancrage au build this.nuxt.plugin('build', async builder => { - // Ceci va être appelé une fois le build fait + // Ceci sera appelé une fois le build fait // On peut également enregistrer des points d'ancrage interne ici builder.plugin('compile', ({compiler}) => { @@ -297,7 +297,7 @@ module.exports = function () { // Ajoute un point d'ancrage à la génération this.nuxt.plugin('generate', async generator => { - // Ceci va être appelé quand la génération de Nuxt va commencer + // Ceci sera appelé quand la génération de Nuxt va commencer }) } ```