設(shè)定方法: 1. import メソッドを使用して ES6 コードをパッケージ化された js コード ファイルに配置します; 2. npm ツールを使用して babel-loader ツールをインストールします (構(gòu)文は「npm install -D babel」です) -loader @babel/ core @babel/preset-env"; 3. babel ツールの設(shè)定ファイル「.babelrc」を作成し、トランスコーディング ルールを設(shè)定します。 4. webpack.config.js ファイルでパッケージ化ルールを設(shè)定します。

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

邪悪な IE は、何千年もの間、依然として穴を埋める必要があります。

• IE の標(biāo)準(zhǔn)は、html/css および CSS の標(biāo)準(zhǔn)とは程遠(yuǎn)いです。解決すべき互換性の問題の大部分は IE の非互換性を解決することです 現(xiàn)在普及している ES6 の文法と仕様は IE の考慮を放棄し、デフォルトで IE の扱いを放棄していますが、IE の互換性は依然として維持されています問題！ IEの使用率は市場(chǎng)の1％にも満たないにもかかわらず。
• 快適な ES6 仕様を使用していますが、頭痛がある場(chǎng)合はどうすればよいですか? Webpack は非常に強(qiáng)力なパッケージ変換機(jī)能を開発しました: ES5 に変換!

任意の ES6 コードを使用してください

• let ステートメントを記述してトラバースするだけです:

console.log("webpack?1");
let?date?=?["hello",?"world",?"this",?"is",?"es6",?"code"];

((theDate)?=>?{
????theDate.forEach(item?=>?console.log(item));
})(date)

これは Chrome ブラウザでの結(jié)果です

これは Firefox ブラウザでの結(jié)果です:

これは ie11 ブラウザの結(jié)果です:

まったく予想外ではありません。スピンしてみましょう。

• ここでは、最初に import メソッドを使用して ES6 コードをパッケージ化された js コード ファイルに移動(dòng)する変更を加えます:
  元のindex.js:

console.log("webpack?1");
let?fun?=?()?=>?{
????let?date?=?["hello",?"world",?"this",?"is",?"es6",?"code"];
????date.forEach(item?=>?console.log(item));
}
//fun()?//結(jié)果依然剛才一樣
export?default?fun;//es6導(dǎo)出函數(shù)，es6模塊化知識(shí)

@babel/core が見つかりません 問題

• パッケージ化には以前にインストールされたプラグインまたはツールキットが必要です:

npm?install?babel-core?babel-loader?babel-preset-es2015?--save-dev
#因?yàn)槭情_發(fā)測(cè)試環(huán)境，就加了dev，各自根據(jù)需要更改保存參數(shù)

• 問題ありませんバージョンの互換性の問題により、babel-loader の最新バージョン 8.x では babel-core の読み取りが変更されているため、対応する一致するバージョンをインストールする必要があります:

#webpack?4.x?|?babel-loader?8.x?|?babel?7.x?最新版本
npm?install?-D?babel-loader?@babel/core?@babel/preset-env
#webpack?4.x?|?babel-loader?7.x?|?babel?6.x?版本
npm?install?-D?babel-loader@7?babel-core?babel-preset-env?webpack

• Iここで使用します。バージョンは 7.x です:

• babel ツールの構(gòu)成ファイルを作成します: .babelrc、setトランスコーディング ルール

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

• webpack.config.js 設(shè)定パッケージ化ルール:

module:?{
????rules:?[{
????????test:?/\.js$/,
????????use:?'babel-loader',
????????exclude:?/node_modules/
????}]
}

• webpack の実行、test.html の生成

• #ブラウザ効果:

# で正常に実行されました。 # #パッケージ化された変換された es5 がどのようなものかを見てみましょう

es6 から es5 への変換はここで終了です。

【関連する推奨事項(xiàng):

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

以上がWebpack はどのように es6 モジュールを es5 モジュールに変換しますか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。