web-dev-qa-db-fra.com

Comment configurer Babel 6 avec Node JS pour utiliser ES6 dans mon code côté serveur?

J'ai lu plusieurs fois la documentation fournie sur: Node API Babel 6 Docs

Je commence l'apprentissage de pg-promise en suivant le didacticiel Learn by Example et préférerais travailler avec ES6 et transposer en ES5 avec Babel, mais je ne suis pas sûr de certaines choses:

  1. Après avoir installé babel-core, quel préréglage dois-je utiliser et où/comment le configurer pour fonctionner?

La documentation n'était pas claire pour moi sur le fichier que je mettais: require ("babel-core"). Transform ("code", options); dans et quelles parties de ce code sont des espaces réservés. Lorsque j'utilise ce code, est-ce que je l'utilise une seule fois quelque part et puis-je utiliser ES6 dans tous les autres fichiers? Comment pourrait-on y parvenir?

  1. J'ai lu à propos de ce fichier .babelrc et je voudrais confirmer si le nom de fichier réel est ".babelrc" ou si ce n'est que l'extension de fichier et où par rapport au répertoire racine de mon projet dois-je mettre ce fichier .. et comment Je fais un lien avec ça?

  2. Si j'utilise pg-promise dois-je utiliser ES6 et Babel ou exécuter: npm installe comme décrit sous Test pour pg-promesse suffira et essayer d'utiliser ES6 avec cela créera plus de problèmes?

J'espérais profiter de let et const si le besoin se faisait sentir lors de mon développement côté serveur.

  1. Existe-t-il une structure de fichiers standard pour une configuration de serveur node + babel + pg-promise?

Edit À noter que j'ai également lu Node JS avec Babel-Node et vu que l'utilisation de ceci devrait être évitée. La réponse finale tout en bas n'avait pas vraiment de sens pour moi pour des raisons similaires, j'ai du mal à suivre la documentation réelle fournie par Babel.

node.jspostgresqlbabeljspg-promise
34
Jax Cavalera

1.a Quel préréglage est nécessaire?

Vous devrez d'abord installer Babel avec npm install babel-core --save-dev Dans le répertoire racine de votre projet en utilisant une fenêtre de terminal comme l'invite de commande.

Une fois installé, vous devrez installer le préréglage es2015 avec npm install babel-preset-es2015 --save-dev. Babel-Core est conforme aux promesses/A + mais pas idéal pour une utilisation en raison d'une mauvaise gestion des erreurs, donc une bibliothèque telle que Bluebird doit être utilisé à la place à cette fin. Afin de transpiler, babel-core devra toujours être installé et es2015 active le transpillage ES6-> ES5 afin que vous puissiez utiliser des choses fantaisistes comme let et const, etc.

1.b Où mettre require("babel-core");?

à la place, utilisez require("babel-core/register"); et placez-le dans votre fichier d'entrée généralement appelé, "server.js". Le fichier server.js devra utiliser exclusivement CommonJS (ES5).

En utilisant l'instruction "require", elle appliquera toutes les transformations pertinentes à tout le code requis dans le fichier d'entrée et tous les fichiers étant requis/inclus dans ces fichiers.

Vous pointez sur le fichier d'entrée dans package.json sous la section "main":.

Package.json est créé lorsque vous initialisez le projet avec npm init Dans le répertoire racine de votre projet dans la fenêtre du terminal

Une approche à ce sujet serait:

  • Fichier d'entrée - server.js
  • server.js - nécessite {babel-core et le fichier ES6 principal: config.js/jsx/es6/es}
  • config.es6 - utilise ES6 et inclut (nécessite) pour tous les autres fichiers de projet qui peuvent également utiliser ES6 lorsqu'ils sont transposés en étant chargés dans le = "config" fichier qui est directement transposé par babel-core.

2. Qu'est-ce que .babelrc?

.babelrc Est le nom du fichier et doit être placé dans le même dossier que votre fichier package.json (normalement le répertoire racine) et se "chargera" automatiquement lorsque babel-core sera requis pour déterminer le ou les préréglages ou plugins doivent être utilisés.

Dans .babelrc, Vous devrez ajouter le code suivant:

{
  "presets": ["es2015"]
}

3. Section des tests pg-promise

Une citation directe du développeur a récemment répondu à cette

Vous n'avez pas à vous soucier des étapes des tests, utilisez uniquement les étapes de l'installation. Celui des tests concerne l'installation de la dépendance de développement, afin d'exécuter des tests. Pg-promise peut fonctionner avec n'importe quelle bibliothèque de promesses conforme à la spécification Promises/A +.

4. Structure standard de fichiers/dossiers pour les projets côté serveur?

Il n'y a pas de moyen standard pour accomplir cette tâche car chaque projet a des exigences uniques. Un bon point de départ serait de placer le fichier Entry dans le répertoire racine du projet, le ES6 Config fichier dans un sous-dossier "scripts" ou "src" et composants individuels dans les dossiers en dessous.

par exemple.

  • ROOT/server.js
  • ROOT/src/config.es6
  • ROOT/src/component1/files.es6
  • ROOT/src/component2/files.es6

Avec cela en place, Babel réussira à transposer tous les ES6 à ES5 et à permettre la prise en charge des promesses conformes à A +.

Pour commencer à utiliser le serveur Web node.js Ce guide fournit un peu plus d'informations et dans le contexte de cette réponse, le code affiché serait placé dans le fichier config.es6 ES6 et le code suivant irait dans le Entrée fichier server.js:

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

Le processus de construction d'applications Web isomorphes est différent de celui-ci et utiliserait probablement des choses comme grunt, gulp, webpack, babel-loader, etc. un autre exemple pouvant être Trouvé ici .

Cette réponse est la combinaison de plusieurs points clés fournis par d'autres réponses à cette question ainsi que des contributions de développeurs expérimentés et de mes propres recherches et tests personnels. Merci à tous ceux qui ont contribué à la production de cette réponse.

45
Jax Cavalera

  1. Cette réponse utilise cette structure de répertoire simple

    project/server/src/index.js => votre fichier serveur

    project/server/dist/ => où babel mettra votre fichier transpilé

  2. Installer les dépendances babel

    npm install -g babel nodemon

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

  3. Ajoutez ces scripts npm à votre fichier package.json

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

  4. Créez un fichier .babelrc dans le répertoire racine de votre projet

    { "presets": "es2015" }

  5. Transpilez votre annuaire avec

    npm run compile

  6. Exécutez votre serveur avec

    npm run server

6
Isaac Pak

Je pense que vous devriez utiliser un outil comme grognement ou gorgée pour gérer toutes vos tâches de "construction". Il l'automatisera pour vous et vous ne ferez aucune erreur.

En une seule commande, vous pouvez transpiler votre code dans babel ES2015 et démarrer votre application.

Je vous suggère de jeter un œil à ce projet simple . (installez simplement node_modules et lancez npm start pour démarrer le fichier app.js)

Cependant, si vous voulez vraiment utiliser babel manuellement,

  • .babelrc est le nom du fichier, vous pouvez en voir un dans ce projet (redux) pour avoir un exemple

  • .babelrc est un fichier de configuration, si vous voulez voir comment cela fonctionne, vous pouvez vérifier ce package.json (toujours redux)

  • Il n'y a en fait aucun moyen standard que je connaisse. Vous pouvez utiliser le squelette du projet ci-dessous si nécessaire, et envoyer une demande de tirage pour l'améliorer :-)

0
mfrachet

@faites simple

Étape 1

npm install nodemon --save

Dans le répertoire du projet

Étape 2

yarn add babel-cli

yarn add babel-preset-es2015

Étape: 2 Dans package.json-> scipts, remplacez "start" par ce qui suit

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

Étape 3

yarn start
0
Aslam Shaik