diff --git a/en/SUMMARY.md b/en/SUMMARY.md index a2976b8b..b538ae93 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 au moteur de dépaquetage](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..2f087705 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 suggérons de séparer vos configurations en trois fichiers : *base*, *client* et *server*. La configuration de base contient la configuration partagée par les deux environnements, comme les chemins de sortie, les aliases et les loaders. La configuration du serveur et la configuration du client peut simplement étendre 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 destinée à 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 à webpack de gérer les imports dynamiques 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. + // Externalise les dépendances de l'application. 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 types de fichier ici, comme par ex. 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 +### Limitations 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'option `externals` nous avons exclus les fichiers CSS. C'est parce que les fichiers CSS importés par dépendances doivent quand même être gérés par webpack. Si vous importez n'importe quels autres types de fichier également pris en charge par webpack (ex : `*.vue`, `*.styl`), vous pouvez également les ajouter à la liste des exceptions. -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 dû au fait qu'en utilisant un nouveau mode de contexte, **le code à l'intérieur d'un paquetage serveur a son propre objet `global`.** Parce qu'il n'est plus nécessaire de faire cela côté serveur en utilisant Node.js 7.6+, c'est d'autant plus facile de ne les importer que 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ées et récupérées](https://css-tricks.com/prefetching-preloading-prebrowsing/) ainsi que les balises `` / ` - + ` ``` -### 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 automatique 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éé 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 `