Node.js
Node.JS z ES6

Wprowadzenie

Węzeł ES6 Wsparcie i tworzenie projektu z Babel

Cała specyfikacja ES6 nie jest jeszcze zaimplementowana w całości, więc będziesz mógł korzystać tylko z niektórych nowych funkcji. Listę aktualnie obsługiwanych funkcji ES6 można znaleźć na stronie http://node.green/

Od wersji NodeJS v6 istnieje całkiem dobre wsparcie. Więc jeśli używasz NodeJS w wersji 6 lub nowszej, możesz cieszyć się używaniem ES6. Możesz jednak skorzystać z niektórych nieopublikowanych funkcji, a niektóre z nich również. W tym celu musisz użyć transpilatora

Możliwe jest uruchomienie transpilatora w czasie wykonywania i kompilacji, aby korzystać ze wszystkich funkcji ES6 i nie tylko. Najpopularniejszy transpiler dla JavaScript nazywa się Babel

Babel pozwala korzystać ze wszystkich funkcji ze specyfikacji ES6 i niektórych dodatkowych funkcji nieokreślonych w „etapie 0”, takich jak import thing from 'thing zamiast var thing = require('thing')

Gdybyśmy chcieli stworzyć projekt, w którym korzystamy z funkcji „etapu 0”, takich jak import, musielibyśmy dodać Babel jako transpiler. Zobaczysz projekty wykorzystujące reagowanie, a Vue i inne wzorce oparte na commonJS dość często implementują etap 0.

utwórz nowy projekt węzła

mkdir my-es6-app
cd my-es6-app
npm init

Zainstaluj babel preset ES6 i etap 0

npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register

Utwórz nowy plik o nazwie server.js i dodaj podstawowy serwer HTTP.

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/')

Zauważ, że używamy import http from 'http' jest to funkcja etapu 0, a jeśli działa, oznacza to, że mamy transpilator działający poprawnie.

Jeśli uruchomisz node server.js nie będzie wiedział, jak obsłużyć import.

Tworzenie pliku .babelrc w katalogu głównym katalogu i dodaj następujące ustawienia

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

możesz teraz uruchomić serwer z node src/index.js --exec babel-node

Na zakończenie nie jest dobrym pomysłem uruchomienie transpilatora w środowisku wykonawczym w aplikacji produkcyjnej. Możemy jednak zaimplementować niektóre skrypty w pakiecie.json, aby ułatwić pracę.

"scripts": {
    "start": "node dist/index.js",
    "dev": "babel-node src/index.js",
    "build": "babel src -d dist",
    "postinstall": "npm run build"
  },

Powyższe przy npm install zbuduje kod transpilowany do katalogu dist, umożliwi npm start używania kodu transpilowanego do naszej aplikacji produkcyjnej.

npm run dev uruchomi środowisko uruchomieniowe serwera i babel, co jest dobre i preferowane przy lokalnej pracy nad projektem.

Idąc jeszcze dalej, możesz zainstalować nodemon npm install nodemon --save-dev aby obserwować zmiany, a następnie ponownie uruchomić aplikację węzła.

To naprawdę przyspiesza pracę z Babel i NodeJS. W pakiecie.j.j po prostu zaktualizuj skrypt „dev”, aby używać nodemon

"dev": "nodemon src/index.js --exec babel-node",

Użyj JS es6 w swojej aplikacji NodeJS

JS es6 (znany również jako es2015) to zestaw nowych funkcji języka JS, które mają uczynić go bardziej intuicyjnym podczas korzystania z OOP lub w obliczu nowoczesnych zadań programistycznych.

Wymagania wstępne:

1. Sprawdź nowe funkcje es6 na http://es6-features.org - może ci to wyjaśnić, czy naprawdę zamierzasz używać go w kolejnej aplikacji NodeJS

2. Sprawdź poziom zgodności wersji swojego węzła na http://node.green

3. Jeśli wszystko jest w porządku - włączmy kod!

Oto bardzo krótka próbka prostej aplikacji hello world z 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();

Możesz uruchomić ten program i obserwować, jak drukuje ten sam komunikat w kółko.

Teraz .. podzielmy go linia po linii:

'use strict'

Ta linia jest faktycznie wymagana, jeśli zamierzasz używać js es6. tryb strict celowo ma inną semantykę niż normalny kod (więcej informacji na ten temat można znaleźć na stronie MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

class Program

Niewiarygodne - słowo kluczowe class ! Dla szybkiego odniesienia - przed es6 jedynym sposobem zdefiniowania klasy w js było użycie słowa kluczowego ... function !

function MyClass() // class definition
{

}

var myClassObject = new MyClass(); // generating a new object with a type of MyClass

Podczas korzystania z OOP klasa jest bardzo podstawową umiejętnością, która pomaga deweloperowi reprezentować określoną część systemu (rozkład kodu jest niezbędny, gdy kod staje się większy. Na przykład: podczas pisania kodu po stronie serwera)

constructor()
{
    this.message = 'hello es6 :)';
}

Musisz przyznać - to dość intuicyjne! To jest c'tor mojej klasy - ta unikalna „funkcja” będzie występować za każdym razem, gdy obiekt zostanie utworzony z tej konkretnej klasy (w naszym programie - tylko raz)

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);
}

Ponieważ print jest zdefiniowany w zakresie klasy - w rzeczywistości jest to metoda - którą można wywołać albo z obiektu klasy, albo z samej klasy!

Więc ... do tej pory zdefiniowaliśmy naszą klasę ... czas z niej skorzystać:

new Program().print();

Co jest naprawdę równe:

var prog = new Program(); // define a new object of type 'Program'

prog.print(); // use the program to print itself

Podsumowując: JS es6 może uprościć kod - uczynić go bardziej intuicyjnym i łatwiejszym do zrozumienia (w porównaniu z poprzednią wersją JS). Możesz spróbować napisać swój własny kod i zobaczyć różnicę dla siebie

CIESZYĆ SIĘ :)