Πώς να ενεργοποιήσετε τη σύνταξη ES6 (και μετά) με το Node και το Express

Έχετε προσπαθήσει ποτέ να γράψετε εφαρμογές front-end χρησιμοποιώντας σύνταξη ES6, αλλά όταν αποφασίσατε να μάθετε ανάπτυξη back-end με Node.js και Express, συνειδητοποιήσατε ότι δεν μπορείτε να χρησιμοποιήσετε πράγματα όπως import fromκαι   export default; Εάν ναι, ήρθατε στο σωστό μέρος! Αυτός είναι ένας βήμα προς βήμα οδηγός για το πώς να διαμορφώσετε τα περιβάλλοντα προγραμματιστών και παραγωγών σας, τα σενάρια εγκατάστασης και ως μπόνους θα μάθουμε πώς να προσθέτουμε δοκιμές!

Πίνακας περιεχομένων / Περίληψη θεμάτων

  • Πώς λειτουργεί;
  • Προαπαιτούμενα
  • Εγκατάσταση express
  • Ρύθμιση σεναρίων
  • Δώρο
  • TL; Δρ

Πώς λειτουργεί; Μια άποψη υψηλού επιπέδου για αυτό που χρειαζόμαστε

Για να ενεργοποιήσετε μια εμπειρία που μοιάζει με την ανάπτυξη κατά την ανάπτυξη εφαρμογών back-end, δείτε μια εικόνα υψηλού επιπέδου για τις διαδικασίες που συμβαίνουν στο έργο σας.

Κωδικός Transpiler από ES6 + σε ES5

Χρειαζόμαστε ένα πακέτο που μεταφράζει το ES6 και πάνω από τη σύνταξη στον κώδικα ES5. Ο κωδικός ES5 είναι το στυλ σύνταξης JS που είναι αναγνώσιμο από το node.js, όπως module.exportsή var module = require('module'). Σημειώστε ότι στη σημερινή εποχή, σχεδόν το 99% της σύνταξης ES6 + μπορεί να χρησιμοποιηθεί στο Node.js. Εκεί λάμπει το πακέτο που ονομάζεται babel .

Ο Babel παίρνει ένα αρχείο js, μετατρέπει τον κώδικα σε αυτό και εξάγει σε νέο αρχείο.

Σενάριο που αφαιρεί αρχεία

Κάθε φορά που αλλάζουμε κάτι στον κώδικά μας, το τροφοδοτούμε στο transpiler και βγάζει ένα νέο αντίγραφο κάθε φορά. Γι 'αυτό χρειαζόμαστε ένα σενάριο που αφαιρεί αρχεία πριν εισέλθει το νέο μεταγλωττισμένο αντίγραφο. Και για αυτό, υπάρχει ένα υπάρχον πακέτο που ονομάζεται rimraf. Το Rimraf διαγράφει αρχεία. Θα το δείξουμε αργότερα.

Παρακολούθηση αλλαγών αρχείων

Κατά την κωδικοποίηση στο Node.js, η αυτόματη επανεκκίνηση του διακομιστή μας δεν βγαίνει από το κουτί ακριβώς όπως όταν κάνετε ένα έργο που δημιουργήθηκε πάνω από το create-react-app ή το vue-cli. Γι 'αυτό θα εγκαταστήσουμε ένα πακέτο που ονομάζεται nodemon, το οποίο εκτελεί κάτι κάθε φορά που αλλάζουμε ένα αρχείο στον κώδικά μας. Μπορούμε να αξιοποιήσουμε το nodemon για επανεκκίνηση του διακομιστή μας κάθε φορά που αλλάζει ένα αρχείο.

Αυτή είναι λοιπόν η άποψη υψηλού επιπέδου για το πώς λειτουργεί κάτω από την κουκούλα. Με αυτό, ας ξεκινήσουμε πώς πρέπει να ρυθμίσουμε ή να προβάλλουμε.

Προαπαιτούμενα

Πριν ξεκινήσουμε, χρειαζόμαστε πρώτα κάποια πράγματα.

  1. Βεβαιωθείτε ότι έχετε εγκαταστήσει το Node.js και το npm. Συνιστώ να εγκαταστήσετε την πιο πρόσφατη LTS ή την τρέχουσα σταθερή έκδοση. Μπορείτε να το εγκαταστήσετε μέσω Node.js Source ή NVM (Node Version Manager)
  2. Βασικές γνώσεις τερματικών εντολών. Οι περισσότερες από τις εντολές βρίσκονται στο σεμινάριο έτσι κι αλλιώς δεν χρειάζεται να ανησυχείτε για αυτές.
  3. Βεβαιωθείτε ότι έχετε ανοίξει το τερματικό σας και ότι έχετε εγκαταστήσει το αγαπημένο σας πρόγραμμα επεξεργασίας κειμένου.

Αυτό είναι, είμαστε καλοί να φύγουμε!

Εγκατάσταση Express

Χρησιμοποιώντας τη γεννήτρια Express, θα δημιουργήσουμε ένα νέο έργο με δημιουργημένο κώδικα, θα μετακινήσουμε μερικά αρχεία και θα μετατρέψουμε κάποιο κώδικα σε σύνταξη ES6. Πρέπει να το μετατρέψουμε σε αυτό το πρώιμο στάδιο, επειδή χρειαζόμαστε έναν τρόπο για να επαληθεύσουμε εάν λειτουργεί ο κώδικας ES6 μας.

Ρύθμιση έργου

Εκτελέστε αυτήν την εντολή στο τερματικό σας. Μπορείτε να ονομάσετε your-project-nameμε το όνομα που σας αρέσει. --no-viewΗ σημαία σημαίνει ότι δεν θα χρησιμοποιούμε μηχανή templating όπως τιμόνι, ejs ή pug, για την εφαρμογή Skeleton Express.

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

Αφού δημιουργήσετε την εφαρμογή σας, πρέπει να μεταβείτε στον κατάλογο της εφαρμογής σας. Για τερματικά Windows Powershell και Linux, χρησιμοποιήστε:

cd your-project-name

Στη συνέχεια, ανοίξτε το πρόγραμμα επεξεργασίας κειμένου που σας αρέσει. Για μένα, απλά χρησιμοποιώ τον VSCode, οπότε έχω ανοιχτό το τερματικό και το πρόγραμμα επεξεργασίας κειμένου ταυτόχρονα. Αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου θέλετε.

Εγκατάσταση πακέτων και μετακίνηση και διαγραφή αρχείων

Αφού ετοιμάσουμε το παραγόμενο έργο, πρέπει να installεξαρτηθούμε και να μετακινήσουμε μερικούς φακέλους. Εκτελέστε αυτήν την εντολή για να εγκαταστήσετε το Express και άλλα πακέτα.

εγκατάσταση npm

Ενώ περιμένετε να εγκατασταθούν οι εξαρτήσεις, ακολουθήστε αυτά τα βήματα.

  • δημιουργία server/φακέλου
  • Βάλτε bin/, app.jsκαι routes/μέσα στο server/φάκελο.
  • Μετονομασία www, βρέθηκαν στο binναwww.js
  • Αφήστε το public/φάκελο στη ρίζα του έργου σας.

Η δομή των αρχείων σας θα έχει την εξής μορφή:

Τώρα, επειδή τροποποιήσαμε τη δομή αρχείων, το σενάριο διακομιστή εκκίνησης δεν θα λειτουργήσει. Αλλά θα το διορθώσουμε στην πορεία.

Μετατροπή σε κώδικα ES6

Η μετατροπή του παραγόμενου κώδικα σε ES6 είναι λίγο κουραστική, οπότε θα δημοσιεύσω τον κώδικα εδώ και θα διστάσετε να τον αντιγράψετε και να τον επικολλήσετε.

Κωδικός για bin/www.js:

Τώρα, επειδή τροποποιήσαμε τη δομή αρχείων, το σενάριο διακομιστή εκκίνησης δεν θα λειτουργήσει. Να τι θα κάνουμε για να το διορθώσουμε. Στο αρχείο package.json, μετονομάστε το σενάριο έναρξης για να serverβρείτε σε ένα αντικείμενο JSON που ονομάζεται"scripts"

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

Θα δείτε ότι αλλάξαμε τη διαδρομή αρχείου από ./bin/wwwσε ./server/bin/wwwεπειδή μετακινήσαμε αρχεία σε server/. Θα χρησιμοποιήσουμε το σενάριο έναρξης αργότερα.

Δοκίμασέ το! Δοκιμάστε να εκτελέσετε τον διακομιστή πληκτρολογώντας npm run serverστο τερματικό σας και μεταβείτε στο localhost:3000πρόγραμμα περιήγησής σας.

Μετατροπή κωδικού ανώτερου επιπέδου για χρήση εισαγωγών ES6

Η μετατροπή του παραγόμενου κώδικα σε ES6 είναι λίγο κουραστική, οπότε θα δημοσιεύσω τον κώδικα εδώ και θα διστάσετε να τον αντιγράψετε και να τον επικολλήσετε.

Κωδικός για 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
  • Εγκαταστήστε όλες τις εξαρτήσεις και τις εξαρτήσεις
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save npm i -D jest
  • Προσθέστε αυτά τα σενάρια στο 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" }
  • Βάλτε διαμορφώσεις για babel, nodemon και αστείο στο package.json σας
"nodemonConfig": { "exec": "npm run dev", "watch": [ "server/*", "public/*" ], "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] }, "babel": { "presets": [ "@babel/preset-env" ] }, "jest": { "testEnvironment": "node" },
  • Δοκιμάστε τα σενάρια σας εκτελώντας npm run your-script-here
  • Θα δείτε το πλήρες ρεπό στο github μου

Σημειώσεις και αποποιήσεις ευθυνών

Σημειώστε ότι αυτή η εγκατάσταση ενδέχεται να μην είναι ιδανική για όλες τις καταστάσεις, ειδικά για μεγάλα έργα. (όπως 1k αρχεία κώδικα). Το βήμα μεταφοράς και η διαγραφή ενδέχεται να επιβραδύνουν το περιβάλλον ανάπτυξης. Επιπλέον, τα ES Modules, σχεδόν πλησιάζουν στον κόμβο. Όμως, ωστόσο, αυτό είναι ένα καλό εκπαιδευτικό υλικό για να καταλάβουμε πώς λειτουργεί το transipiling κάτω από την κουκούλα, όπως όταν αναπτύσσουμε εφαρμογές front-end :)

συμπέρασμα

Εντάξει! Ελπίζω να μάθατε πολλά. Σας ευχαριστώ που διαβάσατε μέχρι τώρα.

Καλή κωδικοποίηση!

Δείτε το πλήρες ρεπό εδώ.

Αυτό το άρθρο δημοσιεύεται στις ειδήσεις του FreeCodecamp.

; Twitter -; freeCodeCamp -; Χαρτοφυλάκιο - ⚛️ Github