ES6 トランスコーディングに gulp を使用する
ECMAScript 6.0 (略称 ES6) は JavaScript 言語の次世代標準であり、2015 年 6 月に正式にリリースされました。理想と追求を持った新世代のプログラマーとして、当然、このような良いものを手放すわけにはいきません。
しかし、ES6 の互換性の問題は誰にとっても頭痛の種です。幸いなことに、gulp の忠実なファンとして、ES6 トランスコーダのようなものを使用して、からの変換を簡単かつ迅速に実装するにはどうすればよいでしょうか。 ES6 から ES5 へのトランスコーディング:
1. まず、gulp-babel プラグインと babel-preset-es2015 ルール セットをダウンロードする必要があります:
コマンド ライン コード
npm install --save-dev gulp-babel babel- preset-es2015
2 .次に、gulpfile.js ファイルの作成を開始します。
Js コード
var gulp = require('gulp');
var babel = require('gulp-babel'); var config={
es6file:'src/js/test.js',
es5file:'dist/js/'
};
gulp.task('es6', function () {
return gulp .src(config.es6file )
.pipe(babel({
)
.pipe(gulp.dest(config.es5file));}); gulp.task('デフォルト', function () { gulp.watch(config.es6file, ['es6']); 3. 最後に、gulp コマンドを入力してタスク監視を開始します: コマンド ライン コード gulp 4.次に、次の ES6 コードを src/js/test.js ファイルに記述して保存し、テストが成功したかどうかを確認します。 a="likeke"; arr.map(item=>item+1); dist/js/test.js ファイルを開くと、変換が成功したことがわかります コード: JS コード "厳密な使用"; /** * 16-9-28 に likeke によって作成されました。 */ var a = [1, 6, 8, 3]; (関数 (アイテム) { アイテムを返す + 1; });

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











ES6 では、配列オブジェクトの reverse() メソッドを使用して、配列の反転を実現できます。このメソッドは、配列内の要素の順序を逆にして、最後の要素を最初に、最初の要素を最後に配置するために使用されます。構文「array」 。逆行する()"。 reverse() メソッドは元の配列を変更します。変更したくない場合は、拡張演算子 "..." とともに使用する必要があり、構文は "[...array].reverse() 」。

非同期はes7です。 async と await は ES7 に新しく追加されたもので、非同期操作のソリューションです。async/await は co モジュールとジェネレーター関数の糖衣構文と言え、より明確なセマンティクスで JS 非同期コードを解決します。名前が示すように、async は「非同期」を意味します。async は関数が非同期であることを宣言するために使用されます。async と await の間には厳密な規則があります。両方を互いに分離することはできず、await は async 関数内でのみ記述できます。

手順: 1. 構文 "newA=new Set(a); newB=new Set(b);" を使用して、2 つの配列をそれぞれセット型に変換します; 2. has() と filter() を使用して差分セットを検索します、構文 " new Set([...newA].filter(x =>!newB.has(x)))" では、差分セット要素がセット コレクションに含まれて返されます。 3. 配列を使用します。 from セットを配列に変換するタイプ、構文は「Array.from(collection)」です。

ブラウザの互換性のため。 ES6 は JS の新しい仕様として、多くの新しい構文と API を追加していますが、最新のブラウザーは ES6 の新機能を高度にサポートしていないため、ES6 コードを ES5 コードに変換する必要があります。 WeChat Web 開発者ツールでは、デフォルトで babel が使用され、開発者の ES6 構文コードを 3 つの端末すべてで適切にサポートされる ES5 コードに変換し、開発者がさまざまな環境によって引き起こされる開発上の問題を解決できるようにします。プロジェクト内でのみ設定して確認するだけです。 「ES6~ES5」オプション。

いいえ、require は CommonJS 仕様のモジュール構文であり、es6 仕様のモジュール構文は import です。 require は実行時にロードされ、import はコンパイル時にロードされます。require はコード内のどこにでも記述できます。import はファイルの先頭にのみ記述でき、条件文や関数スコープでは使用できません。モジュール属性は導入されるだけです。 require を実行した場合、そのためパフォーマンスは比較的低くなりますが、インポート コンパイル中に導入されたモジュールのプロパティのパフォーマンスはわずかに高くなります。

es6 では、一時的なデッド ゾーンは構文エラーであり、ブロックを閉じたスコープにする let および const コマンドを指します。コード ブロック内では、let/const コマンドを使用して変数が宣言される前に、変数は使用できず、変数が宣言される前は変数の「デッド ゾーン」に属します。これは構文上「一時デッド ゾーン」と呼ばれます。 ES6 では、一時的なデッド ゾーンや let ステートメントや const ステートメントでは変数のプロモーションが発生しないことを規定しています。これは主に実行時エラーを減らし、変数が宣言される前に使用されて予期しない動作が発生するのを防ぐためです。

地図は注文済みです。 ES6 のマップ タイプは、多くのキーと値のペアを格納する順序付きリストです。キー名と対応する値はすべてのデータ型をサポートします。キー名の等価性は、「Objext.is()」メソッドを呼び出すことによって決定されます。 , したがって、数字の 5 と文字列「5」は 2 つのタイプとして判断され、プログラム内で 2 つの独立したキーとして現れることができます。

es2015はes6です。 es の正式名称は「ECMAScript」で、ECMA-262 標準に従って実装されたユニバーサルスクリプト言語です。2015 年 6 月に正式にリリースされたバージョンは、正式には ECMAScript2015 (ES2015) と呼ばれます。ECMAScript の 6 番目のバージョンであるため、 es6 と呼ばれます。
