Az ES6 (és azon túl) szintaxisának engedélyezése a Node és az Express használatával

Programozás

Megpróbált már valaha is olyan front-end alkalmazásokat írni, amelyek ES6 szintaxist használnak, de amikor úgy döntött, hogy megtanulja a háttérfejlesztést a Node.js és az Express használatával, rájött, hogy nem használhat ilyesmit import fromés   export default? Ha igen, akkor jó helyre került! Ez lépésről lépésre ismerteti a fejlesztői és a termékkörnyezet konfigurálását, a szkriptek beállítását, és bónuszként megtanuljuk a tesztek hozzáadását!

Tartalomjegyzék / témák összefoglalása

  • Hogyan működik?
  • Előfeltételek
  • Express telepítése
  • Szkriptek beállítása
  • Bónusz
  • TL; DR

Hogyan működik? Magas szintű kilátás arra, amire szükségünk van

Az előtér-fejlesztésszerű élmény biztosításához a háttéralkalmazások fejlesztése során az alábbiakban bemutatjuk a projekttel kapcsolatos folyamatokat.

Code Transpiler ES6 + -ról ES5-re

Szükségünk van egy csomagra, amely az ES6 és a feletti szintaxist ES5 kódra fordítja. Az ES5 kód a JS szintaxis stílus, amelyet a node.js olvashat, például module.exportsvagy var module = require('module'). Vegye figyelembe, hogy manapság az ES6 + szintaxis majdnem 99% -a felhasználható a Node.js fájlban. Itt ragyog a babel nevű csomag .

Babel elvesz egy js fájlt, átalakítja a benne lévő kódot, és egy új fájlká alakítja.

Szkript, amely eltávolítja a fájlokat

Valahányszor megváltoztatunk valamit a kódunkban, betápláljuk a transzpilerbe, és minden alkalommal kiad egy új példányt. Ezért van szükségünk egy szkriptre, amely eltávolítja a fájlokat, mielőtt a frissen átmásolt példány belépne. Ehhez létezik egy meglévő csomag, a rimraf. A Rimraf fájlokat töröl. Ezt később bemutatjuk.

A fájlváltozások figyelője

A Node.js kódolásakor a kiszolgálónk automatikus újraindítása nem jön ki a dobozból, csakúgy, mint amikor a create-react-app vagy a vue-cli tetején készített projektet hajtja végre. Ezért telepítünk egy nodemon nevű csomagot, amely végrehajt valamit, valahányszor megváltoztatunk egy fájlt a kódunkban. Kihasználhatjuk a nodemont, hogy újraindítsuk a szerverünket minden alkalommal, amikor egy fájlt megváltoztatunk.

Tehát ez a magas szintű nézet a működéséről a motorháztető alatt. Kezdjük azzal, hogy hogyan kell beállítani vagy kivetíteni.

Előfeltételek

Mielőtt elkezdenénk, először néhány dologra szükségünk van.

  1. Győződjön meg arról, hogy a Node.js és az npm telepítve van. Azt javaslom, hogy telepítsék a legújabb LTS-jüket vagy a jelenlegi stabil verziójukat. Telepítheti a Node.js Source vagy az NVM (Node Version Manager) keresztül
  2. A terminálparancsok alapismeretei. A legtöbb parancs egyébként az oktatóanyagban található, így nem kell aggódnia miattuk.
  3. Győződjön meg róla, hogy nyitva van a terminál és telepítve van a kedvenc szövegszerkesztője.

Ennyi, jól megyünk!

Az Express telepítése

Az Express generátor segítségével létrehozunk egy új projektet generált kóddal, néhány fájlt áthelyezünk, és néhány kódot ES6 szintaxissá konvertálunk. Ebben a korai szakaszban kell átalakítanunk, mert szükségünk van egy módra annak ellenőrzésére, hogy működik-e az ES6 kódunk.

Projekt beállítása

Futtassa ezt a parancsot a terminálján. Nevezhet your-project-namea kívánt névvel. --no-viewA flag azt jelenti, hogy a csontváz Express alkalmazásához nem használunk sablonmotort, például kormányt, ejs-t vagy mopszot.

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

Az alkalmazás létrehozása után el kell mennie az alkalmazás könyvtárába. Windows Powershell és Linux terminálok esetén használja:

cd your-project-name

Ezután nyissa meg a kívánt szövegszerkesztőt. Nekem csak a VSCode-ot használom, így egyszerre van nyitva a terminálom és a szövegszerkesztőm. De bármilyen tetszőleges szövegszerkesztőt használhat.

Csomagok telepítése és fájlok áthelyezése és törlése

Miután elkészítettük a generált projektet, át kell állítanunk installa függőségeket és áthelyeznünk néhány mappát. Az Express és más csomagok telepítéséhez futtassa ezt a parancsot.

npm telepítés

Amíg a függőségek telepítésére vár, kövesse ezeket a lépéseket.

  • hozzon létre egy server/mappát
  • Helyezze a bin/, app.jsés routes/a server/mappába.
  • Átnevezés www, megtalálva itt bin:www.js
  • Hagyja a public/mappát a projektgyökérnél.

A fájlszerkezete a következőképpen fog kinézni:

Most, hogy módosítottuk a fájlszerkezetet, az indítószerver szkriptünk nem fog működni. De megoldjuk útközben.

Konvertálás ES6 kódgá

A létrehozott kód konvertálása ES6-ra kissé unalmas, ezért csak ide teszem fel a kódot, és nyugodtan másolhatom és illeszthetem be.

Kód bin/www.js:

Most, hogy módosítottuk a fájlszerkezetet, az indító kiszolgáló szkriptünk nem fog működni. Íme, mit fogunk tenni a javítás érdekében. A package.json fájlban nevezze át az indító szkriptet serveregy JSON objektum nevűre"scripts"

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

Látni fogja, hogy megváltoztattuk a fájl elérési útvonalát ./bin/www, ./server/bin/wwwmert fájlokat áthelyeztünk ide server/. A későbbiekben a start szkriptet fogjuk használni.

Próbáld ki! Futtassa a szervert úgy, hogy beírja npm run servera terminálját, és lépjen localhost:3000a böngészőjébe.

A legfelső szintű kód konvertálása az ES6 import használatához

A létrehozott kód konvertálása ES6-ra kissé unalmas, ezért csak ide teszem fel a kódot, és nyugodtan másolhatom és illeszthetem be.

Kód 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.

Szinte az összes módosításunk csak a fájlok tetején és végén található. Hagyunk más generált kódot.

Kód routes/index.js és routes/users.js:

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

Kód 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;

Az app.js, mert elhagyta public/a projekt gyökér, meg kell változtatni az Express statikus útvonal egyik mappából fel. Figyeljük meg, hogy az út 'public'vált '../public'.

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

Oké, elkészültünk a kód konvertálásával! Állítsuk be most a szkriptjeinket.

Szkriptek beállítása

A szkriptek beállításakor minden szkript más és más szerepet tölt be. És újra felhasználjuk az npm szkripteket. Fejlesztési és gyártási környezeteinknek pedig más a konfigurációjuk. (Szinte azonos, később meglátja) Ezért kell összeállítanunk a szkriptjeinket, hogy használhassuk őket anélkül, hogy ugyanazokat a dolgokat ismételten begépelnénk.

Telepítse az `npm-run-all` alkalmazást

Mivel egyes terminálparancsok nem fognak működni a Windows cmd-n, telepítenünk kell egy úgynevezett csomagot, npm-run-allígy ez a szkript bármilyen környezetben működik. Futtassa ezt a parancsot a terminál projekt gyökérkönyvtárában.

npm install --save npm-run-all

Telepítse a babel, a nodemon és a rimraf programokat

A Babel egy modern JavaScript transzpiler. A transzpiler azt jelenti, hogy a modern JavaScript-kód átalakul egy régebbi formátumba, amelyet a Node.js megérthet. Futtassa ezt a parancsot a terminál projekt gyökérkönyvtárában. A babel legújabb verzióját (Bábel 7+) fogjuk használni.

Ne feledje, hogy a Nodemon a fájlmegfigyelőnk, a Rimraf pedig a fájleltávolító csomagjaink.

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

Transpile script hozzáadása

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