Node.js
Node.JS med ES6
Sök…
Introduktion
ES6, ECMAScript 6 eller ES2015 är den senaste specifikationen för JavaScript som introducerar lite syntaktiskt socker till språket. Det är en stor uppdatering av språket och introducerar många nya funktioner
Mer information om Node och ES6 finns på deras webbplats https://nodejs.org/en/docs/es6/
Nod ES6 Stöd och skapa ett projekt med Babel
Hela ES6-specifikationen är ännu inte implementerad i sin helhet så att du bara kan använda några av de nya funktionerna. Du kan se en lista med de aktuella ES6-funktionerna som stöds på http://node.green/
Sedan NodeJS v6 har det varit ganska bra stöd. Så om du använder NodeJS v6 eller högre kan du njuta av att använda ES6. Men du kanske också vill använda några av de outgivna funktionerna och andra bortom. För detta måste du använda en transpiler
Det är möjligt att köra en transpilerare vid körtid och bygga, använda alla ES6-funktioner och mer. Den mest populära transpileraren för JavaScript kallas Babel
Babel låter dig använda alla funktioner från ES6-specifikationen och några ytterligare funktioner som inte finns i specifikationerna med "stage-0" som import thing from 'thing
istället för var thing = require('thing')
Om vi ville skapa ett projekt där vi använder "stage-0" -funktioner som import, skulle vi behöva lägga till Babel som transpilerare. Du kommer att se projekt som använder reagera och Vue och andra vanliga JS-baserade mönster implementerar stadium-0 ganska ofta.
skapa ett nytt nodprojekt
mkdir my-es6-app
cd my-es6-app
npm init
Installera babel ES6-förinställningen och steg-0
npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register
Skapa en ny fil som heter server.js
och lägg till en grundläggande HTTP-server.
import http from 'http'
http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'})
res.end('Hello World\n')
}).listen(3000, '127.0.0.1')
console.log('Server running at http://127.0.0.1:3000/')
Observera att vi använder en import http from 'http'
detta är en stage-0-funktion och om den fungerar betyder det att vi har transpileraren fungerat korrekt.
Om du kör node server.js
misslyckas det att inte veta hur man hanterar importen.
Skapa en .babelrc-fil i roten till din katalog och lägg till följande inställningar
{
"presets": ["es2015", "stage-2"],
"plugins": []
}
Du kan nu köra servern med node src/index.js --exec babel-node
Efter det är det inte bra att köra en transpilerare under körning på en produktionsapp. Vi kan dock implementera några skript i vårt paket.json för att göra det lättare att arbeta med.
"scripts": {
"start": "node dist/index.js",
"dev": "babel-node src/index.js",
"build": "babel src -d dist",
"postinstall": "npm run build"
},
Ovanstående kommer på npm install
bygga den transpilerade koden till dist katalogen så att npm start
använda den transpilerade koden för vår produktionsapp.
npm run dev
startar servern och babel-runtime, vilket är bra och föredraget när man arbetar med ett projekt lokalt.
Genom att gå ytterligare kan du sedan installera nodemon npm install nodemon --save-dev
att titta på ändringar och sedan starta om nodappen.
Detta påskyndar verkligen arbetet med babel och NodeJS. I ditt paket.json uppdaterar du bara "dev" -skriptet för att använda nodemon
"dev": "nodemon src/index.js --exec babel-node",
Använd JS es6 i din NodeJS-app
JS es6 (även känd som es2015) är en uppsättning nya funktioner för JS-språkets syfte att göra det mer intuitivt när du använder OOP eller när du står inför moderna utvecklingsuppgifter.
förutsättningar:
Kolla in de nya es6-funktionerna på http://es6-features.org - det kan förklara för dig om du verkligen tänker använda dem på din nästa NodeJS-app
Kontrollera kompatibilitetsnivån för din nodversion på http://node.green
Om allt är ok - låt oss koda på!
Här är ett mycket kort exempel på en enkel hello world
världsapp med JS es6
'use strict'
class Program
{
constructor()
{
this.message = 'hello es6 :)';
}
print()
{
setTimeout(() =>
{
console.log(this.message);
this.print();
}, Math.random() * 1000);
}
}
new Program().print();
Du kan köra detta program och se hur det skriver ut samma meddelande om och om igen.
Nu .. låt bryta ner det rad för rad:
'use strict'
Denna rad krävs faktiskt om du tänker använda js es6. strict
läge har avsiktligt olika semantik än normal kod (läs mer om det på MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
class Program
Otroligt - en class
sökord! Bara för en snabbreferens - innan es6 var det enda sättet att definiera en klass i js med ... function
nyckelord!
function MyClass() // class definition
{
}
var myClassObject = new MyClass(); // generating a new object with a type of MyClass
När man använder OOP är en klass en mycket grundläggande förmåga som hjälper utvecklaren att representera en specifik del av ett system (neddelning av kod är avgörande när koden blir större .. till exempel: när man skriver server-sidkod)
constructor()
{
this.message = 'hello es6 :)';
}
Du måste erkänna - det här är ganska intuitivt! Det här är inte min klass - denna unika "funktion" kommer att inträffa varje gång ett objekt skapas från denna klass (i vårt program - bara en gång)
print()
{
setTimeout(() => // this is an 'arrow' function
{
console.log(this.message);
this.print(); // here we call the 'print' method from the class template itself (a recursion in this particular case)
}, Math.random() * 1000);
}
Eftersom tryck definieras i klassomfånget - det är faktiskt en metod - som kan åberopas från antingen klassens objekt eller från klassen självt!
Så .. tills nu definierade vi vår klass .. tid att använda den:
new Program().print();
Vilket verkligen är lika med:
var prog = new Program(); // define a new object of type 'Program'
prog.print(); // use the program to print itself
Sammanfattningsvis: JS es6 kan förenkla din kod - göra den mer intuitiv och lätt att förstå (jämföra med den tidigare versionen av JS) .. du kan försöka skriva om en befintlig kod för dig och se skillnaden själv
NJUT AV :)