Kuidas lubada ES6 (ja kaugemalgi) süntaks Node ja Expressiga

Kas olete kunagi proovinud ES6 süntaksit kasutades kirjutada esiotsa rakendusi, kuid kui otsustasite Node.js ja Expressi abil back-endi arendust õppida, mõistsite, et te ei saa selliseid asju kasutada nagu import fromja   export default? Kui jah, siis tulite õigesse kohta! See on samm-sammuline juhend, kuidas seadistada oma arendaja- ja tootekeskkondi, seadistada skripte ning boonusena õpime teste lisama!

Sisukord / teemade kokkuvõte

  • Kuidas see töötab?
  • Eeldused
  • Expressi installimine
  • Skriptide seadistamine
  • Boonus
  • TL; DR

Kuidas see töötab? Kõrgel tasemel vaade sellest, mida me vajame

Eelmise arenduse sarnase kasutuskogemuse lubamiseks taustarakenduste arendamise ajal on siin teie projektiga toimuvate protsesside kõrgel tasemel ülevaade.

Kood Transpiler ES6 + -lt ES5-le

Vajame paketti, mis tõlgib ES6 ja uuemad süntaksid ES5-koodiks. ES5 kood on JS-i süntaksistiil, mis on loetav aadressile node.js, näiteks module.exportsvõi var module = require('module'). Pange tähele, et tänapäeval saab peaaegu 99% ES6 + süntaksist kasutada Node.js-is. Siit paistab paabel nimega pakend .

Babel võtab js-faili, teisendab selles oleva koodi ja väljastab uue faili.

Skript, mis eemaldab failid

Alati, kui muudame oma koodis midagi, edastame selle transpilaatorisse ja see väljastab iga kord uue koopia. Seetõttu vajame skripti, mis eemaldab failid enne uue transpekteeritud koopia sisenemist. Ja selleks on olemas olemasolev pakett nimega rimraf. Rimraf kustutab failid. Me demonstreerime seda hiljem.

Faili muudatuste jälgija

Node.js-is kodeerimisel ei tule meie serveri automaatne taaskäivitamine kastist välja nagu näiteks luua-reageerida-rakenduse või vue-cli peal tehtud projekti tehes. Sellepärast installime paketi nimega nodemon, mis käivitab midagi alati, kui muudame oma koodis faili. Saame kasutada sõlme, et oma server taaskäivitada iga kord, kui faili muudetakse.

Nii et see on kõrgel tasemel vaade selle toimimisele kapoti all. Alustame sellega, kuidas peaksime seadistama või projektima.

Eeldused

Enne alustamist peame kõigepealt seadistama mõned asjad.

  1. Veenduge, et teil oleks installitud Node.js ja npm. Soovitan installida nende uusim LTS või praegune stabiilne versioon. Selle saate installida Node.js Source'i või NVM-i (Node Version Manager) kaudu
  2. Põhiteadmised terminali käskudest. Enamik käske on nagunii õpetuses, nii et te ei pea nende pärast muretsema.
  3. Veenduge, et terminal oleks avatud ja teie lemmiktekstiredaktor installitud.

See on kõik, meil on hea minna!

Expressi installimine

Ekspressgeneraatori abil loome uue projekti genereeritud koodiga, teisaldame mõned failid ja teisendame osa koodist ES6 süntaksiks. Peame selle varases staadiumis teisendama, sest vajame viisi, kuidas kontrollida, kas meie ES6 kood töötab.

Projekti seadistamine

Käivitage see käsk oma terminalis. Võite nimetada your-project-nameendale meelepärase nimega. --no-viewlipp tähendab, et me ei kasuta oma skeleton Expressi rakenduses ühtegi mallimootorit, näiteks juhtrauda, ​​ejse ega mopsi.

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

Pärast rakenduse loomist peate minema oma rakenduste kataloogi. Windows Powershelli ja Linuxi terminalide jaoks kasutage:

cd your-project-name

Järgmisena avage soovitud tekstiredaktor. Minu jaoks kasutan lihtsalt VSCode'i, nii et mul on lihtsalt terminal ja tekstiredaktor korraga avatud. Kuid võite kasutada mis tahes soovitud tekstiredaktorit.

Pakettide installimine ning failide teisaldamine ja kustutamine

Pärast seda, kui oleme loodud projekti valmis, peame installsõltuvused ja mõned kaustad teisaldama. Expressi ja muude pakettide installimiseks käivitage see käsk.

npm install

Kui ootate sõltuvuste installimist, toimige järgmiselt.

  • looge server/kaust
  • Pane bin/, app.jsja routes/sees server/kausta.
  • Nimeta ümber www, leida binüleswww.js
  • Jätke public/kaust projekti juure.

Teie failistruktuur näeb välja selline:

Kuna me muutsime failistruktuuri, ei tööta meie stardiserveri skript. Kuid me parandame selle teel.

Teisendamine ES6-koodiks

Loodud koodi teisendamine ES6-ks on veidi tüütu, nii et postitan koodi lihtsalt siia ja kopeerige ja kleepige julgelt.

Kood bin/www.js:

Kuna me muutsime failistruktuuri, ei tööta meie stardiserveri skript. Selle parandamiseks teeme järgmist. Nimetage oma failil package.json algskript ümber servernimega JSON Object"scripts"

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

Näete, et muutsime faili tee uueks ./bin/www, ./server/bin/wwwkuna kolisime failid asukohta server/. Kasutame stardiskripti hiljem.

Proovi seda! Proovige server käivitada, tippides npm run serveroma terminali ja minge localhost:3000oma brauserisse.

Kõrgema taseme koodi teisendamine ES6 impordi kasutamiseks

Loodud koodi teisendamine ES6-ks on veidi tüütu, nii et postitan koodi lihtsalt siia ja kopeerige ja kleepige julgelt.

Kood 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.

Peaaegu kõik meie muudatused asuvad ainult failide üla- ja alaosas. Jätame muud loodud koodi nagu on.

Kood routes/index.js ja routes/users.js:

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

Kood 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, sest jätsime public/hetkel projekti root, me peame muutma Express staatiline tee ühte kausta üles. Pange tähele, et tee 'public'sai '../public'.

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

Okei, oleme koodi teisendamisega valmis! Häälestame nüüd oma skriptid.

Skriptide seadistamine

Skriptide seadistamisel täidab iga skript erinevat rolli. Ja taaskasutame iga npm skripti. Ja meie arendus- ja tootmiskeskkondade jaoks on neil erinev konfiguratsioon. (Peaaegu identsed, näete hiljem.) Seetõttu peame oma skriptid kokku panema, et saaksime neid kasutada ilma sama kraami korduvalt tippimata.

Installige `npm-run-all`

Kuna mõned terminali käsud ei tööta Windowsi cmd-s, peame installima paketi nimega, npm-run-allnii et see skript töötab igas keskkonnas. Käivitage see käsk oma terminaliprojekti juurkastis.

npm install --save npm-run-all

Installige babel, nodemon ja rimraf

Babel on kaasaegne JavaScripti transpiler. Transpiler tähendab, et teie kaasaegne JavaScripti kood teisendatakse vanemasse vormingusse, millest Node.js aru saab. Käivitage see käsk oma terminaliprojekti juurkastis. Kasutame Babeli uusimat versiooni (Babel 7+).

Pange tähele, et Nodemon on meie failide jälgija ja Rimraf on meie failide eemaldamise paketid.

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

Transpile skripti lisamine

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
  • Installige kõik sõltuvused ja devsõltuvused
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save npm i -D jest
  • Lisage need skriptid paketti.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" }
  • Pange oma paketti.json konfiguratsiooni babel, nodemon ja jest
"nodemonConfig": { "exec": "npm run dev", "watch": [ "server/*", "public/*" ], "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] }, "babel": { "presets": [ "@babel/preset-env" ] }, "jest": { "testEnvironment": "node" },
  • Testige oma skripte käivitades npm run your-script-here
  • Näete täielikku repot minu githubis

Märkused ja lahtiütlused

Pange tähele, et see seadistus ei pruugi osutuda ideaalseks kõigis olukordades, eriti suurte projektide jaoks. (nagu 1k faili kood). Sammu ümberlaadimine ja kustutamine võivad teie arenduskeskkonda aeglustada. Lisaks on ES-moodulid peaaegu sõlmpunkti jõudmas. Kuid sellegipoolest on see hea õppematerjal, et mõista, kuidas rahmeldamine kapoti all käib nagu siis, kui arendame esiotsa rakendusi :)

Järeldus

Hästi! Loodan, et õppisite palju. Täname, et lugesid nii kaugele.

Head kodeerimist!

Kontrollige täielikku repot siin.

See artikkel on avaldatud freeCodecampi uudistes.

? Twitter -? freeCodeCamp -? Portfell - ⚛️ Github