ES6文法を処理バベルを用いWebpack_（第III）_

使用バベル処理ES6の構文（1）

そして、私たちはES6文法を書くように、プロジェクトにバベルのWebPACK組み合わせる方法
index.jsの構文ES6の一部を書き込みます

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
]
arr.map(item => {
  console.log(item)
})

実行してnpx webpackパッケージ化
して実行する理由npx webpackはなく、WebPACKの-devのサーバーで構成されnpm run startて
したいので、見にnpx webpackあなたがそうするのWebPACK-devのサーブパッケージを使用する場合、生成されたファイルは、内部のメモリにパッケージ化されて生成されたmain.jsファイルをパッケージ化する
オープンメイン.jsファイルのコードは、

この時間は、いくつかの問題が存在しますので、コードは実際に、SRCコードそのまま梱包うちの下のSRCディレクトリの下に生成されたコンテンツindex.jsをパッケージ化され、最後にmain.jsに。このコードは？ブラウザで正しくそれを実行することはできません
実行npm run startの外観ES6業績

コンソールが理由である約束のオブジェクトを、プリントアウトすることができます。、IEブラウザの低いバージョンの、特にいくつかの、時間を使ってChromeブラウザは、コンテンツ仕様ES6の多くはできるように、ChromeブラウザでES6文法を書き、達成するために行っているが、あなたはそれにIEブラウザを開いた場合生成されたコード、ブラウザはES6ための構文をサポートしていません、それはエラーになりますを実行するこれらのパッケージはまた、main.jsブラウザため、国内、プログラムの実行がエラーになるなど、一部のブラウザ、。
私たちはES6のsrcディレクトリに書き込みコードにに行く場合に実行されているすべてのブラウザが問題になることはありませんので、WebPACKのは、ES5のコードにコードをES6ます。
この機能を実現するために、我々はバベルによって実現することができます。
バベルは、私たちがWebPACKのでバベルを使用し、構文ES5にES6構文を変換することができます。
実行npm install -D babel-loader @babel/core、インストールバベル・ローダーとバベル/コア（バベルのコアライブラリ）
の増加でルールにWebPACKの-config.jsの中の設定項目を行います

  module: {
    rules: [
      {
        test: /\.js/,
        exclude: /node_modules/, exclude的含义是如果js文件在node_modules中，那么就不使用babel-loader
        loader: 'babel-loader'
      }
    ]
   }

検出されたファイルがjsのであれば、意味解析を行うためにバベル・ローダーを使用しています。
それでもインストールする必要がありnpm install @babel/preset-env -D
、実際には、可愛いローダーJSファイルの処理を使用して、バベル・ローダーだけのWebPACKとコミュニケーションの橋を作るバベルときので、およびWebPACKのバベルGETを通してそれを使用した後、プリセット-ENVは、このモジュールをインストールする理由が、実際のバベル・ローダーは、私たちはES5はまた、完全な文法翻訳、プリセット-ENVモジュールにいくつかの他のモジュールの助けを必要とする構文にES6構文でJSに変換するためには役立ちません。この役割を果たしている、プリセット-ENVモジュールが含ま文法ES5のルールにすべてES6は
、いくつかの設定を行う必要があり、プリセット-ENVをインストールし
、あなたがローダーにパラメータのオプションを設定することができたときにローダーを使用します

      {
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']  将这个包名放在presets中就可以了
        }
      },

これまでのところ、設定が完了し
、実行npx webpack、生成されたmain.jsを表示

後、ES6文法構文はES5のが翻訳されてなった見つけ、constのはVARなり、機能を矢印たとえば、これを行うのに十分な光の正常な機能になりますが、ではありません、ブラウザの低いバージョンでmapメソッドの内部アレイを含め、この新しい構文変数を約束するが、翻訳をしながら、実際には存在しないが、翻訳だけでなく、その後、いくつかのオブジェクトや関数やブラウザのいくつかの低バージョンの一部のみかどうか、それはプリセットのenv翻訳文法を使用する必要がないだけで、またバージョンのブラウザを下げるために不足している変数や関数を補完する必要があり、どのように追加する
ポリフィルのバベルを使用して
--save @バベル/ポリフィルインストールNPMインストール
インストール以上のコードの導入が行くように実行される直前に、それを使用する方法をエンドimport '@babel.polybill'コンテンツ十分の不足を補うために
するためにimport '@babel.polybill'、ファイルをindex.jsそれに頭を入れて
、コードが現在はほぼ完了した後、および@バベル/ポリフィル完全なパッケージの使用main.jsは、偉大なコンテンツの多くは、余分なポリフィルが存在していないブラウザの低いバージョンを追加しようとしているだろう。我々はmain.jsにパッケージ化構文に無用見てする必要がない場合は、例えば、今だけの約束とマップ・メソッドは、どのようにそれを構成するために必要と
プリセット-ENVに新しい引数を追加します

      {
        test: /\.js/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [['@babel/preset-env', {
            useBuiltIns: 'usage'
          }]]
        }
      },

useBuiltIns: 'usage'ページがブラウザのいくつかの低バージョンを追加するときポリフィルパディングとして平均行うと決定するビジネスコードに基づいており、必ずしもすべての機能がに追加された機能が、存在しないかもしれません。必要に応じて追加しました。
パッケージよりもはるかに小さいすべてこのパッケージ完成main.js、あなたはまた、低いバージョンで実行することができます

使用バベル処理ES6文法（2）

バベルのプリセットはまた、いくつかの追加のパラメータを設定することができ
、このようなターゲットプロパティとして

        options: {
          presets: [['@babel/preset-env', {
            targets: {
              edge: '17',
              firefox: '60',
              chrome: '67',
              safari: '11.1',
            },
            useBuiltIns: 'usage'
          }]]
        }

バージョンで実行されますプロジェクトを生成したパッケージが67以上であることを意味し、ES6を行うことが必要であるかどうかに応じて、ES5のES6構文文法になろうとして結合バベル/ポリフィル存在-ENVを使用するプロセスにおけるバベルパッケージES5の変換、約束および機能地図でこのプロジェクトについてのこだわりES6のサポートは、実際には、この操作を行うには必要ES6はES5を回していないChromeブラウザの以上の67のバージョンを、注入する必要があるかどうか、この設定後パッケージ化されてくる、プロジェクトがはるかに小さくなります

サードパーティライブラリとモジュールの開発場合、又はバベル/ポリフィルそれがマップに注入し、そのような機能を約束されているため、この解決策は、問題がある、それはグローバル変数の形態であるのに使用されるコンポーネントのライブラリを開発します注入は、この場合にはそう、パッケージ化ライブラリやライブラリのUIコンポーネント、index.jsに導入さポリフィルを除去するように構成方法の必要性を地球環境を汚染します。
インストールはnpm install @babel/plugin-transform-runtime -D
また、インストールnpm install -save @babel/runtime
の増加構成のプラグインに対応するローダバベルを

        options: {
          // presets: [['@babel/preset-env', {
          //   targets: {
          //     edge: '17',
          //     firefox: '60',
          //     chrome: '67',
          //     safari: '11.1',
          //   },
          //   useBuiltIns: 'usage'
          // }]]
          plugins: [['@babel/plugin-transform-runtime', {
            corejs: 2,
            helpers: true,
            regenerator: true,
            useESModules: false
          }]]
        }

あなたが設定している場合corejs: 2,ので、追加のインストールを必要とするnpm install --save @babel/runtime-corejs2プロジェクトの実行再パッケージ化、
corejs: 2それが設定されていない場合は、パッケージ化されていないこのパッケージにコードのmain.jsに行くときに、ページが約束とマップ・メソッドを存在しない場合に効果があります入ってくる
の和まで、唯一の書き込みビジネスコードへの場合は、コンフィギュレーション、index.jsバベル/ポリフィルの導入ができますが、その後にのみ書き込みがライブラリプロジェクトのコードであれば、バベル/プラグインを使用する必要があり、は、configureのプリセットに必要-transformランタイムプラグインが、このプラグインの利点は、あなたが効果的にプリセットの問題を防ぐことができるということです、またはポリフィルの質問は、ポリフィルはプラグインが・変換・ランタイムは、注射に閉鎖、またはヘルプの形態であろう、グローバルを汚染するということですライブラリ内の書き込み時にグローバルな環境汚染の概念は、地球環境を汚染しないので、存在していないので、コンテンツの導入に対応する成分は、それがよりよい解決策です。

設定項目を対応するバベルは、我々はのconfigureバベル関連コンテンツへの注意を払っている場合、あなたはコンテンツのオプションは、この問題を解決する方法を、非常に多くのかもしれ見つける、非常に多くのだろうか？
私たちは、.babelrcプロジェクトのルートディレクトリにファイルを作成することができ、ファイルの主題に出ているオプション
ファイルで.babelrc

{
  "plugins": [["@babel/plugin-transform-runtime", {
    "corejs": 2,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
  }]]
}

設定オプションは、バベルのwebpack.config.js設定の項目を削除することができます

これらは、多くの場合、バベルを使用二つの構成されています