Node.js
Node.JS med ES6

Introduktion

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:

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

2. Kontrollera kompatibilitetsnivån för din nodversion på http://node.green

3. 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 :)