Kaip įgalinti ES6 (ir ne tik) sintaksę su „Node“ ir „Express“

Ar jūs kada nors bandėte rašyti išorines programas naudodami ES6 sintaksę, bet tada, kai nusprendėte išmokti programinės įrangos kūrimą naudodami „Node.js“ ir „Express“, supratote, kad negalite naudoti panašių dalykų import fromir   export default? Jei taip, jūs atėjote į reikiamą vietą! Tai yra žingsnis po žingsnio vadovas, kaip sukonfigūruoti savo „dev“ ir „prod“ aplinką, sąrankos scenarijus, o kaip premiją sužinosime, kaip pridėti testus!

Turinys / Temų santrauka

  • Kaip tai veikia?
  • Būtinos sąlygos
  • „Express“ diegimas
  • Scenarijų nustatymas
  • Premija
  • TL; DR

Kaip tai veikia? Aukšto lygio vaizdas, ko mums reikia

Jei norite įgalinti „front-end“ tipo kūrimo patirtį kurdami „back-end“ programas, pateikite aukšto lygio su jūsų procesu susijusių procesų vaizdą.

Kodo transpileris iš ES6 + į ES5

Mums reikia paketo, kuris ES6 ir naujesnę sintaksę paverčia ES5 kodu. ES5 kodas yra JS sintaksės stilius, kurį gali nuskaityti node.js, pvz., module.exportsArba var module = require('module'). Atkreipkite dėmesį, kad šiandien beveik 99% ES6 + sintaksės gali būti naudojama „Node.js“. Čia šviečia paketas, vadinamas babeliu .

Babelis paima js failą, paverčia jame esantį kodą ir išvestį į naują failą.

Scenarijus, pašalinantis failus

Kai mes ką nors pakeičiame savo kode, mes jį perduodame į transpilerį ir jis kiekvieną kartą išleidžia naują kopiją. Štai kodėl mums reikia scenarijaus, kuris pašalina failus prieš įeinant į naują perkeltą kopiją. Tam yra egzistuojantis paketas, vadinamas „rimraf“. „Rimraf“ ištrina failus. Mes tai pademonstruosime vėliau.

Failų pakeitimų stebėtojas

Koduojant „Node.js“, automatinis mūsų serverio pakartotinis paleidimas neišeina iš dėžutės, kaip ir vykdant projektą, kuris sukurtas „create-react-app“ arba „vue-cli“ viršuje. Štai kodėl mes įdiegsime paketą, vadinamą „nodemon“, kuris ką nors vykdo, kai tik pakeičiame failą savo kode. Mes galime panaudoti mazgą, kad iš naujo paleistume savo serverį kiekvieną kartą, kai keičiamas failas.

Taigi tai yra aukšto lygio vaizdas, kaip jis veikia po gaubtu. Pradėkime nuo to, kaip turėtume nustatyti ar projektuoti.

Būtinos sąlygos

Prieš pradedant, pirmiausia reikia nustatyti kai kuriuos dalykus.

  1. Įsitikinkite, kad įdiegėte „Node.js“ ir „npm“. Aš rekomenduoju įdiegti naujausią jų LTS arba dabartinę stabilią versiją. Jį galite įdiegti per „Node.js“ šaltinį arba „NVM“ („Node Version Manager“)
  2. Pagrindinės žinios apie terminalo komandas. Daugelis komandų vis tiek yra mokymo programoje, todėl jums nereikia dėl jų jaudintis.
  3. Įsitikinkite, kad jūsų terminalas atidarytas ir jūsų mėgstamiausias teksto rengyklė įdiegta.

Viskas, mums gera eiti!

„Express“ diegimas

Naudodami „Express“ generatorių sukursime naują projektą su sugeneruotu kodu, perkelsime kai kuriuos failus ir konvertuosime kai kuriuos kodus į ES6 sintaksę. Turime tai konvertuoti šiame ankstyvame etape, nes mums reikia būdo patikrinti, ar mūsų ES6 kodas veikia.

Projekto sąranka

Vykdykite šią komandą savo terminale. Galite your-project-nameįvardyti jums patinkančiu vardu. --no-viewvėliava reiškia, kad savo „skeleton Express“ programai nenaudosime jokių šablonų variklių, tokių kaip vairas, ejs ar mopsas.

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

Sukūrę programą turite eiti į savo programų katalogą. Jei naudojate „Windows Powershell“ ir „Linux“ terminalus, naudokite:

cd your-project-name

Tada atidarykite jums patinkantį teksto rengyklę. Man tiesiog naudoju „VSCode“, kad galėčiau tuo pačiu metu atidaryti terminalą ir teksto rengyklę. Bet galite naudoti bet kurį norimą teksto rengyklę.

Paketų diegimas ir failų perkėlimas bei ištrynimas

Parengę sugeneruotą projektą, turime pereiti installprie priklausomybių ir perkelti kai kuriuos aplankus. Paleiskite šią komandą norėdami įdiegti „Express“ ir kitus paketus.

npm įdiegti

Kol laukiate, kol bus įdiegtos priklausomybės, atlikite šiuos veiksmus.

  • sukurti server/aplanką
  • Įdėkite bin/, app.jsir aplanko routes/viduje server/.
  • Pervardyti www, rasta bin, kadwww.js
  • Palikite public/aplanką savo projekto šaknyje.

Jūsų failo struktūra atrodys taip:

Kadangi mes pakeitėme failų struktūrą, mūsų pradinio serverio scenarijus neveiks. Bet pakeliui tai sutvarkysime.

Konvertuojamas į ES6 kodą

Konvertuoti sugeneruotą kodą į ES6 yra šiek tiek varginantis, todėl aš tiesiog paskelbsiu kodą čia ir drąsiai nukopijuokite ir įklijuokite.

Kodas bin/www.js:

Kadangi pakeitėme failų struktūrą, mūsų pradinio serverio scenarijus neveiks. Štai ką mes padarysime, kad išspręstume. Faile package.json pervardykite pradžios scenarijų į serverJSON objektą, vadinamą"scripts"

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

Pamatysite, kad pakeitėme failo kelią iš ./bin/wwwį, ./server/bin/wwwnes perkėlėme failus į server/. Vėliau naudosime pradžios scenarijų.

Pabandyk tai! Pabandykite paleisti serverį įvesdami npm run serversavo terminalą ir eikite į localhost:3000savo naršyklę.

Aukščiausio lygio kodo konvertavimas naudoti ES6 importą

Konvertuoti sugeneruotą kodą į ES6 yra šiek tiek varginantis, todėl aš tiesiog paskelbsiu kodą čia ir drąsiai nukopijuokite ir įklijuokite.

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

Beveik visos mūsų modifikacijos yra tik failų viršuje ir apačioje. Paliekame kitą sugeneruotą kodą tokį, koks yra.

Kodas routes/index.js ir routes/users.js:

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

Kodas 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;

Kadangi app.jsmes palikome public/projekto šaknyje, turime pakeisti „Express“ statinį kelią vienu aplanku aukštyn. Atkreipkite dėmesį, kad kelias 'public'tapo '../public'.

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

Gerai, mes baigėme konvertuoti kodą! Dabar nustatykime scenarijus.

Scenarijų nustatymas

Nustatydami scenarijus, kiekvienas scenarijus atlieka skirtingą vaidmenį. Ir mes pakartotinai naudojame kiekvieną npm scenarijų. Mūsų kūrimo ir gamybos aplinkoje jie turi skirtingą konfigūraciją. (Beveik identiški, pamatysite vėliau) Štai kodėl mes turime sudaryti savo scenarijus, kad galėtume juos naudoti pakartotinai nerašydami tų pačių dalykų.

Įdiekite „npm-run-all“

Kadangi kai kurios terminalo komandos neveiks „Windows cmd“, turime įdiegti paketą, vadinamą, npm-run-alltodėl šis scenarijus veiks bet kurioje aplinkoje. Paleiskite šią komandą savo terminalo projekto šaknyje.

npm install --save npm-run-all

Įdiekite „babel“, „nodemon“ ir „rimraf“

„Babel“ yra modernus „JavaScript“ transpileris. Transpileris reiškia, kad jūsų šiuolaikinis „JavaScript“ kodas bus pakeistas į senesnį formatą, kurį „Node.js“ gali suprasti. Paleiskite šią komandą savo terminalo projekto šaknyje. Mes naudosime naujausią „babel“ versiją („Babel 7+“).

Atkreipkite dėmesį, kad „Nodemon“ yra mūsų failų stebėtoja, o „Rimraf“ yra mūsų failų šalinimo paketai.

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

Pridedamas transpile scenarijus

Prieš pradėdami „Babel“ konvertuoti kodą, turime pasakyti, kurias kodo dalis versti. Atkreipkite dėmesį, kad yra daug konfigūracijų, nes „Babel“ gali konvertuoti daugybę JS sintaksių kiekvienam skirtingam tikslui. Laimei, mums nereikia apie tai galvoti, nes tam yra numatytasis numatytasis nustatymas. Mes naudojame numatytąjį konfigūraciją, vadinamą „preset-env“ (tą, kurią įdiegėme anksčiau), savo faile „package.json“, kad pasakytume „Babel“, kokiu formatu perkoduojame kodą.

package.jsonFailo viduje sukurkite "babel"objektą ir įdėkite šį nustatymą.

// package.json { // .. contents above "babel": { "presets": ["@babel/preset-env"] }, }

Po šios sąrankos dabar esame pasirengę patikrinti, ar „babel“ tikrai konvertuoja kodą. Pridėkite scenarijų pavadinimu „transpile“ package.json:

// package.json "scripts": { "start": "node ./server/bin/www", "transpile": "babel ./server --out-dir dist-server", }

Kas čia nutiko? Pirmiausia turime paleisti komandą „cli“ babel, nurodyti failus, kuriuos norite konvertuoti, šiuo atveju - į failus server/ir įdėti perkeltą turinį į kitą aplanką, vadinamą dist-servermūsų projekto šaknimi.

Galite tai išbandyti vykdydami šią komandą

npm run transpile

Pamatysite, kad atsiras naujas aplankas.

Taip, tai pavyko! ✅ Kaip matote, yra aplankas, kuris turi tą pačią aplanko struktūrą kaip ir mūsų serverio aplankas, bet su konvertuotu kodu. Gana šaunu, tiesa? Kitas žingsnis - pabandyti, jei veikia mūsų serveris!

Švarus scenarijus

Norint turėti naują kopiją kiekvieną kartą, kai perkeliame kodą į naujus failus, mums reikia scenarijaus, kuris pašalins senus failus. Pridėkite šį scenarijų prie savo package.json

"scripts": { "server": "node ./dist-server/bin/www", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

Šis mūsų sukurtas „npm“ scenarijus reiškia, kad jis pašalina aplanką dist-server/

Dabar, norėdami sujungti „transpile“ ir „clean“, pridėkite scenarijų, vadinamą build, kuris sujungia abu procesus.

// 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
  • Įdiekite visas priklausomybes ir devDependencies
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save npm i -D jest
  • Pridėkite šiuos scenarijus prie savo 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" }
  • Į paketą įdėkite „babel“, „nodemon“ ir „jest“ konfigūracijas. Json
"nodemonConfig": { "exec": "npm run dev", "watch": [ "server/*", "public/*" ], "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] }, "babel": { "presets": [ "@babel/preset-env" ] }, "jest": { "testEnvironment": "node" },
  • Išbandykite scenarijus paleisdami npm run your-script-here
  • Visą atpirkimą pamatysite mano „github“

Pastabos ir atsisakymai

Atminkite, kad ši sąranka gali būti netinkama visoms situacijoms, ypač dideliems projektams. (pvz., 1 tūkst. kodo failų). Veiksmo perkėlimas ir ištrynimas gali sulėtinti jūsų kūrimo aplinką. Be to, „ES Modules“ jau beveik pasiekia mazgą. Tačiau, nepaisant to, tai yra gera mokomoji medžiaga, leidžianti suprasti, kaip trankymasis vyksta po gaubtu, pavyzdžiui, kai kuriame „front-end“ programas :)

Išvada

Gerai! Tikiuosi, kad daug ko išmokai. Ačiū, kad skaitėte iki šiol.

Laimingo kodavimo!

Patikrinkite visą atpirkimą čia.

Šis straipsnis yra paskelbtas „freeCodecamp“ naujienose.

? „Twitter“? freeCodeCamp -? Portfelis - G️ Github