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

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

アプレットが es6 を es5 に変換する理由

理由: ブラウザの互換性と、node.js のためアプリケーションをスムーズに実行できる環(huán)境です。

JS の新しい仕様として、ES6 には多くの新しい構(gòu)文と API が追加されています。ただし、最新のブラウザーは ES6 の新機(jī)能を十分にサポートしていないため、新しいES6 の機(jī)能はブラウザで直接使用できますが、機(jī)能は他のツールを使用して実裝する必要があります。 ES6 コードを ES5 コードに変換するには、

プロジェクトに Babel ツールをインストールして構(gòu)成するだけです。

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

#ミニ プログラムで es6 を es5 に変換##0.10.101000 以降のバージョンの開発ツールでは、 will Babel は、開発者の ES6 構(gòu)文コードを 3 つの端末すべてで十分にサポートされる ES5 コードに変換するためにデフォルトで使用され、開発者がさまざまな環(huán)境によって引き起こされる開発上の問題を解決するのに役立ちます。

プロジェクトでは、ES6 to ES5 オプションをチェックするだけです

次の點(diǎn)に注意してください:

コード品質(zhì)を向上させるため、ES6 変換機(jī)能をオンにすると、デフォルトで javasctipt strict モードが有効になります?！竨se strict」を參照してください。バベルとは何ですか？

#Babel は、ES6 コードを ES5 コードに変換できる ES6 トランスコーダで、元々 ES6 をサポートしていない古いブラウザでも ES6 コードを?qū)g行できます

,例: ES6 アロー関數(shù) コード例:

//?轉(zhuǎn)碼前：使用了ES6箭頭函數(shù)
items.map(item?=>?item?+?1);

//?轉(zhuǎn)碼后：轉(zhuǎn)為了普通函數(shù)
items.map(function?(item)?{
??return?item?+?1;
});

es6 を es5 に変換するには?

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

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

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

$?npm?install?-D?babel-cli

2. ES6 コードを準(zhǔn)備します

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

//?src/example.js

class?Hello?{

??static?world()?{

????console.log('Hello,?World!');

??}

}

Hello.world();

3. Babel の設(shè)定

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

$?npm?install?-D?babel-preset-env

また、設(shè)定ファイルも必要です。プロジェクトのルート ディレクトリにファイルを作成します:

.babelrc.

の內(nèi)容は次のとおりです:

このファイルはトランスコーディング ルールとプラグインを設(shè)定するために使用され、基本的な形式は次のとおりです。

//?.babelrc

{

??"presets":?[],

??"plugins":?[]

}

.babelrc. を正常に保存できるように、.babelrc. の前後にドットがあることに注意してください。

#presets フィールドpresets フィールドでは、トランスコーディング ルールを設(shè)定します。次の公式ルール セットが提供されており、必要に応じてインストールできます。

最新のトランスコーディング ルール

$?npm?install?--save-dev?@babel/preset-env

反応トランスコーディング ルール

$?npm?install?--save-dev?@babel/preset-react

次に、これらのルールを追加します。

コード例:

??{

????"presets":?[

??????"@babel/env",

??????"@babel/preset-react"

????],

????"plugins":?[]

??}

以下のすべての Babel ツールとモジュールを使用する前に、最初に .babelrc を記述する必要があることに注意してください。

コマンド ライン トランスコーディングとトランスコーディング ルール

Babel は、コマンド ライン トランスコーディング用のコマンド ライン ツール @babel/cli を提供します。

インストールコマンドは以下の通りです。

$?npm?install?--save-dev?@babel/cli

基本的な使い方は以下の通りです。

#?轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$?babel?test.js
?
#?轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
#?--out-file?或?-o?參數(shù)指定輸出文件
$?babel?a.js?--out-file?b.js
#?或者
$?babel?a.js?-o?b.js
?
#?整個(gè)目錄轉(zhuǎn)碼
#?--out-dir?或?-d?參數(shù)指定輸出目錄
$?babel?src?--out-dir?lib
#?或者
$?babel?src?-d?lib
?
#?-s?參數(shù)生成source?map文件
$?babel?src?-d?lib?-s

babel-node コマンドを使用して REPL 環(huán)境のトランスコーディングを取得します

@babel/node モジュールの babel-node コマンドは、ES6 をサポートする REPL 環(huán)境を提供します。 Node の REPL 環(huán)境のすべての機(jī)能をサポートし、ES6 コードを直接実行できます。

まず、このモジュールをインストールします。

$?npm?install?--save-dev?@babel/node

次に、babel-node を?qū)g行して REPL 環(huán)境に入ります。

@babel/register module

$?npx?balel-node

@babel/register module は、require コマンドを書き換えてフックを追加します。それ以降、require を使用して .js、.jsx、.es、および .es6 サフィックスを持つファイルをロードするたびに、ファイルは最初に Babel でトランスコードされます。

$?npm?install?--save-dev?@babel/register

使用時(shí)，必須首先加載@babel/register。

//?index.js

require('@babel/register');

require('./es6.js');

然后，就不需要手動(dòng)對(duì)index.js轉(zhuǎn)碼了。

$?node?index.js

需要注意的是，@babel/register只會(huì)對(duì)require命令加載的文件轉(zhuǎn)碼，而不會(huì)對(duì)當(dāng)前文件轉(zhuǎn)碼。另外，由于它是實(shí)時(shí)轉(zhuǎn)碼，所以只適合在開發(fā)環(huán)境使用。

瀏覽器環(huán)境

Babel 也可以用于瀏覽器環(huán)境，使用@babel/standalone模塊提供的瀏覽器版本，將其插入網(wǎng)頁。

<script></script>

<script>

// Your ES6 code

</script>

注意，網(wǎng)頁實(shí)時(shí)將 ES6 代碼轉(zhuǎn)為 ES5，對(duì)性能會(huì)有影響。生產(chǎn)環(huán)境需要加載已經(jīng)轉(zhuǎn)碼完成的腳本。

【推薦學(xué)習(xí)：javascript視頻教程】

以上がミニ プログラムで es6 を es5 に変換する必要があるのはなぜですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。