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

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

533a0e42dadefe4d55b6b3600609b9be

Connaissances de base

Le fichier de configuration de babel est .babelrc

{
 "presets": []
}

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

const arr = [1, 2, 3];
arr.map(item => item + 1);

et créez un fichier de configuration .babelrc

{
 "presets": []
}

dans le terminal et exécutez

babel 1.js -o dist.js

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

Modifier le fichier de configuration

{
 "presets": [
 "es2015",
 "stage-0"
 ]
}

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

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

var arr = [1, 2, 3];
arr.map(function (item) {
 return item + 1;
});

Voyons essayez async wait

async function start() {
 const data = await test();
 console.log(data);
}
function test() {
 return new Promise((resolve, reject) => {
 resolve('ok');
 })
}

Fichier transcodé

'use strict';
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 'end':
   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('ok');
 });
}

Essayez import export

util.js

export default function say() {
 console.log('2333');
}

1.js

import say from './util';
say();

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

babel demo -d dist

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

.babelrc

{
 "presets": [
  ["env", {
  "targets": {
   "node": "current"
  }
  }]
 ]
 }

1.js

class F {
 say() {
  
 }
}
const a = 1;

babel 1.js -o dist.js

Après la compilation

"use strict";
class F {
 say() {}
}
const a = 1;

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

npm install koa --save

Créer un nouveau dossier app

util.js

export function getMessage() {
 return new Promise((resolve, reject) => {
  resolve('Hello World!');
 })
}

app.js

import Koa from 'koa';
import { getMessage } from './util'
const app = new Koa();
app.use(async ctx => {
 const data = await getMessage();
 ctx.body = data;
});
app.listen(3000);

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

node app

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

index.js

require("babel-register");
require("./app.js");

node index

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

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

node app

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!