Как настроить Babel 6 с Node JS для использования ES6 в моем коде на стороне сервера?

Я несколько раз читал документацию, представленную по адресу: Node API Babel 6 Docs

Я начинаю изучать pg-promise, следуя учебнику «Учиться на примере», и предпочел бы работать с ES6 и транспилировать в ES5 с помощью Babel, но я не уверен в нескольких вещах:

  1. После установки babel-core, какой пресет мне использовать и где/как его настроить для работы?

В документации мне было неясно, в какой файл я поместил: require("babel-core").transform("code", options); и какие части этого кода являются заполнителями. Когда я использую этот код, я использую его только один раз где-то, а затем я могу использовать ES6 в любом другом файле? Как это будет достигнуто?

  1. Я прочитал об этом файле .babelrc и хотел бы подтвердить, является ли фактическое имя файла ".babelrc" или это просто расширение файла, и где по отношению к корневому каталогу моего проекта я могу поместить этот файл... и как я ссылку на него?

  2. Если я использую pg-promise, должен ли я использовать ES6 и Babel или будет достаточно запуска: npm install, как описано в разделе Тестирование для pg-promise, и попытка использовать ES6 с этим создаст больше проблем?

Я надеялся воспользоваться преимуществами let и const, если возникнет такая необходимость во время разработки моей серверной части.

  1. Существует ли стандартная файловая структура для настройки сервера node+babel+pg-promise?

Изменить Стоит отметить, что я также прочитал Node JS with Babel-Node и увидел, что этого следует избегать. Окончательный ответ в самом низу не имел для меня смысла по тем же причинам, по которым у меня возникают проблемы с фактической документацией, предоставленной Babel.


person Jax Cavalera    schedule 10.11.2015    source источник


Ответы (4)


1.a Какой пресет нужен?

Сначала вам нужно будет установить Babel с npm install babel-core --save-dev в корневом каталоге вашего проекта, используя окно терминала, такое как командная строка.

После установки вам нужно будет установить предустановку es2015 с помощью npm install babel-preset-es2015 --save-dev. Babel-Core совместим с Promises/A+, но не идеально для использования из-за плохой обработки ошибок, поэтому для этой цели следует использовать такую ​​библиотеку, как Bluebird. Для транспиляции по-прежнему необходимо установить babel-core, а es2015 позволяет транспилировать ES6-> ES5, поэтому вы можете использовать причудливые вещи, такие как let и const и т. д.

1.b Где поставить require("babel-core");?

вместо этого используйте require("babel-core/register"); и поместите его в свой файл Entry, который обычно называется "server.js". Файл server.js должен будет использовать исключительно CommonJS (ES5).

Используя оператор "require", он применит все соответствующие преобразования ко всему коду, необходимому в файле Entry, и ко всем файлам, которые требуются/включаются в эти файлы.

Вы указываете на файл Entry внутри package.json в разделе "main":.

Package.json создается, когда вы инициализируете проект с помощью npm init в корневом каталоге вашего проекта в окне терминала.

Один из подходов к этому:

  • Файл ввода — server.js
  • server.js — требуется {babel-core и основной файл ES6: config.js/jsx/es6/es}
  • config.es6 — использует ES6 и включает (требует) все остальные файлы проекта, которые также могут использовать ES6, поскольку они транспилируются путем загрузки в файл "config", который напрямую транспилируется babel-core.

2. Что такое .babelrc?

.babelrc — это имя файла, которое должно быть помещено в ту же папку, что и ваш файл package.json (обычно это корневой каталог), и будет автоматически «загружаться», когда требуется babel-core, чтобы определить, какие предустановки или плагины следует использовать.

Внутри .babelrc вам нужно будет добавить следующий код:

{
  "presets": ["es2015"]
}

3. Секция тестирования pg-promise

Прямая цитата от разработчика недавно ответила на это

Вам не нужно беспокоиться о шагах в тестах, используйте только шаги в установке. Один в тестах относится к установке зависимостей dev для запуска тестов. pg-promise может работать с любой библиотекой обещаний, совместимой со спецификацией Promises/A+.

4. Стандартная структура файлов/папок для серверных проектов?

Не существует стандартного способа выполнить эту задачу, поскольку каждый проект имеет уникальные требования. Хорошей отправной точкой будет размещение файла Entry в корневом каталоге проекта, файла ES6 Config в подпапке «scripts» или «src» и отдельных компонентов. в папках ниже этого.

e.g.

  • КОРЕНЬ/server.js
  • КОРЕНЬ/src/config.es6
  • КОРЕНЬ/src/component1/files.es6
  • КОРЕНЬ/src/component2/files.es6

Благодаря этому Babel успешно перенесет все ES6 в ES5 и обеспечит поддержку обещаний, совместимых с A+.

Чтобы начать использовать веб-сервер node.js, это руководство дает немного больше информации, и в контексте этого ответа показанный код будет помещен в файл ES6 config.es6, а следующий код будет помещен в файл Entry server.js:

require("babel-core/register");
require("./src/config.es6");

Процесс создания изоморфных веб-приложений отличается от этого и, вероятно, будет использовать такие вещи, как grunt, gulp, webpack, babel-loader и т. д., другим примером которых может быть Найти здесь.

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

person Jax Cavalera    schedule 11.11.2015
comment
Есть ли репозиторий, который мы можем подобрать, чтобы увидеть пример? - person calbertts; 05.02.2016
comment
Этот ответ был использован для создания следующего репозитория и связанного файла, в частности: github .com/JaxCavalera/Tagged-DBserver/blob/master/server.js - person Jax Cavalera; 06.02.2016
comment
Если вы хотите построить изоморфно и включить CSS на стороне сервера и т. д., то пример, сочетающий использование Babel 6 с серверной частью Webpack, можно найти здесь: Babel-Loader настроен github.com/JaxCavalera/Tagged_Isomorphic/blob/master/ Сервер -Боковой веб-пакет настроен с использованием общего webpack.config.js github.com/JaxCavalera/Tagged_Isomorphic/blob/master/ Различные конфигурации веб-пакетов запускаются с помощью сценариев NPM, определенных в файле package.json. - person Jax Cavalera; 06.02.2016
comment
@JaxCavalera, но разве вавилон-регистр Require Hook не стабилен для производственного кода? Разве люди не должны использовать babel-cli? - person Nick Pineda; 11.03.2016

  1. В этом ответе используется эта простая структура каталогов

    project/server/src/index.js => файл вашего сервера

    project/server/dist/ => куда babel поместит транспилированный файл

  2. Установить зависимости Babel

    npm install -g babel nodemon

    npm install --save-dev babel-core babel-preset-es2015

  3. Добавьте эти сценарии npm в файл package.json.

    "scripts": { "compile": "babel server/src --out-dir server/dist", "server": "nodemon server/dist/index.js }

  4. Создайте файл .babelrc в корневом каталоге вашего проекта.

    { "presets": "es2015" }

  5. Перенесите свой каталог с помощью

    npm run compile

  6. Запустите свой сервер с

    npm run server

person Isaac Pak    schedule 10.05.2017
comment
Как тогда лучше смотреть сценарии? - person chrisjlee; 01.09.2017
comment
Я не знаю. Я просто нажимаю ctrl-c и перезапускаю скрипт npm, когда вношу изменения в сервер. - person Isaac Pak; 08.03.2018

Я думаю, что вы должны использовать такой инструмент, как grunt или gulp, чтобы управлять всеми вашими задачами «сборки». Это автоматизирует его для вас, и вы не будете делать ошибок.

Одной командой вы можете перенести свой код в babel ES2015 и запустить свое приложение.

Я предлагаю вам взглянуть на этот простой проект. (просто установите node_modules и запустите npm start, чтобы запустить файл app.js)

Однако, если вы действительно хотите использовать babel вручную,

  • .babelrc — это имя файла, вы можете увидеть его в этого проекта (сокращение), чтобы иметь пример

  • .babelrc — это файл конфигурации, если вы хотите увидеть, как он работает, вы можете проверить этот package.json (всегда избыточный)

  • На самом деле я не знаю стандартного способа. Вы можете использовать скелет проекта ниже, если это необходимо, и отправить запрос на включение, чтобы улучшить его :-)

person mfrachet    schedule 10.11.2015
comment
Спасибо за ваш ответ, я не уверен, что понимаю, как применить его к ситуации. Я думал, что Gulp используется для создания вашего клиентского контента. Я не уверен, как применить информацию из этого простого проекта к рассматриваемому вопросу. Мой единственный опыт работы с диспетчером задач — это Webpack, но, насколько мне известно, он также предназначен только для клиентской стороны. В примере с редуксом *.babelrc просто должен находиться в той же папке, что и файл package.json, чтобы node/babel мог найти и использовать его при запуске любой команды script: в терминале? Это третья ссылка на стороне клиента или она работает на сервере узла? - person Jax Cavalera; 10.11.2015
comment
Gulp не только для клиентской стороны - person mfrachet; 10.11.2015
comment
Есть ли пошаговое руководство по началу работы с сервером gulp+babel6+node и pg-promise? Похоже, это может быть хорошим способом, если я смогу найти понятную документацию о том, как использовать их вместе. - person Jax Cavalera; 10.11.2015

@Сделай это проще

Шаг 1

npm install nodemon --save

В каталоге проекта

Шаг 2

yarn add babel-cli

yarn add babel-preset-es2015

Шаг: 2 В package.json-> scipts измените «start» на следующее

start: "nodemon src/server.js --exec babel-node --presets es2015"

Шаг 3

yarn start
person Aslam Shaik    schedule 21.06.2019