Node.js
Node.JS с ES6
Поиск…
Вступление
ES6, ECMAScript 6 или ES2015 - это новейшая спецификация JavaScript, которая вводит некоторый синтаксический сахар в язык. Это большое обновление для языка и множество новых функций
Более подробную информацию о узлах и ES6 можно найти на их сайте https://nodejs.org/en/docs/es6/
Узел ES6 Поддержка и создание проекта с Babel
Вся спецификация ES6 еще не реализована полностью, поэтому вы сможете использовать только некоторые из новых функций. Вы можете увидеть список текущих поддерживаемых функций ES6 на странице http://node.green/
С NodeJS v6 была довольно хорошая поддержка. Поэтому, если вы используете NodeJS v6 или выше, вы можете пользоваться ES6. Тем не менее, вы также можете использовать некоторые из неизданных функций, а некоторые из-за пределов. Для этого вам нужно будет использовать транспилер
Можно запустить транспилятор во время выполнения и сборки, чтобы использовать все функции ES6 и многое другое. Самый популярный транспилятор для JavaScript называется Babel
Babel позволяет использовать все функции из спецификации ES6 и некоторые дополнительные функции не в спецификации с «stage-0», например, import thing from 'thing
вместо var thing = require('thing')
Если бы мы хотели создать проект, в котором мы использовали бы функции stage-0, такие как импорт, нам нужно было бы добавить Babel в качестве транспилятора. Вы увидите проекты с использованием реакции, а Vue и другие шаблоны на основе commonJS реализуют этап-0 довольно часто.
создать новый проект узла
mkdir my-es6-app
cd my-es6-app
npm init
Установите Babel на предустановку ES6 и этап-0
npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register
Создайте новый файл с именем server.js
и добавьте базовый 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/')
Обратите внимание, что мы используем import http from 'http'
-порт для import http from 'http'
это функция stage-0, и если она работает, это означает, что мы правильно работаем с транспилером.
Если вы запустите node server.js
он не сможет понять, как обрабатывать импорт.
Создание файла .babelrc в корневой директории вашего каталога и добавление следующих параметров
{
"presets": ["es2015", "stage-2"],
"plugins": []
}
теперь вы можете запустить сервер с node src/index.js --exec babel-node
Завершение работы - неплохо запустить транспилятор во время выполнения в производственном приложении. Однако мы можем внедрить некоторые скрипты в нашем пакете.json, чтобы упростить работу.
"scripts": {
"start": "node dist/index.js",
"dev": "babel-node src/index.js",
"build": "babel src -d dist",
"postinstall": "npm run build"
},
Вышеупомянутое будет на npm install
строить переданный код в каталог dist, чтобы npm start
использовать перекодированный код для нашего производственного приложения.
npm run dev
будет загружать сервер и время загрузки буфера, что отлично и предпочтительно при работе над проектом локально.
Идя дальше, вы можете установить nodemon npm install nodemon --save-dev
чтобы следить за изменениями и перезагружать приложение узла.
Это действительно ускоряет работу с babel и NodeJS. В вас package.json просто обновите скрипт «dev», чтобы использовать nodemon
"dev": "nodemon src/index.js --exec babel-node",
Использовать JS es6 в приложении NodeJS
JS es6 (также известный как es2015) представляет собой набор новых функций для языка JS, цель которого заключается в том, чтобы сделать его более интуитивным при использовании ООП или при решении современных задач разработки.
Предпосылки:
Ознакомьтесь с новыми функциями es6 по адресу http://es6-features.org - он может вас разъяснить, если вы действительно собираетесь использовать его в своем следующем приложении NodeJS
Проверьте уровень совместимости версии вашего узла на странице http://node.green
Если все в порядке - давайте код!
Вот очень короткая выборка простого приложения hello world
с 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();
Вы можете запустить эту программу и наблюдать, как она печатает одно и то же сообщение снова и снова.
Теперь .. пусть сломает его по строкам:
'use strict'
Эта строка действительно требуется, если вы собираетесь использовать js es6. strict
режим, умышленно, имеет разную семантику из обычного кода (пожалуйста, прочитайте больше об этом на MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
class Program
Невероятно - ключевое слово class
! Просто для быстрой справки - до es6 единственный способ определить класс в js был с ключевым словом ... function
!
function MyClass() // class definition
{
}
var myClassObject = new MyClass(); // generating a new object with a type of MyClass
При использовании ООП класс является очень фундаментальной способностью, которая помогает разработчику представлять определенную часть системы (разрыв кода имеет решающее значение, когда код становится больше .. например: при написании кода на стороне сервера)
constructor()
{
this.message = 'hello es6 :)';
}
Вы должны признать - это довольно интуитивно! Это c'tor моего класса - эта уникальная «функция» будет возникать каждый раз, когда объект создается из этого конкретного класса (в нашей программе - только один раз)
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);
}
Поскольку print определен в области класса - это фактически метод, который может быть вызван либо из объекта класса, либо из самого класса!
Итак .. до сих пор мы определили наш класс .. время его использовать:
new Program().print();
Что действительно равно:
var prog = new Program(); // define a new object of type 'Program'
prog.print(); // use the program to print itself
В заключение: JS es6 может упростить ваш код - сделать его более понятным и понятным (по сравнению с предыдущей версией JS) .. вы можете попытаться переписать существующий код и увидеть разницу для себя
НАСЛАЖДАТЬСЯ :)