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
< ! -- plus -->
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
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!