Node で ES6 構文を使用する方法 (詳細なチュートリアル)

Google、filfox、node6.0 による es6 のサポートにより、特に反応プロジェクトは基本的に es6 で記述されるため、es6 構文の完成はますます注目を集めています。次の記事では、Node で ES6 構文を使用するための基本的なチュートリアルを主に紹介します。必要な方は参照してください。

関連背景の紹介

現在私たちのほとんどが使用している構文 JavaScript は、実際には ecmscript5 であり、es5 でもあります。このバージョンは長年にわたって利用可能であり、すべての主要なブラウザで完全にサポートされています。したがって、js を学習している多くの友人は、es5 と javascript の関係を決して知ることができません。 JavaScript はプログラミング言語なので、es5 か es6 がバージョン番号です。最新バージョンの es7 はすでに本格的に稼働しており、その最新の構文によりコード更新をスムーズに作成できるようになります。

はじめに

Node 自体はすでにいくつかの ES6 構文をサポートしていますが、インポートエクスポートや async await などの一部の構文はまだ使用できません (Node 8 はすでにサポートしています)。これらの新機能を使用するには、babel を使用して ES6 から ES5 構文に変換する必要があります

babel をインストール

npm install babel-cli -g

95712e0b0bc62c64b1fddfac486f9cb8

基礎知識

babel 設定ファイルは.babelrc

{
 "presets": []
}

demoフォルダを作成し、そのフォルダ下に1.js

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

を作成すると同時に、ターミナル上で新しい.babelrc設定ファイルを作成

{
 "presets": []
}

実行することができます。フォルダーの下に新しい dist.js が作成されていることを確認してください。これは Babel によってトランスコードされたファイルです

ただし、構成ファイルでトランスコーディング ルールを宣言していないため、現時点では dist.js に変更はありません。 Babel はトランスコードできません

トランスコード プラグインをインストールします

babel 1.js -o dist.js

設定ファイルを変更します

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

es2015 は es2015 の構文ルールをトランスコードできます、stage-0 は ES7 構文 (async await など) をトランスコードできます

ターミナルを再度実行します

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

アロー関数がトランスコードされているのがわかります

babel 1.js -o dist.js

async awaitを試してみましょう

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

トランスコードされたファイル

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

を試してimport、export

util.js

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

1.js

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

今回は1.js と util.js の両方をトランスコードする必要があります。フォルダー全体をトランスコードできます

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

新しく生成された dist フォルダーにトランスコードされたファイルがあります。ご覧のとおり、トランスコーディング後も、 module.exportsCMD モジュールは

babel-preset-env

の読み込みに使用されます。上記のトランスコーディングには実際には欠陥があります。つまり、Babel はデフォルトですべてのコードを es5 に変換します。これは、ノードが let キーワードをサポートしている場合でも、トランスコード後に var に変換されます

babel-preset-env プラグインを使用できます。これにより、現在のノードのバージョンが自動的に検出され、ノードの構文のみがトランスコードされます。ノードはサポートしていませんが、これは非常に便利です

babel demo -d dist

.babelrc

npm install --save-dev babel-preset-env

1.js

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

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

コンパイル後

babel 1.js -o dist.js

は、現在のノードバージョン（8.9.3）がサポートしているため、クラスとconstがトランスコードされていないことがわかりますこの構文

実際のプロジェクトで ES6 構文を使用するにはKoa2 では、非同期構文をサポートするために Node v7.6.0 以降が必要です。同時に、Koa2 で import モジュラー記述メソッドも使用したいと考えています

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

npm install --save-dev babel-register

Create。新しいフォルダー app

util.js

npm install koa --save

app.js

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

ファイルを直接起動すると必ずエラーが発生します

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

トランスコードするにはエントリーファイルが必要です

index.js

node app

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

アクセスhttp://localhost:3000/ でページが表示されます。

babel-register はリアルタイムでトランスコードするので、実際に公開するときは、最初にアプリフォルダー全体をトランスコードする必要があります

node index

今回は、dist 配下の app.js を起動するだけです

babel app -d dist

上記は、私が皆さんのためにコンパイルしたものです。将来的には誰にとっても役立つことを願っています。

関連記事:

JS配列の要素を削除する方法

jsのPromiseに関する知識ポイントを詳しく紹介

jQueryのniceScrollスクロールバーの位置ずれ問題を解決する方法

JSでBaidu検索インターフェースを実装する方法

以上がNode で ES6 構文を使用する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。