Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser la syntaxe ES6 dans Node (tutoriel détaillé)

亚连
Libérer: 2018-06-13 16:08:58
original
2369 Les gens l'ont consulté

Avec le support d'es6 par Google, firfox et node6.0, la finalisation de la syntaxe es6 attire de plus en plus l'attention, d'autant plus que les projets React sont essentiellement écrits en es6. L'article suivant vous présente principalement le tutoriel de base sur l'utilisation de la syntaxe ES6 dans Node. Les amis qui en ont besoin peuvent s'y référer.

Introduction au contexte connexe

La syntaxe javascript que la plupart d'entre nous utilisent maintenant est en fait ecmscript5, qui est également es5. Cette version est disponible depuis de nombreuses années et est parfaitement supportée par tous les principaux navigateurs. Par conséquent, de nombreux amis qui apprennent js ne pourront jamais comprendre la relation entre es5 et javascript. JavaScript est un langage de programmation, il a donc une version, que ce soit es5 ou es6. La dernière version d'es7 bat déjà son plein et sa dernière syntaxe nous permettra d'écrire des mises à jour de code en douceur.

Introduction

Le nœud lui-même prend déjà en charge certaines syntaxes ES6, mais certaines syntaxes telles que l'import-export et l'attente asynchrone (le nœud 8 le prend déjà en charge ), Nous ne pouvons toujours pas l'utiliser. Afin d'utiliser ces nouvelles fonctionnalités, nous devons utiliser Babel pour convertir la syntaxe ES6 en ES5

installer Babel

npm install babel-cli -g
Copier après la connexion

< ! -- plus -->

Connaissances de base

Le fichier de configuration de babel est .babelrc

{
 "presets": []
}
Copier après la connexion
Copier après la connexion

Nouveau Un dossier de démonstration, créez 1.js

const arr = [1, 2, 3];
arr.map(item => item + 1);
Copier après la connexion

et créez un fichier de configuration .babelrc

{
 "presets": []
}
Copier après la connexion
Copier après la connexion

dans le terminal et exécutez

babel 1.js -o dist.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

pour le voir , Dans le dossier, un nouveau dist.js a été créé, qui est le fichier transcodé par Babel

Cependant, il n'y a actuellement aucun changement dans dist.js car nous n'avons pas déclaré les règles de transcodage dans le fichier de configuration. Donc babel ne peut pas transcoder

Installer le plug-in de transcodage

npm install --save-dev babel-preset-es2015 babel-preset-stage-0
Copier après la connexion

Modifier le fichier de configuration

{
 "presets": [
 "es2015",
 "stage-0"
 ]
}
Copier après la connexion

es2015 peut transcoder les règles de grammaire es2015, et l'étape 0 peut transcoder la syntaxe du Code ES7 (telle que l'attente asynchrone)

Exécutez à nouveau le terminal

babel 1.js -o dist.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

Vous pouvez voir que la fonction flèche a été transcodée

var arr = [1, 2, 3];
arr.map(function (item) {
 return item + 1;
});
Copier après la connexion

Voyons essayez async wait

async function start() {
 const data = await test();
 console.log(data);
}
function test() {
 return new Promise((resolve, reject) => {
 resolve(&#39;ok&#39;);
 })
}
Copier après la connexion

Fichier transcodé

&#39;use strict&#39;;
var start = function () {
 var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
 var data;
 return regeneratorRuntime.wrap(function _callee$(_context) {
  while (1) {
  switch (_context.prev = _context.next) {
   case 0:
   _context.next = 2;
   return test();

   case 2:
   data = _context.sent;

   console.log(data);

   case 4:
   case &#39;end&#39;:
   return _context.stop();
  }
  }
 }, _callee, this);
 }));
 return function start() {
 return _ref.apply(this, arguments);
 };
}();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

function test() {
 return new Promise(function (resolve, reject) {
 resolve(&#39;ok&#39;);
 });
}
Copier après la connexion

Essayez import export

util.js

export default function say() {
 console.log(&#39;2333&#39;);
}
Copier après la connexion

1.js

import say from &#39;./util&#39;;
say();
Copier après la connexion

Cette fois, nous devons transcoder à la fois 1.js et util.js. Nous pouvons transcoder l'intégralité du dossier

babel demo -d dist
Copier après la connexion

Sous le dossier dist nouvellement généré, il y a les fichiers transcodés. Comme vous pouvez le voir, après le transcodage, le module module.exportsCMD est toujours utilisé pour charger

babel-preset-env

Le transcodage ci-dessus a en fait un défaut, qui est babel Tout le code sera converti en es5 par défaut, ce qui signifie que même si le nœud prend en charge le mot-clé let, après transcodage, il sera converti en var

Nous pouvons utiliser le plug-in babel-preset-env-. in, qui détectera automatiquement la version actuelle du nœud et transcodera uniquement la syntaxe que le nœud ne prend pas en charge, ce qui est très pratique

npm install --save-dev babel-preset-env
Copier après la connexion

.babelrc

{
 "presets": [
  ["env", {
  "targets": {
   "node": "current"
  }
  }]
 ]
 }
Copier après la connexion

1.js

class F {
 say() {
  
 }
}
const a = 1;
Copier après la connexion
babel 1.js -o dist.js
Copier après la connexion
Copier après la connexion
Copier après la connexion

Après la compilation

"use strict";
class F {
 say() {}
}
const a = 1;
Copier après la connexion

vous pouvez voir que class et const n'ont pas été transcodés car la version actuelle du nœud (8.9.3) prend en charge cette syntaxe

Utilisation de la syntaxe ES6 dans des projets réels

Koa2 nécessite Node v7.6.0 ou supérieur pour prendre en charge la syntaxe asynchrone. En même temps, nous souhaitons également utiliser l'importation. méthode d'écriture modulaire dans Koa2

npm install --save-dev babel-register
Copier après la connexion
npm install koa --save
Copier après la connexion

Créer un nouveau dossier app

util.js

export function getMessage() {
 return new Promise((resolve, reject) => {
  resolve(&#39;Hello World!&#39;);
 })
}
Copier après la connexion

app.js

import Koa from &#39;koa&#39;;
import { getMessage } from &#39;./util&#39;
const app = new Koa();
app.use(async ctx => {
 const data = await getMessage();
 ctx.body = data;
});
app.listen(3000);
Copier après la connexion

Si vous démarrez le fichier directement, ce sera certainement une erreur

node app
Copier après la connexion
Copier après la connexion

Nous avons besoin d'un fichier d'entrée à transcoder

index.js

require("babel-register");
require("./app.js");
Copier après la connexion
node index
Copier après la connexion

Vous pouvez visiter http://localhost:3000/ J'ai vu la page !

babel-register transcode en temps réel, donc lors de la publication, vous devez d'abord transcoder l'intégralité du dossier de l'application

babel app -d dist
Copier après la connexion

Cette fois, démarrez simplement app.js sous dist. >

node app
Copier après la connexion
Copier après la connexion
J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment supprimer un élément dans un tableau JS

Introduction détaillée aux points de connaissances sur les promesses en js

Comment résoudre le problème de désalignement de la barre de défilement niceScroll dans jQuery

Comment implémenter l'interface de recherche Baidu dans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal