So verwenden Sie die ES6-Syntax in Node (ausführliches Tutorial)

Mit der Unterstützung von es6 durch Google, firfox und node6.0 hat die Finalisierung der es6-Syntax immer mehr Aufmerksamkeit auf sich gezogen, insbesondere da Reaktionsprojekte grundsätzlich in es6 geschrieben sind. Der folgende Artikel stellt Ihnen hauptsächlich das grundlegende Tutorial zur Verwendung der ES6-Syntax in Node vor. Freunde, die es benötigen, können darauf zurückgreifen.

Verwandte Hintergrundeinführung

Die Syntax-Javascript, die die meisten von uns jetzt verwenden, ist eigentlich ecmscript5, was auch es5 ist. Diese Version ist seit vielen Jahren verfügbar und wird von allen gängigen Browsern perfekt unterstützt. Daher können viele Freunde, die js lernen, nie die Beziehung zwischen es5 und Javascript erkennen. JavaScript ist eine Programmiersprache und hat daher eine Version. Ob es5 oder es6 ist, ist die Versionsnummer. Die neueste Version von es7 ist bereits in vollem Gange und die neueste Syntax wird es uns ermöglichen, Code-Updates reibungslos zu schreiben.

Einführung

Node selbst unterstützt bereits einige ES6-Syntax, aber einige Syntaxen wie Import Export und Async Wait (Node 8 unterstützt es bereits ), Wir können es immer noch nicht verwenden. Um diese neuen Funktionen nutzen zu können, müssen wir babel verwenden, um die ES6- in die ES5-Syntax zu konvertieren

babel installieren

npm install babel-cli -g

a1f42bc7e6cafb41707c7fcf75863155

Grundkenntnisse

babels Konfigurationsdatei ist .babelrc

{
 "presets": []
}

Demo-Ordner erstellen, Erstellen Sie ein neues 1.js

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

im Ordner und erstellen Sie eine neue .babelrc-Konfigurationsdatei

{
 "presets": []
}

führen Sie das Terminal aus

babel 1.js -o dist.js

und Sie können sehen, dass ein neuer Dist vorhanden ist erstellt im Ordner.js, dies ist die von Babel transkodierte Datei

Allerdings gibt es derzeit keine Änderung in dist.js, da wir die Transkodierungsregeln nicht in der Konfigurationsdatei deklariert haben, sodass Babel nicht transkodieren kann

Installieren Sie das Transkodierungs-Plug-in

npm install --save-dev babel-preset-es2015 babel-preset-stage-0

Ändern Sie die Konfigurationsdatei

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

es2015 kann die Syntaxregeln von es2015 transkodieren, und Stufe 0 kann die ES7-Syntax (z. B. asynchron) transkodieren Warten)

Führen Sie das Terminal erneut aus

babel 1.js -o dist.js

und Sie können sehen, dass die Pfeilfunktion transkodiert wurde

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

Versuchen wir es mit asynchronem Warten

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

Die Transkodierung Datei

'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');
 });
}

Versuchen Sie es erneut mit Import Export

util.js

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

1.js

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

, um sowohl 1.js als auch util zu transkodieren .js, wir können den gesamten Ordner transkodieren

babel demo -d dist

Im neu generierten dist-Ordner befinden sich transkodierte Dateien. Wie Sie sehen können, wird das Modul module.exportsCMD nach der Transkodierung immer noch zum Laden von

babel-preset-env

Die obige Transkodierung weist tatsächlich einen Fehler auf ist babel Der gesamte Code wird standardmäßig in es5 konvertiert, was bedeutet, dass er nach der Transkodierung in var konvertiert wird, auch wenn der Knoten das Schlüsselwort let unterstützt

Wir können das Plugin babel-preset-env verwenden. in, wodurch die aktuelle Knotenversion automatisch erkannt und nur die Syntax transkodiert wird, die der Knoten nicht unterstützt, was sehr praktisch ist

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

Nach der Kompilierung

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

Wie Sie sehen können, werden Klasse und Konstante nicht transkodiert, da die aktuelle Knotenversion (8.9.3) diese Syntax unterstützt

Verwenden Sie die ES6-Syntax in Aktuelle Projekte

Koa2 erfordert Node v7.6.0 oder höher, um die asynchrone Syntax zu unterstützen. Gleichzeitig möchten wir auch die Import-Modular-Schreibmethode in Koa2 verwenden

npm install --save-dev babel-register

npm install koa --save

Neuen Ordner App erstellen

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);

Wenn Sie die Datei direkt starten, wird auf jeden Fall ein Fehler gemeldet

node app

Wir benötigen eine Eintragsdatei zum Transkodieren

index.js

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

rrree

Besuchen Sie http://localhost:3000/ und Sie können die Seite sehen!

babel-register transkodiert in Echtzeit. Wenn Sie also tatsächlich veröffentlichen, sollten Sie zuerst den gesamten App-Ordner transkodieren

node index

Dieses Mal starten Sie einfach app.js unter dist

babel app -d dist

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So löschen Sie ein Element in einem JS-Array

Detaillierte Einführung in die Wissenspunkte zu Versprechen in js

So lösen Sie das Problem mit der Fehlausrichtung der niceScroll-Bildlaufleiste in jQuery

So implementieren Sie die Baidu-Suchschnittstelle in JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die ES6-Syntax in Node (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!