シーンの違いを利用して、@バベル/プリセット-envおよび@バベル/プラグイン・変換・ランタイムと

場所は、非常にめまいとなっているがある場合バベルを使用する前に `@バベル/プリセットenv` and` @バベル/プラグイン・変換・runtime`転送構文への能力を持っている、とオンデマンド` polyfill`を達成することができ、しかし、インターネットはより明確な答えを見つける、試してみましたroullpのこの時間を利用してみてください。私たちは何もしない場合は、バベルへの書き込みパラメータと設定はありません、そんなに力はないバベルすることはできません、それは何もしません行います、各プリセットプラグインの柔軟な組み合わせが、有効からこそ、魅力に満ちバベルせ、奇跡最初の@バベル/プリセット-ENV ## @バベル/プリセット-ENVをたち、これは非常に一般的に使用されるプリセットされ、ほぼすべてのチュートリアルとフレームワークのあなたがそれを設定できるようになる、それは事前バベル `プリセット-ES20 **`シリーズを置き換えるように見えますが、あなたは、もはや互換性のある複雑な構成を持っていません。各提案は新しいものを追加しますか？愚かな。それによって、私たちはすべてを持っている、とすることができます！それは我々が必要とするオンデマンドロードポリフィルを行うことができます。それはとても魔法です。あなたが設定されていない場合は場合はしかし、今、それは、それは次のように最初の試みからのサポートを持つ関数は、 `index.js`を作成する最初百聞は一見にしかずどんなにそうではない、ので、自動ではありません非常に単純な `` `JS機能試験（）{新プロミス（）}テスト（）constはARR = [1,2,3,4] .MAP（項目=>アイテム・アイテム）にconsole.log（ARR）` `` {「プリセット」：[[「@バベル/プリセット-ENV」]]を}その後、私たちは私たちがちょうどJS `defaultをリストに追加言う、` .babelrc`ファイルのルートディレクトリにヘルプを作成した `` `そしてI我々は、HTTPS :! //img2018.cnblogs（[2019-12-03-21-00-52]出力の結果を見て（ここで私はroullupを使用）、それを詰め。COM /ブログ/ 1397109/201912 / 1397109-20191204004433070-847521735.png）我々はそれが、このいくつかのことを行うために私たちを助けてバベルていることがわかります。1.変換は2 CONST varが奇妙になっ機能を矢印、なぜ私たちにバベルを助けません変換マップは？また、これらの特性の約束はああああ〜、私たちの目標のブラウザは、ないは変換を感じないバベル、そしてケースではありませんではありません、我々はことをしてみてください.browserslistrc追加がES6されています上。のは、ルートディレクトリに `.browserslistrc`を作成してみましょう！[2019-12-03-21-06-54]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004433295-1734007870.png ）良いです。今度は再び梱包させません。！[2019-12-03-21-07-43]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004433466-1461016989.png）ねえ、何の効果も。ちょうどああとして持ちます。問題は、ターゲットブラウザの設定がバベルはこのことを行うことができないではありません。デフォルト@バベル/プリセット-ENVは構文のみを転送するので、つまり、我々は矢印の機能、constのカテゴリを参照してください。あなたは組み込みオブジェクト、さらに方法、インスタンスメソッドを変換する必要がある場合は、少し設定を行うには、あなたを必要とする、ポリフィルを開始し、重要なパラメータ「useBuiltIns」がある、と彼は@バベル/プリセット-ENVの使用を制御しています輸入ポリフィルコアに役立つ私たちは、それがある限り、これは輸入エントリー方法です###項目を、選択可能な3つの値を持って書かれたパッケージ構成ファイルのエントリまたはエントリで、我々 `輸入「コア-JS」など ポリフィル必要性を導入するためにあなたのターゲットブラウザ（browserslist）の現在の構成に基づいて、私たちのために `このようなコードのA列、バベルの意志。機能テスト（）{新プロミス（）}テスト（）constは、したがって、我々はindex.jsファイルは `コアjs``` JS // SRC / index.js移入 "コアJS" を追加してみてくださいfollows` `JS {[ "プリセット" として構成ARR = [1,2,3,4] .MAP（項目=>アイテム・アイテム）にconsole.log（ARR）`バベル：[[「@バベル/プリセット-env「{」useBuiltIns 『：』エントリ「}]]} `` `現在の.browserslistrcファイル（クロームがより直感的な、シンプルを発揮するには、ここでターゲットブラウザを変更する）、我々はそれがより多くの互換性のあるバージョンのクロム50で頼みます（現在の最新バージョン78） `` `jsのクローム> 50`` `どのようにパッケージした後、それができますか？！[2019-12-03-21-46-14]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004440472-1487849830.png）テロリストの苦境ああ、 `の私達の塗りつぶしをバベル輸入「コア-jsが」 `大型輸入の賛成でポリフィルを交換し、そして私が使用していなかった事柄のいくつかです。私たちの目標は、私のブラウザ、それを高めることでしたか？また、そんなにインポートされますか？この時点で、我々は、ターゲットブラウザがはるかに少ないポリフィル明らかにパッケージを導入した後に比較的近い最新バージョン（現在の最新バージョン78）75 `` `テキスト// .browserslistrcクローム> 75`` `今のところにある調整します。！[2019-12-03-21-51-46]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004440902-500428601.png）だけでなく、我々は使用しませんでした。これは、エントリの値、@バベル/プリセット-ENVブラウザはあなたがいない必要があるかどうか、useBuiltInsの導入の入り口にターゲットセットに従いますときポリフィルが必要な場合は、上記確認されました。そこで、我々は、エントリが比較的広いカバレッジエリアである=利点のuseBuiltInsを知ることができ、すべてのセットが分類されますが、欠点は、より多くのポリフィルの多くを使用していなかった大きな袋の上に出て再生され、また、グローバル###のuseageを汚染しますこれはより多くの魔法で、ときuseBuiltIns = useage、当然のことながら、ターゲットブラウザ（browserslist）とポリフィルに参加するために必要な特性に使用されるコードを参照する使用useBuiltIns = useageなり、また、他のパラメータcorejsのバージョン番号を記入する必要があります>コア-jsの2つのバージョン、2または3をサポートし、多くの新機能は以下のような、内部に2ないに追加されました：フラット、および最新の方法ので、こののないバージョン2はありません、それはあなたがこの時間を使用することをお勧めします3 `.babelrc``` JS { "プリセット"：[[ "@バベル/プリセット-ENV"、{ "useBuiltIns"： "使用"、 "corejs"：3}]]} `` `この時間インデックス.js `JS機能試験（）{新プロミス（）}テスト（）constはARR = [1,2,3,4] .MAP（項目=>アイテム*アイテム）CONST hasNumber =（NUM）=> [ 4、5、6、7、8] .INCLUDES（NUM）はconsole.log（ARR）はconsole.log（hasNumber（2）） `` ``テキストの場合.browserslistrc>最終10％。1つのIEバージョンありません<= 8後の `` `梱包:! [2019-12-03-22-59-03]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004441553-334131430.png）素敵な、十分な魔法私たちは本当にすべてのボリュームが小さい、このように一緒にパッケージされているが、我々は、サードパーティの翻訳パッケージなしで、ケースをnode_modules /ディレクトリを除外した場合、それは、サードパーティ製のパッケージ内に検出することができないいくつかの新機能「hello'.includes（」H「）この構文は、我々はバグ###偽の最後に残ったuseBuiltIns = falseを発生します。この時間は、それはこの値の使用を導入しない、デフォルトである、単純ですポリフィルこのように## @バベル/ランタイムヘルパー関数は互換性の特性を達成するのに役立ちます、そしてプラグインサンドボックス@バベル/プラグイン・変換・ランタイムを使用するだけでなく、世界的な環境汚染を防止するためのガスケット道に、共通のヘルパーを引き抜きます@バベル/ランタイムコアで冗長コードを保存するために、機能、実装 リユース@バベル/ランタイム@バベル/プラグイン・変換・ランタイムプラグインもcorejsパラメータを入力する必要がありますしているより良いと@バベル/プラグイン・変換・ランタイムは>バージョン2は責任家政婦、組み込みオブジェクトをサポートしていますが、バベル7.4以降はありませんされて0.01の後に、@バベル/ランタイム-corejs3で、我々は安全にcorejsを使用することができます。[[ "@バベル/プリセット-ENV "]]、" プラグイン "：[[" @バベル/プラグイン変換ランタイム " {現在.babelrc `JS {" プリセット" をサポートする三対を作る方法の例"corejs"：3}]]} `` ``現在のJSが機能index.jsテスト（）{新新しいプロミス（）}テスト（）constはARR = [1,2,3,4] .MAP（項目=>項目*アイテム）CONST hasNumber =（NUM）=> [4、5、6、7、8] .INCLUDES（NUM）はconsole.log（ARR）はconsole.log（hasNumber（2）） `` `パッケージング後次のように:! [2019-12-04-00-01-39]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004449158-550004880.png）私たちは、@バベル/ plugin-の使用を参照してくださいコード実行時の変換および@バベル/プリセット-ENV前にコンパイルコンパイルの結果はかなり異なっている、それは、ヘルパー関数を使用し、多重化を実現するために、公共の別名抽出法を与えられました。このよう代わりに新しい約束の_Promise、これ### useageと@バベル/ランタイムuseageと@バベル/ランタイムの何が起こるかと上記一緒に使用して、同時に2つの方法でグローバルオブジェクト##の作成を避けるようにスマートケースとそれを比較、重複ポリフィル>を導入しません PNG）### useage状況にエントリーし、@バベル/ランタイムは後に、次の入力モード、異なる@バベル/ランタイム・プロセスだけでなく、様々な機能もパッケージ化ボリューム冷酷につながるポリフィルの数を、導入に役立ちます増加>個人的な分析： `入力モードの入り口に遭遇した輸入「コア-jsから」`とすぐに現在のターゲットブラウザに必要なすべてのポリフィルを置き換え、それだけで@バベル/ランタイムとしない紛争ので、現在index.js：問題のコードの重複が生じるが導入されるので、次のように第二の選挙を実現することができる2つ、一緒に使用されていない `JS「がコアJS」を新機能試験（）{インポートプロミス（）}テスト（）constはARR = [1,2,3,4] .MAP（項目=>アイテム*アイテム）CONST hasNumber =（NUM）=> [4、5、6、7、8] .INCLUDES （NUM）CONST hasNumber2 =（NUM）=> [4、5、6、7、8、9] .I​​NCLUDES（NUM）はconsole.log（ARR）はconsole.log（hasNumber（2））はconsole.log（hasNumber2（ 3））は、現在の `` .babelrc` JS { "プリセット" の：[[ "@バベル/プリセット-ENV"、{ "useBuiltIns"： "エントリ"}]]、 "プラグイン"：[[「@babel /プラグイン・変換・ランタイム「{」corej S「：3}]]} ``電流。browserslistrcのターゲットバージョン（パッケージはクロムに変更された後のファイルの行の数を減らし、ラインの意味を理解するために） `` `テキストクローム> 70`` `パックされた結果:! [2019-12-04-00-32- 40]（https://img2018.cnblogs.com/blog/1397109/201912/1397109-20191204004504635-997113291.png）##サマリー作成1. @バベル/プリセット-ENVポリフィルuseBuiltInsは、種々のパラメータに応じての利点を達成していますカバレッジがすべて（エントリー）を比較、欠点があり、すべてのビジネスのプロジェクトに適用範囲のグローバル推奨*エントリを汚染しますが、パッケージのボリュームが自然に大なり、* useageはポリフィルの導入を要求することができ、パッケージのボリュームは小さいですが、無視され、パッケージた場合第三者が？バベル7.4後の輝きを発生翻訳されていない場合は、互換性の問題が2 @バベル/ランタイムパッケージは、使用corejsは3も実装が内蔵されたオブジェクトの様々なサポート、および@バベル/プラグインtransform-に依存しているnode_modules過度注入する重複機能の問題を避けるためにサンドボックスとコードの再利用ガスケットのランタイム機能は、この方法の利点は、グローバルな環境汚染、1以上で使用するためのライブラリの開発、2ではありません いずれかを選択する方法は、意味がありません使用は、それはまた、ポリフィルファイルの重複をもたらすことができます