Автор оригинала: Enogwe Victor.
Ecmascript 2015 или ES6 – это термин, используемый для описания последней стабильной итерации языка программирования, обычно называемый JavaScript.
ES6 – это значительное обновление языка, и первое обновление на языке, поскольку ES5 было стандартизировано в 2009 году. Он включает в себя новые языковые синтаксисы, некоторые из которых могут считаться «синтаксическим сахаром» на уже существующие языковые функции.
Реализация этих новых функций в основных двигателях JavaScript по-прежнему продолжается в настоящее время, а преобразование требуется для включения использования этих последних функций в более старых двигателях JavaScript.
Для этого учебника мы создам Экспресс Приложение с использованием ES6. Мы будем использовать Бабел Компилятор, чтобы скомпилировать наш код ES6 на ES5.
Компилятор Babel позволит нам использовать новые функции JavaScript в нашем Express App. Также требуется, чтобы у вас есть базовые знания о JavaScript, чтобы успешно завершить это руководство.
Согласно его веб-сайте, Babel – это компилятор JavaScript, который позволяет использовать JavaScript следующего поколения, сегодня.
В этом руководстве предполагается, что вы установили Unode Package Manager ( NPM ) и Node.js Engine В вашей среде развития.
Лучше всего следить за этим руководством в системе Linux или Mac OS. То, что сказано, что система работает в ОС Windows, также может быть установлено для запуска команд, используемых в этом руководстве.
Шаг 1: Настройка папки проекта
- Создайте новую папку с любое имя.
- Перейдите к папке, используя Терминал
- Запустите команду ниже, чтобы инициализировать свой проект в качестве пакета NPM.
npm init -y
Это будет ходить вас через создание Package.json Файл для вашего проекта. В этот момент ваш файл package.json будет выглядеть аналогично примеру ниже:
{ "name": "es6express", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
Шаг 2: Создайте точку входа вашего приложения.
- В корневом каталоге вашего проекта создайте файл под названием index.js Отказ
Шаг 3: Установка требуемых модулей (зависимости/DevDependonds)
На данный момент мы будем устанавливать модули, необходимые для разработки нашего приложения Express. Вот список:
Зависимости
Обратите внимание, что эти зависимости являются необязательными и необходимы только потому, что мы строим приложение Express.
- Экспресс : Быстрый, неопитуемый, минималистский веб-каркас для Node.js
- Морган : HTTP-запрос Logger Mardware для Node.js
Чтобы установить эти зависимости, запустите команду ниже в вашем терминале внутри вашего каталога проекта.
npm install --save express morgan
На данный момент вы должны иметь node_modules Папка в вашем каталоге проекта и ваш Package.json Файл должен выглядеть аналогичным примеру ниже:
{ "name": "es6express", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.15.2", "morgan": "^1.8.1" } }
Зависимости развития
Эти зависимости должны использовать компилятор Babel в нашем проекте.
- Babel-Cli : Компилируйте файлы из командной строки с помощью Babel
- Babel-Preset-ES2015 : Babel Preset для всех плагинов ES2015.
- Римраф : Запустите команду Unix RM -RF в Node.js.
Установите эти dev-зависимости, запустив команду ниже в вашем терминале внутри вашего каталога проекта.
npm install --save-dev babel-cli babel-preset-es2015 rimraf
В этот момент ваш файл package.json должен выглядеть как пример ниже:
{ "name": "es6express", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.15.2", "morgan": "^1.8.1" }, "devDependencies": { "babel-cli": "^6.24.0", "babel-preset-es2015": "^6.24.0", "rimraf": "^2.6.1" } }
Шаг 4: Создайте файл конфигурации Babel в корневом каталоге вашего проекта.
- Запустите команду ниже, чтобы создать файл конфигурации Babel.
touch .babelrc
Этот файл используется, чтобы сообщить Babel, как преобразовать ваши файлы JavaScript. Мы будем преобразовывать наш код ES6 в код ES5.
- Откройте свой файл .babelrc в текстовом редакторе, вставьте в следующем фрагменте кода и сохраните.
{ "presets": ["es2015"] }
Шаг 5: Используйте Babel, чтобы скомпилировать наши файлы JavaScript
Наш следующий шаг – использовать Babel, чтобы скомпилировать наши файлы JavaScript из ES6 до ES5 (помните, что мы еще не написали никаких строк кода JavaScript.).
- В вашем файле Package.json добавьте новую команду запуска и новую команду сборки. Ваш файл package.json теперь должен выглядеть аналогично примеру ниже:
{ "name": "es6express", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rimraf dist/ && babel ./ --out-dir dist/ --ignore ./node_modules,./.babelrc,./package.json,./npm-debug.log --copy-files", "start": "npm run build && node dist/index.js" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.15.2", "morgan": "^1.8.1", "rimraf": "^2.6.1" }, "devDependencies": { "babel-cli": "^6.24.0", "babel-preset-es2015": "^6.24.0" } }
Поздравляю! Теперь вы можете использовать новые функции JavaScript в приложении Express.