# Aller plus loin

# Transpiler les fonctions async

Parcel fait énormément de choses sans configuration. Néanmoins, pour transpiler les fonctions async (opens new window), il faut donner à babel (opens new window) (utilisé sous le capot par parcel) quelques plugins et informations supplémentaires.

Créer un fichier .babelrc dans le dossier client avec ce contenu

{
 "presets": [
   "@babel/preset-env"
 ],
 "plugins": [
   ["@babel/plugin-transform-runtime", {
     "regenerator": true
   }]
 ]
}

Avec un restart de parcel avec la commande parcel index.html, on s'aperçoit qu'il installe les modules nécessaires. En effet, dès que l'app aura redémarré, le fichier package.json a maintenant 2 nouvelles dépendances de dev : @babel/core et @babel/plugin-transform-runtime. Penser à valider ces modifications du package.json et celles de package-lock.json (c-à-d faire un commit avec ces modifications dans le dépôt git).

Maintenant, il est possible d'utiliser les fonctions async dans le code sans crainte d'erreur.

# Linter le code JavaScript

# Pourquoi utiliser un linter

Afin d'avoir des conventions de code respectées et identiques dans tous les fichiers, et de se faire aider dans notre éditeur favori par des alertes quand on écrit du code potentiellement source d'erreurs, il est bienvenu de se faire aider par un outil : un linter. En JavaScript, celui que tout le monde utilise aujourd'hui est eslint (opens new window).

D'autre part, une des conventions les plus utilisées est StandardJS (opens new window). C'est celle que nous allons utiliser ici.

# Utiliser eslint

Installer en premier lieu eslint (opens new window) :

npm i -D eslint

Puis installer tout le nécessaire pour gérer StandardJS par eslint :

npm i -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

Enfin, voici un fichier de configuration pour eslint :

module.exports = {
 root: true,
 env: {
   node: true,
   browser: true,
 },
 extends: ["standard"],
 rules: {
   // Seule règle que je n'aime pas dans StandardJS et que je surcharge
   "comma-dangle": [2, "always-multiline"],
 },
};

Enregistrer ce contenu dans .eslintrc.js, dans le dossier client.

# Utiliser un proxy en mode dev

Souvent, on veut utiliser parcel en mode dev, mais accéder à une API REST qui tourne en local sur un autre port. Comme il s'agit d'un autre port, pour y accéder en mode dev, il faudrait que le serveur renvoie des en-têtes CORS (opens new window), et gérer le client API différemment en mode dev et en mode prod... Bref, pas pratique.

La solution est de configurer parcel avec un proxy (opens new window). Pour cela, créer un fichier proxy.js dans le dossier client avec ce contenu :

const Bundler = require("parcel-bundler") // parcel, évidemment
const express = require("express") // express est un framework web pour node. Cf. https://expressjs.com/
const { createProxyMiddleware } = require("http-proxy-middleware") // Un module qui permet de faire proxy

const app = express() // Création d'une app express

app.use( // Quelle que soit la méthode HTTP (GET, POST, PUT, DELETE, PATCH, OPTIONS, HEAD, etc.)...
 createProxyMiddleware( // ...créer un proxy...
   '/api', // qui, pour toutes les routes qui commencent par '/api',...
   {
     target: 'http://localhost:3000' // ...fera passe-plat au serveur qui tourne sur localhost sur le port 3000
   }
 )
)

const bundler = new Bundler( // Instanciation d'un bundler parcel
 './index.html', // ou bien './src/index.html' si vous avez mis ce fichier dans un dossier 'src'
 { cache: false }
)

app.use(bundler.middleware()) // Utiliser le bundler parcel créé

const port = Number(process.env.PORT || 1234) //

app.listen(port) // On écoute sur un port particulier (1234 par défaut)

console.log(
 `Proxy-enabled parcel server listening on http://localhost:${port}` // Afficher dans la console l'URL à consulter pour dev
)

Ensuite, modifier le script start du package.json de façon à lancer non plus parcel index.html, mais node proxy.js:

(...)
   "start": "node proxy.js",
(...)

Puis, lancer le serveur de l'API (a priori npm run dev dans le dossier server), et "lancer" parcel comme avant :

$ npm start

> esilv-scratch@1.0.0 start /Users/stan/dev/projects/esilv/esilv-websocket-vue/client
> node proxy.js

[HPM] Proxy created: /api  -> http://localhost:3000
⠋ Building...Proxy-enabled parcel server listening on http://localhost:1234
✨  Built in 5.18s.

Notes : - Si le serveur de l'API n'est pas lancé avant ce proxy, parcel ne fonctionnera pas correctement. - Si le port 1234 est déjà occupé, cela ne fonctionnera pas correctement

Si le serveur de l'API gère les WebSockets (opens new window), ajouter une configuration idoine sur le proxy. Par exemple, si c'est socket.io (opens new window) qui est utilisé, rajouter ceci avant la ligne const bundler = new Bundler('./index.html', { :

app.use(
 createProxyMiddleware(
   "/socket.io", // La route pour socket.io
   {
     target: "http://localhost:3000",
     ws: true // Faire passe-plat aussi pour les WebSockets
   }
 )
);

Au lancement (toujours après avoir lancé le serveur de l'API), vous aurez donc :

$ npm start

> esilv-scratch@1.0.0 start /Users/stan/dev/projects/esilv/esilv-websocket-vue/client
> node proxy.js

[HPM] Proxy created: /api  -> http://localhost:3000
[HPM] Proxy created: /socket.io  -> http://localhost:3000
⠋ Building...Proxy-enabled parcel server listening on http://localhost:1234
✨  Built in 5.18s.
[HPM] Upgrading to WebSocket

Bravo d'avoir lu jusqu'ici !!! Vous êtes un·e pro de parcel, maintenant !

← Commencer un projet