Comment activer la syntaxe ES6 (et au-delà) avec Node et Express

Avez-vous déjà essayé d'écrire des applications frontales en utilisant la syntaxe ES6, mais lorsque vous avez décidé d'apprendre le développement back-end avec Node.js et Express, vous vous êtes rendu compte que vous ne pouvez pas utiliser des trucs comme import fromet   export default? Si c'est le cas, vous êtes au bon endroit! Ceci est un guide étape par étape sur la façon de configurer vos environnements de développement et de production, vos scripts de configuration et, en prime, nous apprendrons comment ajouter des tests!

Table des matières / Résumé des sujets

  • Comment ça marche?
  • Conditions préalables
  • Installation express
  • Configurer des scripts
  • Prime
  • TL; DR

Comment ça marche? Une vision de haut niveau de ce dont nous avons besoin

Pour permettre une expérience de développement front-end tout en développant des applications back-end, voici une vue de haut niveau des processus de votre projet.

Transpilateur de code de ES6 + à ES5

Nous avons besoin d'un package qui traduit la syntaxe ES6 et supérieure en code ES5. Le code ES5 est le style de syntaxe JS lisible par node.js, tel que module.exportsou var module = require('module'). Notez qu'à l'heure actuelle, près de 99% de la syntaxe ES6 + peut être utilisée dans Node.js. C'est là que le paquet appelé babel brille.

Babel prend un fichier js, convertit le code qu'il contient et le produit dans un nouveau fichier.

Script qui supprime les fichiers

Chaque fois que nous changeons quelque chose dans notre code, nous le transmettons au transpilateur, et il en sort une nouvelle copie à chaque fois. C'est pourquoi nous avons besoin d'un script qui supprime les fichiers avant que la nouvelle copie transpilée n'entre. Et pour cela, il existe un package appelé rimraf. Rimraf supprime les fichiers. Nous démontrerons cela plus tard.

Observateur des modifications de fichiers

Lors du codage dans Node.js, le redémarrage automatique de notre serveur ne sort pas de la boîte, tout comme lorsque vous effectuez un projet créé au-dessus de create-react-app ou vue-cli. C'est pourquoi nous installerons un package appelé nodemon, qui exécute quelque chose chaque fois que nous modifions un fichier dans notre code. Nous pouvons utiliser nodemon pour redémarrer notre serveur à chaque fois qu'un fichier est modifié.

Voilà donc la vision de haut niveau de la façon dont cela fonctionne sous le capot. Avec cela, commençons par comment devrions-nous configurer ou projeter.

Conditions préalables

Avant de commencer, nous devons d'abord configurer certaines choses.

  1. Assurez-vous que Node.js et npm sont installés. Je recommande d'installer leur dernière LTS ou leur version stable actuelle. Vous pouvez l'installer via Node.js Source ou NVM (Node Version Manager)
  2. Connaissance de base des commandes du terminal. La plupart des commandes sont de toute façon dans le didacticiel, vous n'avez donc pas à vous en soucier.
  3. Assurez-vous que votre terminal est ouvert et que votre éditeur de texte préféré est installé.

Ça y est, nous sommes prêts à partir!

Installation d'Express

En utilisant le générateur Express, nous allons créer un nouveau projet avec du code généré, déplacer certains fichiers et convertir du code en syntaxe ES6. Nous devons le convertir à ce stade précoce car nous avons besoin d'un moyen de vérifier si notre code ES6 fonctionne.

Configuration du projet

Exécutez cette commande dans votre terminal. Vous pouvez nommer your-project-nameavec le nom que vous aimez. --no-viewdrapeau signifie que nous n'utiliserons aucun moteur de création de modèles tel que guidons, ejs ou pug, pour notre application skeleton Express.

npx express-generator your-project-name --no-view

Après avoir créé votre application, vous devez accéder à votre répertoire d'applications. Pour les terminaux Windows Powershell et Linux, utilisez:

cd your-project-name

Ensuite, ouvrez l'éditeur de texte que vous aimez. Pour moi, j'utilise juste VSCode donc j'ai juste mon terminal et mon éditeur de texte ouverts en même temps. Mais vous pouvez utiliser n'importe quel éditeur de texte de votre choix.

Installation de packages et déplacement et suppression de fichiers

Une fois que nous avons le projet généré prêt, nous devons installles dépendances et déplacer certains dossiers. Exécutez cette commande pour installer Express et d'autres packages.

npm installer

Pendant que vous attendez l'installation des dépendances, procédez comme suit.

  • créer un server/dossier
  • Mettez bin/, app.jset routes/dans le server/dossier.
  • Renommer www, trouvé dans binàwww.js
  • Laissez le public/dossier à la racine de votre projet.

Votre structure de fichiers ressemblera à ceci:

Maintenant, comme nous avons modifié la structure des fichiers, notre script de démarrage du serveur ne fonctionnera pas. Mais nous allons le réparer en cours de route.

Conversion en code ES6

La conversion du code généré en ES6 est un peu fastidieuse, je vais donc simplement poster le code ici et n'hésitez pas à le copier et le coller.

Code pour bin/www.js:

Maintenant, comme nous avons modifié la structure des fichiers, notre script de démarrage du serveur ne fonctionnera pas. Voici ce que nous allons faire pour y remédier. Dans votre fichier package.json, renommez le script de démarrage pour qu'il se servertrouve dans un objet JSON appelé"scripts"

// package.json { "name": "your-project-name", // ....other details "scripts": { "server": "node ./server/bin/www" } }

Vous verrez que nous avons changé le chemin du fichier de ./bin/wwwà ./server/bin/wwwparce que nous avons déplacé les fichiers vers server/. Nous utiliserons le script de démarrage plus tard.

Essayez-le! Essayez d'exécuter le serveur en tapant npm run serversur votre terminal et accédez à localhost:3000sur votre navigateur.

Conversion du code de niveau supérieur pour utiliser les importations ES6

La conversion du code généré en ES6 est un peu fastidieuse, je vais donc simplement poster le code ici et n'hésitez pas à le copier et le coller.

Code pour bin/www.js:

// bin/www.js /** * Module dependencies. */ import app from '../app'; import debugLib from 'debug'; import http from 'http'; const debug = debugLib('your-project-name:server'); // ..generated code below.

Almost all of our modifications are only at the top and bottom of the files. We are leaving other generated code as is.

Code for routes/index.js and routes/users.js:

// routes/index.js and users.js import express from 'express'; var router = express.Router(); // ..stuff below export default router;

Code for app.js:

// app.js import express from 'express'; import path from 'path'; import cookieParser from 'cookie-parser'; import logger from 'morgan'; import indexRouter from './routes/index'; import usersRouter from './routes/users'; var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, '../public'))); app.use('/', indexRouter); app.use('/users', usersRouter); export default app;

In app.js , because we left public/ at the project root , we need to change the Express static path one folder up. Notice that the path 'public' became '../public' .

app.use(express.static(path.join(__dirname, '../public')));

Okay we’re done with converting the code! Let’s setup our scripts now.

Setting up Scripts

In setting up scripts, each script performs a different role. And we reuse each npm script. And for our development and production environments, they have a different configuration. (Almost identical, you’ll see later) That’s why we need to compose our scripts so we can use them without repeatedly typing the same stuff all over again.

Install `npm-run-all`

Since some terminal commands won’t work on windows cmd, we need to install a package called npm-run-all so this script will work for any environment. Run this command in your terminal project root.

npm install --save npm-run-all

Install babel, nodemon, and rimraf

Babel is modern JavaScript transpiler. A transpiler means your modern JavaScript code will be transformed to an older format that Node.js can understand. Run this command in your terminal project root. We will be using the latest version of babel (Babel 7+).

Note that Nodemon is our file watcher and Rimraf is our file remover packages.

npm install --save @babel/core @babel/cli @babel/preset-env nodemon rimraf

Adding transpile script

Before babel starts converting code, we need to tell it which parts of the code to translate. Note that there are a lots of configuration available, because babel can convert a lot of JS Syntaxes for every different kinds of purpose. Luckily we don’t need to think about that because there’s an available default for that. We are using default config called as preset-env (the one we installed earlier) in our package.json file to tell Babel in which format we are transpiling the code.

Inside your package.json file, create a "babel" object and put this setting.

// package.json { // .. contents above "babel": { "presets": ["@babel/preset-env"] }, }

After this setup we are now ready to test if babel really converts code. Add a script named transpile in your package.json:

// package.json "scripts": { "start": "node ./server/bin/www", "transpile": "babel ./server --out-dir dist-server", }

Now what happened here? First we need to run the cli command babel , specify the files to convert, in this case, the files in server/ and put the transpiled contents in a different folder called dist-server in our project root.

You can test it by running this command

npm run transpile

You’ll see a new folder pop up.

Yay it worked! ✅ As you can see, there’s a folder that has the same folder structure as our server folder but with converted code inside. Pretty cool right? Next step is to run try if our server is running!

Clean script

To have a fresh copy every-time we transpile code into new files, we need a script that removes old files. Add this script to your package.json

"scripts": { "server": "node ./dist-server/bin/www", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

This npm script that we made means it removes the folder dist-server/

Now to combine transpile and clean, add a script called build , which combines the two processes.

// scripts "build": "npm-run-all clean transpile"

Running dev script

Now we have a build script, we need to run our dev server. We’ll add a script called dev in our package.json. This takes care of setting our Node Environment to “development”, removing old transpiled code, and replacing it with a new one.

"scripts": { "build": "npm-run-all clean transpile" "server": "node ./dist-server/bin/www", "dev": "NODE_ENV=development npm-run-all build server", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

Note here that we’ve changed again the file we are running on our server script. We’re running the file-path with the transpiled code, found in dist-server/.

Adding prod scripts

If we have a dev script that sets the Node Environment to development, we have a prod script that sets it to “production.” We use this configuration when we are deploying. (Heroku, AWS, DigitalOcean, etc..) We’re now adding again our start script and prod script in our package.json again.

"scripts": { "start": "npm run prod" "build": "npm-run-all clean transpile" "server": "node ./dist-server/bin/www", "dev": "NODE_ENV=development npm-run-all build server", "prod": "NODE_ENV=production npm-run-all build server", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

We set start script default to prod because start script is being used always by deployment platforms like AWS or Heroku to start a server.

Try either by running npm start or npm run prod .

// package.json ... "nodemonConfig": { "exec": "npm run dev", "watch": ["server/*", "public/*"], "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"] }, "scripts": { // ... other scripts "watch:dev": "nodemon" }

How about auto-restarting the server whenever a file change?

One final script, in order to complete our development setup. We need to add a file watcher script that runs a command whenever a change is made in a file. Add a JSON Object named “nodemonConfig” in your package.json. This is where we store what we tell the watcher what to do when a file changes.

Also, add a script called watch:dev in your package.json

// package.json ... "nodemonConfig": { "exec": "npm run dev", "watch": ["server/*", "public/*"], "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"] }, "scripts": { // ... other scripts "watch:dev": "nodemon" }

Nodemon config contains settings related to

  • Which command to run whenever a file changes, in our case npm run dev
  • What folders and files to watch
  • And which files to ignore

More about configuration of nodemon here.

Now that we have our file watcher, you can now just run npm run watch:dev , code, and save your file. and whenever you go to localhost:3000 , you’ll see the changes. Try it out!

Bonus: Add tests!

To add tests in our project, simply install Jest from npm, add a few config, and add a script called test in our package.json

npm i -D jest

Add an object called “jest”, and a test script in your package.json

// package.json ... "jest": { "testEnvironment": "node" }, "scripts": { // ..other scripts "test": "jest" }

Try it out, make a file sample.test.js, write any tests, and run the script!

npm run test

TL;DR

Here are the simplified steps for how to enable ES6 in Node.js. I’ll also include the repo so you can copy and inspect the whole code.

  • Make a new project using express your-project-name terminal command.
  • Move the bin/, routes/ and app into a new folder called src/ , and convert the code into ES6. Also don’t forget to rename bin/www to www.js
  • Install all the dependencies and devDependencies
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save npm i -D jest
  • Add these scripts to your package.json
"scripts": { "start": "npm run prod", "build": "npm-run-all clean transpile", "server": "node ./dist-server/bin/www", "dev": "NODE_ENV=development npm-run-all build server", "prod": "NODE_ENV=production npm-run-all build server", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server", "watch:dev": "nodemon", "test": "jest" }
  • Put configurations for babel, nodemon, and jest in your package.json
"nodemonConfig": { "exec": "npm run dev", "watch": [ "server/*", "public/*" ], "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] }, "babel": { "presets": [ "@babel/preset-env" ] }, "jest": { "testEnvironment": "node" },
  • Test your scripts by running npm run your-script-here
  • You’ll see the complete repo at my github

Notes and disclaimers

Note that this setup may not be proved ideal for all situations, specially for big projects. (like 1k files of code). Transpiling step and deleting might slow down your development environment. Plus, ES Modules, is almost coming to node. But, nevertheless, this is a good eductational material to understand how transipiling runs under the hood like when we are developing front-end apps :)

Conclusion

All right! I hope you learned a lot. Thank you for reading this far.

Happy Coding!

Check the full repo here.

This article is published in freeCodecamp news.

? Twitter - ? freeCodeCamp -  ? Portfolio - ⚛️ Github