From 779373abb418fe9fc2ba6aa27358e42638838681 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 2 Jun 2017 17:50:34 +0200 Subject: [PATCH 1/5] Doc EN: hydratation.md tick consistency (#38) Signed-off-by: Bruno Lesieur --- en/hydration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/hydration.md b/en/hydration.md index 6a11574f..6f9d7f44 100644 --- a/en/hydration.md +++ b/en/hydration.md @@ -3,7 +3,7 @@ In `entry-client.js`, we are simply mounting the app with this line: ``` js -// this assumes App.vue template root element has id="app" +// this assumes App.vue template root element has `id="app"` app.$mount('#app') ``` From 51040f69ff2354ed74738a01215ce38c87a6dc3b Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 3 Jun 2017 14:25:44 +0200 Subject: [PATCH 2/5] build-config.md translation Signed-off-by: Bruno Lesieur --- en/SUMMARY.md | 2 +- en/build-config.md | 127 +++++++++++++++++++++++---------------------- 2 files changed, 65 insertions(+), 64 deletions(-) diff --git a/en/SUMMARY.md b/en/SUMMARY.md index 32a3bb9e..e68b834d 100644 --- a/en/SUMMARY.md +++ b/en/SUMMARY.md @@ -5,7 +5,7 @@ - [Récupération de données et état](data.md) - [Hydratation côté client](hydration.md) - [Introduction à l'empaquetage](bundle-renderer.md) -- [Configuration de pré-compilation (En)](build-config.md) +- [Configuration de pré-compilation](build-config.md) - [Gestion des CSS (En)](css.md) - [Gestion des entêtes (En)](head.md) - [Mise en cache (En)](caching.md) diff --git a/en/build-config.md b/en/build-config.md index 6b5eef97..2cd0b3d5 100644 --- a/en/build-config.md +++ b/en/build-config.md @@ -1,10 +1,10 @@ -# Configuration de pré-compilation (En)

*Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-ssr-docs).* +# Configuration de pré-compilation -We will assume you already know how to configure webpack for a client-only project. The config for an SSR project will be largely similar, but we suggest breaking the config into three files: *base*, *client* and *server*. The base config contains config shared for both environments, such as output path, aliases, and loaders. The server config and client config can simply extend the base config using [webpack-merge](https://github.com/survivejs/webpack-merge). +Nous allons suposez que vous savez déjà comment configurer webpack pour un projet uniquement client. La configuration pour un projet avec du SSR va être en grande partie similaire, mais nous vous sugérons de séparer vos configurations en trois fichiers : *base*, *client* et *server*. La configuration base contient la configuration partagée par les deux environnements, comme les chemin de sortie, les aliases et les chargeurs (« loaders »). La configuration du serveur et la configuration du client peut simplementent éteindre la configuration de base en utilisant [webpack-merge](https://github.com/survivejs/webpack-merge). -## Server Config +## Configuration serveur -The server config is meant for generating the server bundle that will be passed to `createBundleRenderer`. It should look like this: +La configuration serveur est destineé à générer le paquetage serveur qui va être passé à `createBundleRenderer`. Elle devrait ressembler à cela : ``` js const merge = require('webpack-merge') @@ -13,35 +13,35 @@ const baseConfig = require('./webpack.base.config.js') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = merge(baseConfig, { - // Point entry to your app's server entry file + // Fichier d'entrée serveur de l'application entry: '/path/to/entry-server.js', - // This allows webpack to handle dynamic imports in a Node-appropriate - // fashion, and also tells `vue-loader` to emit server-oriented code when - // compiling Vue components. + // Cela permet a webpack de gérer les imports dynamique d'une manière + // approprié pour Node.js, et dit également à `vue-loader` d'émettre un code approprié pour le serveur + // lors de la compilation du composant Vue. target: 'node', - // For bundle renderer source map support + // Pour le support des sources maps des paquetages devtool: 'source-map', - // This tells the server bundle to use Node-style exports + // Cela dit au paquetage serveur d'utiliser les exports au format Node.js output: { libraryTarget: 'commonjs2' }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals - // Externalize app dependencies. This makes the server build much faster - // and generates a smaller bundle file. + // Dépendances aux applications externes. Cela rend le build serveur plus rapide + // et génère un fichier de paquetage plus petit. externals: nodeExternals({ - // do not externalize dependencies that need to be processed by webpack. - // you can add more file types here e.g. raw *.vue files - // you should also whitelist deps that modifies `global` (e.g. polyfills) + // ne pas externaliser les dépendances qui ont besoin d'être traitées par webpack. + // vous pouvez ajouter plus de type de fichier comme par ex. ici avec les fichiers `*.vue` + // vous devriez aussi lister des exceptions qui modifient `global` (par ex. les polyfills) whitelist: /\.css$/ }), - // This is the plugin that turns the entire output of the server build - // into a single JSON file. The default file name will be + // Ceci est le plugin qui va créer entièrement la sortie pour le build serveur + // dans un seul fichier JSON. Le fichier généré par défaut va être // `vue-ssr-server-bundle.json` plugins: [ new VueSSRServerPlugin() @@ -49,40 +49,40 @@ module.exports = merge(baseConfig, { }) ``` -After `vue-ssr-server-bundle.json` has been generated, simply pass the file path to `createBundleRenderer`: +Après que `vue-ssr-server-bundle.json` ai été généré, passez simplement le chemin du fichier à `createBundleRenderer` : ``` js const { createBundleRenderer } = require('vue-server-renderer') const renderer = createBundleRenderer('/path/to/vue-ssr-server-bundle.json', { - // ...other renderer options + // ...autre options pour le moteur }) ``` -Alternatively, you can also pass the bundle as an Object to `createBundleRenderer`. This is useful for hot-reload during development - see the HackerNews demo for a [reference setup](https://github.com/vuejs/vue-hackernews-2.0/blob/master/build/setup-dev-server.js). +Vous pouvez alternativement tout aussi bien passer le paquetage comme un objet à `createBundleRenderer`. Cela est utile pour le rechargement à chaud pendant le développement. Voyez la démo de HackerNews pour une [référence de mise en place](https://github.com/vuejs/vue-hackernews-2.0/blob/master/build/setup-dev-server.js). -### Externals Caveats +### Limitation externes -Notice that in the `externals` option we are whitelisting CSS files. This is because CSS imported from dependencies should still be handled by webpack. If you are importing any other types of files that also rely on webpack (e.g. `*.vue`, `*.sass`), you should add them to the whitelist as well. +Notons que dans l'options `externals` nous avons exclus les fichiers CSS. Cela parceque les fichiers CSS importés par dépendances doivent quand même être gérés par webpack. Si vous importer n'importe quel autres types de fichiers également pris en charge par webpack (ex : `*.vue`, `*.styl`), vous pouvez les ajouter à la liste des exceptions également. -If you are using `runInNewContext: 'once'` or `runInNewContext: true`, then you also need to whitelist polyfills that modify `global`, e.g. `babel-polyfill`. This is because when using the new context mode, **code inside a server bundle has its own `global` object.** Since you don't really need it on the server when using Node 7.6+, it's actually easier to just import it in the client entry. +Si vous utilisez `runInNewContext: 'once'` ou `runInNewContext: true`, alors vous devrez également ajouter aux exceptions les polyfills qui modifient `global` comme par ex. `babel-polyfill`. Cela est du au fait qu'en utilisant un nouveau mode de contexte, **le code à l'intérieur d'un paquetage serveur a son propre objet `global`.** Parceque il n'est plus nécéssaire de faire cela côté serveur en utilisant Node.js 7.6+, c'est d'autant plus facile de ne les importer seulement côté client. -## Client Config +## Configuration cliente -The client config can remain largely the same with the base config. Obviously you need to point `entry` to your client entry file. Aside from that, if you are using `CommonsChunkPlugin`, make sure to use it only in the client config because the server bundle requires a single entry chunk. +La configuration cliente peut être en grande partie la même grâce à la configuration de base. Bien sur vous devez faire pointer `entry` sur votre fichier d'entrée client. En plus de cela, si vous utilisez le plugin `CommonsChunkPlugin`, assurez-vous de ne l'utiliser que dans la configuration cliente car le paquetage serveur requiert un unique fragment d'entrée. -### Generating `clientManifest` +### Générer le `clientManifest` -> requires version 2.3.0+ +> requiert la version 2.3.0+ -In addition to the server bundle, we can also generate a client build manifest. With the client manifest and the server bundle, the renderer now has information of both the server *and* client builds, so it can automatically infer and inject [preload / prefetch directives](https://css-tricks.com/prefetching-preloading-prebrowsing/) and css links / script tags into the rendered HTML. +En plus du paquetage serveur, nous pouvons également générer un build de manifeste client. Avec le manifeste client et le paquetage serveur, le moteur a maintenant les informations du build serveur *et* du build client, ainsi il peut automatiquement déduire et injecter les [directives pré-chargée et récupérée](https://css-tricks.com/prefetching-preloading-prebrowsing/) ainsi que les balise `` / ` - + ` ``` -### Manual Asset Injection +### Injection manuel des fichiers -By default, asset injection is automatic when you provide the `template` render option. But sometimes you might want finer-grained control over how assets are injected into the template, or maybe you are not using a template at all. In such a case, you can pass `inject: false` when creating the renderer and manually perform asset injection. +Par défaut, l'injection des fichiers est automatiques quand vous fournissez l'option de rendu `template`. Mais parfois vous aurez besoin d'une granularité de contrôle plus fine en ce qui concerne la manière dont les templates seront injectés, ou peut-être que vous n'utiliserez pas de template du tout. Dans tous les cas, vous pouvez passer `inject: false` quand le moteur est créer et manuellement réaliser l'injection des fichiers. -In the `renderToString` callback, the `context` object you passed in will expose the following methods: +Dans la fonction de rappel de `renderToString`, l'objet `context` que vous passez va exposer les méthodes suivantes : - `context.renderStyles()` - This will return inline `