Рубрики
Без рубрики

Как включить синтаксис ES6 (и выше) с узлом и экспресс

Вы когда-нибудь пытались записать интерфейсные приложения, используя синтаксис ES6, но затем, когда вы решили изучить резервное развитие с Node.js и Express, вы поняли, что вы не можете использовать такие вещи, как импорт и экспорт?   Если это так, вы пришли в нужное место! Это шаг

Автор оригинала: Jonathan Cunanan.

Вы когда-нибудь пытались написать приложения для интерфейса, используя синтаксис ES6, но затем, когда вы решили изучить резервное развитие с Node.js и Express, вы поняли, что вы не можете использовать такие вещи, как Импорт из и Экспорт по умолчанию ?   Если это так, вы пришли в нужное место! Это пошаговое руководство по настраиванию о том, как настроить среды dev и prod, сценарии установки и как бонус мы узнаем, как добавлять тесты!

Оглавление/Сводка теме

  • Как это работает?
  • Предпосылки
  • Установка экспресс
  • Настройка скриптов
  • Бонус
  • TL; доктор

Как это работает? Взгляд высокого уровня того, что нам нужно

Чтобы включить внешний опыт работы в разработке, в то время как разрабатывает задневские приложения, вот высокий вид с высоким уровнем процессов, происходящих с вашим проектом.

Код транспортировки из ES6 + до ES5

Нам нужен пакет, который переводит ES6 и выше синтаксиса в код ES5. Код ES5 – это синтаксический стиль JS, который читается к Node.js, например Module.exports или VAR («Модуль») . Обратите внимание, что в сегодняшнем времени почти 99% синтаксиса ES6 + можно использовать в Node.js. Это где пакет называется Бабел светит.

Babel принимает файл JS, преобразует код в нем и выводит в новый файл.

Сценарий, который удаляет файлы

Всякий раз, когда мы изменяем что-то в нашем коде, мы кормием его транспортом, и выводит свежую копию каждый раз. Вот почему нам нужен скрипт, который удаляет файлы до того, как преступят свежие транспортированные копии. И для этого есть существующий пакет под названием rimraf. . Rimraf удаляет файлы. Мы продемонстрируем это позже.

Наблюдатель от файлов

При кодировании в Node.js автоматический перезагрузка нашего сервера не выходит из коробки, как при выполнении проекта, сделанного в верхней части создания-реактивного приложения или VUE-CLI. Вот почему мы установим пакет под названием Nodemon, который выполняет что-то, когда мы меняем файл в нашем коде. Мы можем использовать Nodemon, чтобы перезапустить наш сервер каждый раз, когда файл изменен.

Так что это вид на высоком уровне того, как он работает под капотом. С этим давайте начнем на том, как мы должны настроить или проектировать.

Предпосылки

Прежде чем начать, нам нужны некоторые вещи настроек первой.

  1. Убедитесь, что у вас установлен Node.js и NPM. Я рекомендую устанавливать их последнюю версию LTS или текущей стабильной версии. Вы можете установить его через Node.js Источник или NVM (Узел версии Manager)
  2. Базовые знания терминальных команд. Большинство команд в любом случае в руководстве Так что вам не нужно беспокоиться о них.
  3. Убедитесь, что у вас есть открытый терминал, и ваш любимый текстовый редактор установлен.

Вот и все, мы приятно идти!

Установка экспресс

Используя Express Generator, мы создадим новый проект с генерируемым кодом, переместите некоторые файлы и преобразуете некоторый код на синтаксис ES6. Нам нужно преобразовать его на этом раннем этапе, потому что нам нужен способ проверить, работает ли наш код ES6.

Настройка проекта

Запустите эту команду в своем терминале. Вы можете назвать Ваше-проектное имя с именем, которое вам нравится. --no-view Флаг означает, что мы не будем использовать какой-либо шаблонный механизм, такой как руль, EJS или PUG, для нашего приложения Skeleton Express.

NPX Express-Generator Ваше-проектное имя –NO-View

После создания вашего приложения вам нужно перейти в свой каталог приложений. Для клемм Windows PowerShell и Linux используйте:

CD Ваше-проектное имя

Далее откройте текстовый редактор, который вам нравится. Для меня я просто использую VSCode, поэтому у меня просто есть мой терминал, а текстовый редактор открыты одновременно. Но вы можете использовать любой текстовый редактор, который вы хотите.

Установка пакетов и перемещения и удаления файлов

После того, как у нас будет созданный проект готов, нам нужно Установить зависимости и перемещение некоторых папок. Запустите эту команду для установки Express и других пакетов.

Установка NPM

Пока вы ждете установки зависимостей, выполните следующие действия.

  • Создать Сервер/ папка
  • Поставить Bin/ , app.js и маршруты/ внутри Сервер/ папка.
  • Переименовать www , найденный в Bin к www.js.
  • Уйти публично/ папка в вашем корне проекта.

Ваша структура файлов будет выглядеть так:

Теперь, потому что мы изменили структуру файла, наш сценарий запуска сервера не будет работать. Но мы исправим это по пути.

Преобразование в код ES6

Преобразование генерируемого кода на ES6 немного утомительно, поэтому я просто опубликую код здесь и не стесняюсь копировать и вставить его.

Код для Bin/www.js :

Теперь, потому что мы изменили структуру файла, наш сценарий запуска сервера не будет работать. Вот что мы сделаем, чтобы исправить это. В вашем Package.json файл, переименовать начните скрипт на Сервер найдено в объекте JSON под названием «Сценарии»

// package.json
{
  "name": "your-project-name",
  // ....other details
  "scripts": {
    "server": "node ./server/bin/www"
  }
}

Вы увидите, что мы изменили путь к файлу от ./bin/www. к ./server/bin/www. Потому что мы переместили файлы в Сервер/ Отказ Мы будем использовать начальный сценарий позже.

Попытайся! Попробуйте запустить сервер, набрав NPM запустить сервер на вашем терминале и перейдите к localhost: 3000 на вашем браузере.

Преобразование кода верхнего уровня для использования импорта ES6

Преобразование генерируемого кода на ES6 немного утомительно, поэтому я просто опубликую код здесь и не стесняюсь копировать и вставить его.

Код для Bin/www.js :

// bin/www.js
/**
 * Module dependencies.
 */
import app from '../app';
import debugLib from 'debug';
import http from 'http';
const debug = debugLib('your-project-name:server');
// ..generated code below.

Почти все наши модификации находятся только на верхней и нижней части файлов. Мы покидаем другой сформированный код как есть.

Код для маршруты/index.js и Маршруты/users.js. :

// routes/index.js and users.js
import express from 'express';
var router = express.Router();
// ..stuff below
export default router;

Код для app.js :

// app.js
import express from 'express';
import path from 'path';
import cookieParser from 'cookie-parser';
import logger from 'morgan';
import indexRouter from './routes/index';
import usersRouter from './routes/users';
var app = express();
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '../public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
export default app;

В app.js потому что мы оставили публично/ В корне проекта нам нужно изменить экспресс-статический путь в одну папку вверх. Обратите внимание, что путь «Общественный» Стал '../public' Отказ

App.use (Express.Static (Path.join (__ dirname »../public ‘))) ;

Хорошо, мы закончили с преобразованием кода! Давайте установим наши сценарии сейчас.

Настройка скриптов

При настройке скриптов каждый сценарий выполняет другую роль. И мы повторно используем каждый сценарий NPM. И для нашей среды разработки и производства у них другая конфигурация. (Почти идентично, вы увидите позже) Вот почему нам нужно составить наши сценарии, чтобы мы могли использовать их, не очень много раз вводят в те же вещи.

Установка `NPM-Run-all`

Поскольку некоторые команды терминалов не будут работать на Windows CMD, нам нужно установить пакет под названием NPM-RUN- Все Таким образом, этот скрипт будет работать для любой среды. Запустите эту команду в своем коретене в вашем конце терминала.

NPM установить –save NPM-Run-all

Установите бабел, уземин и Rimraf

Babel – современный транспортер JavaScript. Транбилер означает, что ваш современный код JavaScript будет преобразован на более старый формат, который может понять Node.js. Запустите эту команду в своем коретене в вашем конце терминала. Мы будем использовать последнюю версию Вавила (Babel 7+).

Обратите внимание, что Nodemon – наш файловый Watcher, и Rimraf – наши пакеты для удаления файлов.

NPM установить –save. @ Babel/Core @ babel/cli @ Babel/preset-env Nodemon Rimraf.

Добавление трансильного сценария

До того, как Babel начинает преобразовывать код, нам нужно сказать, какие части кода для перевода. Обратите внимание, что существует множество доступных конфигурации, поскольку Babel может преобразовать множество синтаксисов JS для каждых различных видов целей. К счастью, нам не нужно думать об этом, потому что для этого есть доступный по умолчанию. Мы используем конфигурацию по умолчанию, называемое Preset-env (тот, который мы установили ранее) в нашем файле Package.json, чтобы рассказать Babel, в каком формате мы транспортируем код.

Внутри вашего Package.json Файл, создать "Бабел" Объект и поставить эту настройку.

// package.json
{  
  // .. contents above
  "babel": {
    "presets": ["@babel/preset-env"]
  },
}

После этой установки мы сейчас готовы проверить, если Babel действительно преобразует код. Добавьте скрипт с именем Transpile в вашем Package.json :

// package.json
"scripts": {
    "start": "node ./server/bin/www",
    "transpile": "babel ./server --out-dir dist-server",
}

Теперь, что случилось здесь? Сначала нам нужно запустить команду CLI варить Укажите файлы для преобразования в этом случае файлы в Сервер/ и поместите транспортированное содержимое в другую папку, называемую Dist-Server в нашем корне проекта.

Вы можете проверить его, запустив эту команду

NPM запустить транпило

Вы увидите всплывающую папку.

Yay это сработало! ✅ Как вы можете видеть, есть папка, которая имеет одну и ту же структуру папки, что и наша папка сервера, но с преобразованным кодом внутри. Довольно круто верно? Следующий шаг – запускать попробовать, если наш сервер работает!

Чистый скрипт

Чтобы получить свежую копию каждый раз, когда мы транпилируем код в новые файлы, нам нужен скрипт, который удаляет старые файлы. Добавьте этот скрипт в свой Package.json

"scripts": {
  "server": "node ./dist-server/bin/www",
  "transpile": "babel ./server --out-dir dist-server",
  "clean": "rimraf dist-server"
}

Этот сценарий NPM, который мы сделали, значит, это удаляет папку Dist-Server/

Теперь, чтобы объединить транспорту и чистить, добавить сценарий под названием построить , который сочетает в себе два процесса.

// scripts
"build": "npm-run-all clean transpile"

Запуск SEV Script.

Теперь у нас есть сценарий сборки, нам нужно запустить наш Dev Server. Мы добавим сценарий под названием dev в нашем package.json. Это позаботится о установке нашей среды узла для «разработки», удаляя старый транспилованный код и замена его новым.

"scripts": {
  "build": "npm-run-all clean transpile"
  "server": "node ./dist-server/bin/www",
  "dev": "NODE_ENV=development npm-run-all build server",
  "transpile": "babel ./server --out-dir dist-server",
  "clean": "rimraf dist-server"
}

Примечание. Здесь мы снова изменились файл, который мы работаем на нашем скрипте сервера. Мы используем путь к файлу с транспортированным кодом, найденным в Dist-Server/ Отказ

Добавление прод скриптов

Если у нас есть скрипт Dev, который устанавливает среду узла для развития, у нас есть Продукты Скрипт, который устанавливает его на «производство. «Мы используем эту конфигурацию, когда мы развертываем. (Heroku, AWS, Digitalocean и т. Д.) Теперь мы снова добавляем наш сценарий START и SCRIPT SCRIPT в нашем Package.json снова.

"scripts": {
  "start": "npm run prod"
  "build": "npm-run-all clean transpile"
  "server": "node ./dist-server/bin/www",
  "dev": "NODE_ENV=development npm-run-all build server",
  "prod": "NODE_ENV=production npm-run-all build server",
  "transpile": "babel ./server --out-dir dist-server",
  "clean": "rimraf dist-server"
}

Мы устанавливаем Начать Сценарий по умолчанию для подталкивания, потому что START SCRIPT используется всегда путем развертывания платформ, таких как AWS или Heroku, чтобы запустить сервер.

Попробуйте либо запустить NPM начать или NPM запустить прод Отказ

// package.json
...
"nodemonConfig": { 
  "exec": "npm run dev",
  "watch": ["server/*", "public/*"],
  "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"]
},
"scripts": { 
  // ... other scripts
  "watch:dev": "nodemon"
}

Как насчет автоматического перезапуска сервера всякий раз, когда файл меняется?

Один последний скрипт, чтобы завершить нашу настройку разработки. Нам нужно добавить сценарий наблюдателя файлов, который запускает команду всякий раз, когда изменение сделано в файле. Добавьте объект JSON с именем «NodemonConfig» в вашем Package.json. Это где мы храним то, что мы говорим наблюдателям, что делать, когда файл меняется.

Кроме того, добавить сценарий под названием Смотреть: Dev В вашей упаковке.json.

// package.json
...
"nodemonConfig": { 
  "exec": "npm run dev",
  "watch": ["server/*", "public/*"],
  "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"]
},
"scripts": { 
  // ... other scripts
  "watch:dev": "nodemon"
}

Конфигурация Nodemon содержит настройки, связанные с

  • Какую команду запустить всякий раз, когда файл меняется, в нашем случае NPM запустить dev
  • Какие папки и файлы смотреть
  • А также какие файлы игнорируют

Подробнее о конфигурации Nodemon здесь Отказ

Теперь, когда у нас есть наш файловый наблюдатель, теперь вы можете просто запустить NPM Run Watch: Dev , код и сохранить ваш файл. И всякий раз, когда вы идете в localhost: 3000. Вы увидите изменения. Попробуйте!

Бонус: Добавить тесты!

Чтобы добавить тесты в нашем проекте, просто установите Jest Из NPM добавьте несколько конфигураций и добавьте скрипт под названием Тест в нашем package.json.

NPM I -D. востребоваться

Добавьте объект под названием «Jest» и тестовый скрипт в вашем Package.json

// package.json
...
"jest": { 
  "testEnvironment": "node"
},
"scripts": {
  // ..other scripts 
  "test": "jest"
}

Попробуйте, сделайте файл образец. Atest.js, напишите любые тесты и запустите скрипт!

NPM Run Test.

TL; доктор

Вот упрощенные шаги для того, как включить ES6 в Node.js. Я также включу репо, чтобы вы могли скопировать и осмотреть весь код.

  • Сделайте новый проект, используя Выразите свое-проектное имя Команда терминала.
  • Переместить Bin/ , маршруты/ и приложение в новую папку под названием SRC/ и преобразуйте код в ES6. Также не забудьте переименовать Bin/www к www.js.
  • Установите все зависимости и DevDependonds
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save
npm i -D jest
  • Добавьте эти скрипты в свой Package.json
"scripts": { 
  "start": "npm run prod", 
  "build": "npm-run-all clean transpile", 
  "server": "node ./dist-server/bin/www", 
  "dev": "NODE_ENV=development npm-run-all build server", 
  "prod": "NODE_ENV=production npm-run-all build server", 
  "transpile": "babel ./server --out-dir dist-server", 
  "clean": "rimraf dist-server", 
  "watch:dev": "nodemon", 
  "test": "jest" 
}
  • Поместите конфигурации для Вавила, узема и шума в вашем Package.json
"nodemonConfig": {
  "exec": "npm run dev",
  "watch": [ "server/*", "public/*" ],
  "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] 
}, 
"babel": { 
  "presets": [ "@babel/preset-env" ]
},
"jest": {
  "testEnvironment": "node"
},

Примечания и отказ от ответственности

Обратите внимание, что эта настройка не может быть доказана идеальной для всех ситуаций, специально для больших проектов. (Как 1k файлы кода). Шаг транспилинга и удаление может замедлить среду вашего развития. Плюс модули ES, почти приезжают в узел. Но, тем не менее, это хороший образовательный материал, чтобы понять, как проходит транспилон под капотом, как когда мы разрабатываем интерфейсные приложения:)

Заключение

Все в порядке! Я надеюсь, что вы узнали много. Спасибо за чтение этого далеко.

Счастливое кодирование!

Проверьте полное репо здесь.

Эта статья публикуется в новостях FreeCodeCamp.

? Twitter – ? FreeCodecamp – ? Портфель – ⚛️ Github

Оригинал: “https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/”

Читайте ещё по теме: