So aktivieren Sie die ES6-Syntax (und darüber hinaus) mit Node und Express

Haben Sie jemals versucht, Front-End-Apps mit ES6-Syntax zu schreiben, aber als Sie sich entschieden haben, die Back-End-Entwicklung mit Node.js und Express zu lernen, haben Sie festgestellt, dass Sie solche Dinge wie import fromund   nicht verwenden können export default? Dann sind Sie bei uns genau richtig! Dies ist eine Schritt-für-Schritt-Anleitung zum Konfigurieren Ihrer Entwicklungs- und Produktumgebungen, zum Einrichten von Skripten und als Bonus lernen wir, wie Sie Tests hinzufügen!

Inhaltsverzeichnis / Zusammenfassung der Themen

  • Wie funktioniert es?
  • Voraussetzungen
  • Express installieren
  • Skripte einrichten
  • Bonus
  • TL; DR

Wie funktioniert es? Ein Überblick über das, was wir brauchen

Im Folgenden finden Sie eine allgemeine Ansicht der Prozesse, die mit Ihrem Projekt ablaufen, um eine entwicklungsähnliche Erfahrung im Front-End-Bereich bei der Entwicklung von Back-End-Apps zu ermöglichen.

Code Transpiler von ES6 + nach ES5

Wir benötigen ein Paket, das die Syntax von ES6 und höher in ES5-Code übersetzt. ES5-Code ist der JS-Syntaxstil, der für node.js wie module.exportsoder lesbar ist var module = require('module'). Beachten Sie, dass in der heutigen Zeit fast 99% der ES6 + -Syntax in Node.js verwendet werden können. Hier leuchtet das Paket namens babel .

Babel nimmt eine js-Datei, konvertiert den darin enthaltenen Code und gibt sie in eine neue Datei aus.

Skript zum Entfernen von Dateien

Wenn wir etwas in unserem Code ändern, geben wir es an den Transpiler weiter und er gibt jedes Mal eine neue Kopie aus. Aus diesem Grund benötigen wir ein Skript, das Dateien entfernt, bevor die neue transpilierte Kopie eingeht. Und dafür gibt es ein bestehendes Paket namens rimraf. Rimraf löscht Dateien. Wir werden das später demonstrieren.

Beobachter von Dateiänderungen

Beim Codieren in Node.js ist der automatische Neustart unseres Servers nicht sofort einsatzbereit, genau wie bei einem Projekt, das über der App "create-react-app" oder "vue-cli" erstellt wurde. Aus diesem Grund installieren wir ein Paket namens nodemon, das bei jeder Änderung einer Datei in unserem Code etwas ausführt. Wir können nodemon nutzen, um unseren Server jedes Mal neu zu starten, wenn eine Datei geändert wird.

Das ist also die allgemeine Ansicht, wie es unter der Haube funktioniert. Beginnen wir damit, wie wir einrichten oder projizieren sollen.

Voraussetzungen

Bevor wir beginnen, müssen wir zuerst einige Dinge einrichten.

  1. Stellen Sie sicher, dass Node.js und npm installiert sind. Ich empfehle die Installation der neuesten LTS oder der aktuellen stabilen Version. Sie können es über Node.js Source oder NVM (Node Version Manager) installieren.
  2. Grundkenntnisse in Terminalbefehlen. Die meisten Befehle befinden sich sowieso im Tutorial, sodass Sie sich keine Sorgen machen müssen.
  3. Stellen Sie sicher, dass Sie Ihr Terminal geöffnet und Ihren bevorzugten Texteditor installiert haben.

Das war's, wir können loslegen!

Express installieren

Mit dem Express-Generator erstellen wir ein neues Projekt mit generiertem Code, verschieben einige Dateien und konvertieren Code in die ES6-Syntax. Wir müssen es in diesem frühen Stadium konvertieren, da wir eine Möglichkeit benötigen, um zu überprüfen, ob unser ES6-Code funktioniert.

Projektaufbau

Führen Sie diesen Befehl in Ihrem Terminal aus. Sie können your-project-namemit dem Namen benennen, den Sie mögen. --no-viewflag bedeutet, dass wir für unsere Skeleton Express-App keine Vorlagen-Engine wie Lenker, EJs oder Mops verwenden.

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

Nach dem Erstellen Ihrer App müssen Sie in Ihr App-Verzeichnis wechseln. Verwenden Sie für Windows Powershell- und Linux-Terminals:

cd your-project-name

Öffnen Sie als Nächstes den gewünschten Texteditor. Ich verwende nur VSCode, sodass nur mein Terminal und mein Texteditor gleichzeitig geöffnet sind. Sie können jedoch einen beliebigen Texteditor verwenden.

Installieren von Paketen und Verschieben und Löschen von Dateien

Nachdem wir das generierte Projekt fertig haben, müssen wir installdie Abhängigkeiten ändern und einige Ordner verschieben. Führen Sie diesen Befehl aus, um Express und andere Pakete zu installieren.

npm installieren

Führen Sie die folgenden Schritte aus, während Sie auf die Installation der Abhängigkeiten warten.

  • Erstellen Sie einen server/Ordner
  • Setzen bin/, app.jsund routes/innerhalb des server/Ordners.
  • Umbenennen www, gefunden in binzuwww.js
  • Belassen Sie den public/Ordner in Ihrem Projektstamm.

Ihre Dateistruktur sieht folgendermaßen aus:

Da wir die Dateistruktur geändert haben, funktioniert unser Startserverskript nicht mehr. Aber wir werden es auf dem Weg reparieren.

Konvertieren in ES6-Code

Das Konvertieren des generierten Codes in ES6 ist etwas mühsam, daher werde ich den Code einfach hier posten und ihn kopieren und einfügen.

Code für bin/www.js:

Da wir die Dateistruktur geändert haben, funktioniert unser Startserverskript nicht mehr. Folgendes werden wir tun, um das Problem zu beheben. Benennen Sie in Ihrer Datei package.json das Startskript so um, dass serveres in einem aufgerufenen JSON-Objekt gefunden wird"scripts"

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

Sie werden sehen, dass wir den Dateipfad von ./bin/wwwnach geändert haben , ./server/bin/wwwweil wir Dateien nach verschoben haben server/. Wir werden später das Startskript verwenden.

Versuch es! Versuchen Sie, den Server durch Eingabe npm run serverauf Ihrem Terminal auszuführen, und rufen Sie localhost:3000Ihren Browser auf.

Konvertieren des Codes der obersten Ebene zur Verwendung von ES6-Importen

Das Konvertieren des generierten Codes in ES6 ist etwas mühsam, daher werde ich den Code einfach hier posten und ihn kopieren und einfügen.

Code für 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