ECMAScript 6概要
2525 ワード
今日から、阮一峰先生の『ECMAScript 6入門』を拝見します.自分で計画を立てて、毎日の章を固定することを求めません.
1.ECMAScriptとJavaScriptの関係
ECMAScriptとJavaScriptの関係は前者が後者の規格であり、後者が前者の実現(他のECMAScript方言にはJscriptとアクションScriptがあります)です.日常の場面では、この2つの単語は交換できます.
2.ES 6とECMAScript 2015の関係
ECMAScript 2015(ES 2015と略称する)ES 6は歴史名詞であり、一般的には5.1版以降のJavaScriptの次世代基準を意味し、ES 2015、ES 2016、ES 2017などをカバーしているが、ES 2015は正式名称であり、特にこの年に発表された正式バージョンの言語基準を指す.ES 6といえばES 2015の標準を指すが、「次世代JavaScript言語」を指す場合もある.
3.配置の進捗
各ブラウザの最新バージョンは、ES 6に対するサポートでカングクス.githb.io/s 5-compt-table/es 6を見ることができます.時間が経つにつれて、サポート度が高くなり、90%を超えるES 6文法特性が実現されました.
4.Babelトランスコーダ
Babelは、広く使われているES 6トランスコーダであり、ES 6コードをES 5コードに変換して、既存の環境で実行することができる.これはES 6でプログラムを作成することができますし、既存の環境がサポートされているかどうかを心配する必要はありません.次は一例です.
Babelのプロファイルは
コマンドライントランスコードBabel-cli
Babelは、コマンドラインのトランスコードのためにBabel-cliツールを提供します.
babel-registerモジュールはrequireコマンドを書き換えて、フックを付けます.その後、requireローディング.js、.jsx、.esと.s 6の拡張子のファイルを使うたびに、まずBabelでトランスコードします.
1.ECMAScriptとJavaScriptの関係
ECMAScriptとJavaScriptの関係は前者が後者の規格であり、後者が前者の実現(他のECMAScript方言にはJscriptとアクションScriptがあります)です.日常の場面では、この2つの単語は交換できます.
2.ES 6とECMAScript 2015の関係
ECMAScript 2015(ES 2015と略称する)ES 6は歴史名詞であり、一般的には5.1版以降のJavaScriptの次世代基準を意味し、ES 2015、ES 2016、ES 2017などをカバーしているが、ES 2015は正式名称であり、特にこの年に発表された正式バージョンの言語基準を指す.ES 6といえばES 2015の標準を指すが、「次世代JavaScript言語」を指す場合もある.
3.配置の進捗
各ブラウザの最新バージョンは、ES 6に対するサポートでカングクス.githb.io/s 5-compt-table/es 6を見ることができます.時間が経つにつれて、サポート度が高くなり、90%を超えるES 6文法特性が実現されました.
4.Babelトランスコーダ
Babelは、広く使われているES 6トランスコーダであり、ES 6コードをES 5コードに変換して、既存の環境で実行することができる.これはES 6でプログラムを作成することができますし、既存の環境がサポートされているかどうかを心配する必要はありません.次は一例です.
//
input.map(item => item + 1);
//
input.map(function (item) {
return item + 1;
});
プロファイル.babelrcBabelのプロファイルは
.babelrc
で、プロジェクトのルートディレクトリの下に保存されています.Babelを使用する第一歩は、このファイルを配置することです.このファイルはトランスコード規則とプラグインを設定します.基本的なフォーマットは以下の通りです.{
"presets": [],
"plugins": []
}
presets
フィールドはトランスコード規則を設定し、必要に応じて以下の規則セットを提供します.#
$ npm install --save-dev babel-preset-latest
# react
$ npm install --save-dev babel-preset-react
# ( 4 ),
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
そして、これらのルールをバーベルに加えます.{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}
まずnpm initを使ってpackage.jsonファイルを作成します.以下のBabelツールとモジュールの使用は全部書いてください.Babelrc.コマンドライントランスコードBabel-cli
Babelは、コマンドラインのトランスコードのためにBabel-cliツールを提供します.
$ npm install --global babel-cli
使い方#
$ babel example.js
#
# --out-file -o
$ babel example.js --out-file compiled.js
#
$ babel example.js -o compiled.js
#
# --out-dir -d
$ babel src --out-dir lib
#
$ babel src -d lib
# -s source map
$ babel src -d lib -s
バベル-registerbabel-registerモジュールはrequireコマンドを書き換えて、フックを付けます.その後、requireローディング.js、.jsx、.esと.s 6の拡張子のファイルを使うたびに、まずBabelでトランスコードします.
$ npm install --save-dev babel-register
使う時は、まずバベル-registerをロードしなければなりません.require("babel-register")
require("