Kako omogućiti ES6 (i više) sintaksu sa Node i Express

Programiranje

Jeste li ikad pokušali pisati front-end aplikacije koristeći ES6 sintaksu, ali kad ste odlučili naučiti back-end razvoj s Node.js i Express, shvatili ste da ne možete koristiti stvari poput import fromi   export default? Ako je tako, došli ste na pravo mjesto! Ovo je korak po korak vodič za konfiguriranje razvojnog i razvojnog okruženja, skripte za postavljanje, a kao bonus naučit ćemo kako dodati testove!

Sadržaj / Sažetak tema

  • Kako radi?
  • Preduvjeti
  • Instaliranje express
  • Postavljanje skripti
  • Bonus
  • TL; DR

Kako radi? Pogled na visoku razinu onoga što trebamo

Da biste omogućili doživljaj sličan razvoju u razvoju tijekom razvoja pozadinskih aplikacija, evo pogleda na visokoj razini procesa koji se događaju s vašim projektom.

Transpiler koda sa ES6 + na ES5

Treba nam paket koji prevodi sintaksu ES6 i više u ES5 kod. ES5 kôd je JS stil sintakse koji je čitljiv na node.js, kao što je module.exportsili var module = require('module'). Imajte na umu da se u današnje vrijeme gotovo 99% sintakse ES6 + može koristiti u Node.js. Ovdje blista paket nazvan babel .

Babel uzima js datoteku, pretvara kôd u njoj i izlazi u novu datoteku.

Skripta koja uklanja datoteke

Kad god promijenimo nešto u našem kodu, dodamo ga transpileru i on svaki put izda novu kopiju. Zato nam treba skripta koja uklanja datoteke prije nego što uđe nova prepisana kopija. I za to postoji postojeći paket pod nazivom rimraf. Rimraf briše datoteke. To ćemo pokazati kasnije.

Promatrač promjena datoteka

Pri kodiranju u Node.js, automatsko ponovno pokretanje našeg poslužitelja ne dolazi iz okvira baš kao kad se radi na projektu izrađenom na vrhu create-response-app ili vue-cli. Zbog toga ćemo instalirati paket zvan nodemon, koji izvršava nešto kad god promijenimo datoteku u našem kodu. Možemo iskoristiti nodemon za ponovno pokretanje našeg poslužitelja svaki put kad se datoteka promijeni.

Dakle, to je pogled na visokoj razini kako to radi ispod haube. Uz to, krenimo s tim kako bismo trebali postaviti ili projicirati.

Preduvjeti

Prije nego što započnemo, prvo trebamo postaviti neke stvari.

  1. Obavezno instalirajte Node.js i npm. Preporučujem instaliranje njihove najnovije LTS ili trenutne stabilne verzije. Možete ga instalirati putem Node.js Source ili NVM (Node Version Manager)
  2. Osnovno znanje o naredbama terminala. Većina naredbi je ionako u vodiču, tako da se o njima ne morate brinuti.
  3. Obavezno otvorite terminal i instalirajte svoj omiljeni uređivač teksta.

To je to, spremni smo za polazak!

Instaliranje Expressa

Korištenjem Express generatora stvorit ćemo novi projekt s generiranim kodom, premjestiti neke datoteke i pretvoriti dio koda u sintaksu ES6. Moramo ga pretvoriti u ovoj ranoj fazi, jer nam je potreban način da provjerimo radi li naš ES6 kod.

Postavljanje projekta

Pokrenite ovu naredbu u svom terminalu. Možete imenovati your-project-nameimenom koje vam se sviđa. --no-viewzastava znači da za našu skeletnu Express aplikaciju nećemo koristiti bilo koji mehanizam za izradu predložaka, poput upravljača, ejs-a ili mopsa.

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

Nakon izrade aplikacije, morate otići u direktorij aplikacije. Za terminale Windows Powershell i Linux koristite:

cd your-project-name

Zatim otvorite uređivač teksta koji vam se sviđa. Za mene koristim samo VSCode, tako da imam istovremeno otvoren terminal i uređivač teksta. Ali možete koristiti bilo koji uređivač teksta koji želite.

Instaliranje paketa i premještanje i brisanje datoteka

Nakon što pripremimo generirani projekt, trebamo prema installovisnostima i premjestiti neke mape. Pokrenite ovu naredbu da biste instalirali Express i druge pakete.

npm instalirati

Dok čekate da se ovisnosti instaliraju, slijedite ove korake.

  • stvoriti server/mapu
  • Put bin/, app.jsi routes/unutar server/mape.
  • Preimenuj www, pronađeno u binuwww.js
  • Ostavite public/mapu na korijenu vašeg projekta.

Struktura vaše datoteke izgledat će ovako:

Sada, jer smo izmijenili strukturu datoteke, skripta našeg početnog poslužitelja neće raditi. Ali usput ćemo to popraviti.

Pretvaranje u ES6 kod

Pretvaranje generiranog koda u ES6 pomalo je zamorno, pa ću samo objaviti kod ovdje i slobodno ga kopirati i zalijepiti.

Šifra za bin/www.js:

Sada, jer smo izmijenili strukturu datoteke, skripta našeg početnog poslužitelja neće raditi. Evo što ćemo učiniti da to popravimo. Na datoteci package.json preimenujte startnu skriptu koja se servernalazi u JSON objektu pod nazivom"scripts"

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

Vidjet ćete da smo put datoteke promijenili iz ./bin/wwwu ./server/bin/wwwjer smo datoteke premjestili u server/. Kasnije ćemo koristiti početnu skriptu.

Probaj! Pokušajte pokrenuti poslužitelj tako da upišete npm run serverna terminal i idite na localhost:3000u pregledniku.

Pretvaranje koda najviše razine u upotrebu ES6 uvoza

Pretvaranje generiranog koda u ES6 pomalo je zamorno, pa ću samo objaviti kod ovdje i slobodno ga kopirati i zalijepiti.

Šifra za 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.

Gotovo sve naše izmjene nalaze se samo na vrhu i na dnu datoteka. Ostali generirani kod ostavljamo takvi kakvi jesu.

Šifra routes/index.js i routes/users.js:

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

Šifra za 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;

U app.js, jer smo ostavili public/u korijenu projekta, trebamo mijenjati Express statične put jedan mapu gore. Primijetite da je put 'public'postao '../public'.

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

U redu, završili smo s pretvaranjem koda! Postavimo sada svoje skripte.

Postavljanje skripti

U postavljanju skripti, svaka skripta ima drugačiju ulogu. I ponovno koristimo svaku npm skriptu. A za naše razvojno i proizvodno okruženje imaju drugačiju konfiguraciju. (Gotovo identični, vidjet ćete kasnije) Zbog toga trebamo sastaviti naše skripte kako bismo ih mogli koristiti bez ponovnog upisivanja istih stvari iznova.

Instalirajte `npm-run-all`

Budući da neke naredbe terminala neće raditi na Windows cmd-u, moramo instalirati paket pod nazivom, npm-run-alltako da će ova skripta raditi u bilo kojem okruženju. Pokrenite ovu naredbu u korijenu vašeg projekta terminala.

npm install --save npm-run-all

Instalirajte babel, nodemon i rimraf

Babel je moderni JavaScript transpiler. Transpiler znači da će se vaš moderni JavaScript kôd transformirati u stariji format koji Node.js može razumjeti. Pokrenite ovu naredbu u korijenu vašeg projekta terminala. Koristit ćemo najnoviju verziju babela (Babel 7+).

Imajte na umu da je Nodemon naš promatrač datoteka, a Rimraf paket za uklanjanje datoteka.

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

Dodavanje skripte transpile

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