Babelはes6をes5に変換できますか

はい、変換方法: 1. プロジェクトのルート ディレクトリで「npm install -g babel-cli --save-dev」コマンドを実行して Babel をプロジェクトにインストールし、Babel 設定ファイルを保存します。 babelrc" プロジェクトのルート ディレクトリで、トランスコーディング ルールを設定します。 2. gulp と gulp-babel をプロジェクトにインストールし、"gulpfile.js" ファイルを設定します。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript 6&&babel バージョン 6、Dell G3 コンピューター。

私たちはまだ ES5 に夢中ですが、ES6 がリリースされてから数年が経ちました。時代は進み、WEBフロントエンドの技術も日々変化しており、今こそ変革の時が来ています。

ECMAScript 6 (ES6) は非常に急速に開発されていますが、最新のブラウザは ES6 の新機能を十分にサポートしていないため、ES6 の新機能をブラウザで直接使用したい場合は、次のことを行う必要があります。他のツールを使用して満たします。
Babel は広く使用されているトランスコーダで、Babel は ES6 コードを ES5 コードに完全に変換できるため、ブラウザのサポートを待たずにプロジェクトで ES6 の機能を使用できます。

babel 6 と以前のバージョンの違い:

以前のバージョンでは babel をインストールするだけで済み、以前のバージョンには多くの機能が含まれています。不要なものを大量にダウンロードすることになります。しかし、babel 6 では、babel は babel-cli と babel-core の 2 つのパッケージに分割されています。 CLI (ターミナルまたは REPL) で babel を使用する場合は babel-cli をダウンロードし、ノードで使用する場合は babel-core をダウンロードします。 Babel 6 は可能な限りモジュール化されており、Babel 6 以前の方法で ES6 を変換すると、そのまま出力され、プラグインをインストールする必要があるため変換されません。アロー関数を使用したい場合は、アロー関数プラグイン npm install babel-plugin-transform-es2015-arrow-functions をインストールする必要があります。

この記事では、ES6 の構文機能については説明しませんが、ES6 コードを ES5 コードにトランスコードする方法に焦点を当てます。

Babel トランスコーディング:

ES6 に触れたことがない場合、次のコードを見たときは、次のコードを参照する必要があります。少し混乱します (これは一体何ですか? 1 万の幻獣が私の心の中で駆け抜けています) が、正しく読んでいただければ、これが ES6 です。見えても見えなくても、それはここにあります。

var a = (msg) => () => msg;
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

実際、上記のコードが Babel によって変換されると、次のようになります。

"use strict";
 
var a = function a(msg) {
  return function () {
    return msg;
  };
};
 
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
 
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

さて、本題に戻りましょう。上記のトランスコーディング効果を実現する方法をいくつか試してみましょう。

1. Babel を直接インストールする方法:

1.1) まず、Babel をグローバルにインストールします。

$ npm install -g babel-cli
 
//也可以通过直接将Babel安装到项目中，在项目根目录下执行下面命令，同时它会自动在package.json文件中的devDependencies中加入babel-cli
//在执行安装到项目中命令之前，要先在项目根目录下新建一个package.json文件。
$ npm install -g babel-cli --save-dev

babel をプロジェクトに直接インストールすると、babel-cli が package.json ファイルの devDependency に自動的に追加されます。以下に示すように:

	//......
	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2"
	  }
	}

1.2) Babel の設定ファイルは .babelrc で、プロジェクトのルート ディレクトリに保存されます。 Babel を使用する最初のステップは、このファイルを構成することです。

このファイルの完全なファイル名は「.babelrc」です。先頭に「.」が付いていることに注意してください。私のコンピュータは Windows システムなので、このファイルを作成すると、常に「ファイル名を入力する必要があります。」というエラーが表示されます。後でググってみたら、このファイルを作成するときにファイル名を「.babelrc.」に変更したところ、前後にドットがあるので無事保存できました。 1.3) プリセット フィールドでトランスコーディング ルールを設定します。次のルール セットが公式に提供されており、必要に応じてインストールできます。

ここをクリックして、Babel 中国語公式 Web サイトのプリセット設定ページに移動します:

Babel Plugins

	{
	  "presets": [],
	  "plugins": []
	}

1.4) 公式 Web サイトのプロンプトに従って、これらのプラグをインストールすると、 npm を使用するツールでは、これらのルールを .babelrc に追加する必要があります。以下に示すように:

	# ES2015转码规则
	$ npm install --save-dev babel-preset-es2015

	# react转码规则
	$ npm install --save-dev babel-preset-react

	# ES7不同阶段语法提案的转码规则（共有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

1.5) トランスコーディングとトランスコーディング ルール:

	{
	    "presets": [
	      "es2015",
	      "react",
	      "stage-2"
	    ],
	    "plugins": []
	  }

2. ツールの設定方法:

実際には、ES6 のトランスコーディング設定を行っています。これは、一般的な grunt、gulp、Webpack、Node などの多くのフロントエンド自動化ツールを通じて実現できます。以下では、私がよく知っている gulp 設定方法について簡単に説明します。

ここをクリックして、Babel 中国語公式 Web サイトに移動します。ツール設定ページ: Babel Tool

2.1) まず、プロジェクトに gulp をインストールする必要があります:

	# 转码结果输出到标准输出
	$ babel test.js

	# 转码结果写入一个文件
	# --out-file 或 -o 参数指定输出文件
	$ babel a.js --out-file b.js
	# 或者
	$ babel a.js -o b.js

	# 整个目录转码
	# --out-dir 或 -d 参数指定输出目录
	$ babel src --out-dir lib
	# 或者
	$ babel src -d lib

	# -s 参数生成source map文件
	$ babel src -d lib -s

2.2)次に、プロジェクトに gulp-babel をインストールする必要があります:

	$ npm install gulp --save-dev

上記 2 つのコマンドを実行すると、ルート ディレクトリの package.json ファイルの内容が自動的に次のように変更されていることがわかります:

	$ npm install --save-dev gulp-babel

2.3) gulpfile.js ファイルを書き込みます。ファイルの内容は次のとおりです:

	{
	  "devDependencies": {
	    "babel-cli": "^6.22.2",
	    "gulp": "^3.9.1",
	    "gulp-babel": "^6.1.2"
	  }
	}

現在のプロジェクト ディレクトリで次のコマンドを実行すると、元の src に a.js が見つかります。フォルダー (ES6 標準に従って作成された) ファイルは ES5 標準の a.js にトランスコードされ、lib フォルダーに配置されます。

	var gulp = require("gulp");
	var babel = require("gulp-babel");

	gulp.task("default", function () {
	  return gulp.src("src/a.js")
	    .pipe(babel())
	    .pipe(gulp.dest("lib"));
	});

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、プログラミング ビデオ ]

以上がBabelはes6をes5に変換できますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。