es6 を es5 に変換する理由

理由: ブラウザーの互換性と、node.js 環境でアプリケーションをスムーズに実行するためです。 JS の新しい仕様として、ES6 には多くの新しい構文と API が追加されていますが、最新のブラウザーは ES6 の新機能を高度にサポートしていないため、ES6 コードを ES5 コードに変換する必要があります。インストールする必要があるのは、プロジェクトで Babel ツールを設定するだけです。

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

なぜ es6 を es5 に変換するのでしょうか?

簡単な答えは、ブラウザーの互換性と、node.js 環境でのアプリケーションのスムーズな実行です。

ES6 では、JS の新しい仕様として、多くの新しい構文と API が追加されていますが、市販のすべてのブラウザが互換性があるわけではないため、ES6 の構文コードを ES5 のコードに変換する必要があります。

最新のブラウザは ES6 の新機能を十分にサポートしていないため、ES6 の新機能をブラウザで直接使用したい場合は、他のツールを使用する必要があります。

node.js 環境では、node の ES6 サポートが批判されており、モジュール モードが導入されたのはバージョン 13 以降です (package.json に "type": "module" という文を追加)ただし、一部のライブラリは依然として ES6 構文をサポートしていません。したがって、node.js プログラムが ES6 構文を認識しない場合は、Babel を使用してトランスコードしてください。これにより、問題が解決される可能性があります。

es6 を es5 に変換するにはどうすればよいですか?

babel を使用して es6 を es5 に変換します。

以下に、翻訳プロセス全体を理解できるように、コマンド ラインで Babel を使用するプロセスを書き留めます。

1. Babel のコマンド ライン ツールをプロジェクトにインストールします

npm install -D babel-cli

2. ES6 コードを準備します

通常はソースを使用しますコードは src ディレクトリに配置されます。既製の ES6 コードがない場合は、src ディレクトリにコードを作成します:

// src/example.js
class Hello {
  static world() {
    console.log('Hello, World!');
  }
}
Hello.world();

3. Babel の設定

Babelはい、プラグインとプリセットを介してコードをトランスパイルします (ES6 以外のものもトランスパイルできます)。 ES6 を ES5 に変換するには、env のデフォルト値を設定してこのプラグインをインストールするだけです:

npm install -D babel-preset-env

また、設定ファイルも必要です。プロジェクトのルート ディレクトリにファイルを作成します: .babelrc内容は次のとおりです:

// .babelrc
{
  "presets": ["env"]
}

4. npm コマンドの作成

この手順は以前に構成されているため不要で、コマンドを直接実行できます。

babel src -d build

これにより、src ディレクトリ内の Javascript コードが ES5 に変換され、build ディレクトリに保存されます。

従来は、npm コマンドの中にドアツードアのコマンドを入れていました。プロジェクトの package.json に、次の内容を入力します:

"scripts": {
  "build": "babel src -d build",
},

したがって、次のコマンドを使用して ES6 コードを翻訳できます:

npm run build

[関連する推奨事項: javascript ビデオ チュートリアル 、ウェブフロントエンド]

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