Webpack はどのように es6 モジュールを es5 モジュールに変換しますか?

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

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

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

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

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

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

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

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

これは Chrome ブラウザでの結果です

これは Firefox ブラウザでの結果です:

これは ie11 ブラウザの結果です:

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

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

console.log("webpack 1");
let fun = () => {
    let date = ["hello", "world", "this", "is", "es6", "code"];
    date.forEach(item => console.log(item));
}
//fun() //结果依然刚才一样
export default fun;//es6导出函数，es6模块化知识

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

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

npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因为是开发测试环境，就加了dev，各自根据需要更改保存参数

• 問題ありませんバージョンの互換性の問題により、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 ツールの構成ファイルを作成します: .babelrc、setトランスコーディング ルール

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

• webpack.config.js 設定パッケージ化ルール:

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

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

• #ブラウザ効果:

Chrome

IE

コードは IE

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

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

【関連する推奨事項:

JavaScript ビデオ チュートリアル

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

以上がWebpack はどのように es6 モジュールを es5 モジュールに変換しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。