Babel-polyfillに関する知識

5550 ワード
javascript
@babel/polyfillを使って、互換性の問題を心配することなく、任意のes 2015+の環境でコードを作成することができます.グローバル変数に原生に似た方法を追加します.でもwebpackは今まで配置がとても複雑で、webpack 4が0配置を始めたばかりです.プロジェクトの中でwebpackの構成が必要ならば、ctrl+c ctrl+vであるかもしれません.更新が間に合わなかったら、polyfillに対して誤解があります.例えば、プロジェクトの中にはbabel-plugin-transform-runtimeとbabel-polyfillが同時に現れます.この文章はbabel-polyfillに関する問題を解いていきます.
polyfillとcore-js
  • は、簡単に言えばbabel-polyfillとpolyfillとを含んでいます.
  • 、babel 7.4.0から@babel/polyfillを直接core-jsとregenerator-runtimeを導入するように変更しました.
    As of Babel 7.4.0、this package has Deprecated in favor of directly including cored-js/stable(to polyfill ECMAScrapt feature)and regenerannator-runtime/runtime(need to use transpiled funcer):
    import "core-js/stable";
import "regenerator-runtime/runtime";
    • polyfillとpreset-envcore-jsでは、次の2つの属性に注目する必要があります.
    tagets
    targettsは、polyfillがどのような方法を導入するかを設定することができます.regenerator-runtimeに内蔵されたjsonファイルがあります.フィルタリングに必要なpolyfillをユーザに設定する方法があります.
    // corejs2-built-ins.json
    {
    "es6.array.copy-within": {
        "chrome": "45",
        "edge": "12",
        "firefox": "32",
        "safari": "9",
        "node": "4",
        "ios": "9",
        "samsung": "5",
        "opera": "32",
        "electron": "0.35"
      },
      "es6.array.every": {
        "chrome": "5",
        "opera": "10.10",
        "edge": "12",
        "firefox": "2",
        "safari": "3.1",
        "node": "0.10",
        "ie": "9",
        "android": "4",
        "ios": "6",
        "phantom": "2",
        "samsung": "2.1",
        "electron": "1.1"
      },
    ……
    }

//              
{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}
    use BuiiltIns
    use BuiiltInsは2つの特に有用な属性を持ち、usageとentryは、2つの属性を使用して、直接preset-envを参照して対応するパケットである.
  • entryの使い方:プロジェクトのpreset-env persetsのoptionsにcore-jsを使って、tagetsオプションに協力して、importの最低バージョンだけが必要な方法のスペーサー
    • を使用します.
  • usageの使い方:import "@babel/polyfill"; use BuiiltIns:「usage」useBuiltIns: "entry" import「core-js/modules/s 6.streg.includes」だけが必要です.
    //demo
// index.js
console.log("test123".includes("test"));
// webpack.config.js
use: {
    loader: "babel-loader",
    options: {
        presets: [
            [
                "@babel/preset-env",
                {
                    targets: {
                        chrome: "58",
                        ie: "11"
                    },
                    useBuiltIns: "usage"
                }
            ]
        ]
    }
}
  • includiesはie 11では互換性がないので、包装結果:
  • はpersets options を使用しないで、包装した後にファイル_900余りbytesは1 kb未満です.低バージョンのブラウザは互換できません.
  • は ， includes +@babel/preset-envを使用して、Babelはincludes方法を使用していることを認識し、polyfillに加入する方法は「's 6.string.includes's」、「es.array.includies'」があり、包装後のファイルは6.56 kb
    • である.
  • はpreset-env＋useBuiltIns: "usage"を使用し、手動import preset-env(useBuitIns webpackを使用すると、マニュアルimpolyfillは必要ないと提案されています.もしユーザがimportを検出したら、useBuitIns選択entry属性を提示します.)、polyfillの数十の方法、つまり、targsの構成に従って、すべてのpolyfillをパッケージ化する必要があります.包装後のファイルは76.7 kb
    • です.
    {
  'es6.array.copy-within',
  'es6.array.fill',
  'es6.array.find',
  'es6.array.find-index',
  'es7.array.flat-map',
  'es6.array.from',
  'es7.array.includes',
  ……
}
  • babel-loader+useBuiltIns: "entry"だけを使用して、ファイルサイズは86.3 kb
    • です.
  • そのため、プロジェクト自体に互換性が要求されている場合は、Babel-loaderを使って対応しています.よくあるarray.fromもpolyfillをします.prest-env+useBuiiltInsを必要としています.新しい文法をロードしますが、バッグの大きさを心配する必要はありません.手動でもないです.
  • は、babel-presete-envの公式文書で@babel/polyfillまたはexperimentの状態を見ることができますが、vue-cliのソースでは、デフォルトのパッケージ化されたappのpresetsの構成を見ることができます.use BultitInsは@babel/preset-envですので、安心して使うことができます.
  • 注意が必要なのは、TC39 stage 4の提案ではない場合は、やはり自分で手動で@babel/polyfillを設定してください.usageは他のstageのシンタクス
    • を導入してくれません.
    polyfillとplugin-tranform-runtime
  • もし長い時間webpackを使ったことがあるならば、きっとusageのこのプラグインに対してよく知らないことはできなくて、みんなはすべて互換性の環境の作用をすることがいて、甚だしきに至っては一部のプロジェクトはまた同時にusageと/vue-cli/packages/@vue/babel-preset-app/index.jsを使うことを見て、このような方法はbabel-pluginが出る前に一定の道理があるようです.
  • 実際にpreset-envの変換は非侵入的です.つまり、Arayのプロトタイプにぶら下がっているincludes方法はbabel-plugin-transform-runtime
    • しか使えません.
  • babel-polyfillの使用シーンはライブラリであるべきです.変換が必要な方法があれば、別の名前が付けられます.そうでないと、ライブラリの業務コードに直接影響を与えます.通常のプロジェクトはbabel-plugin-transform-runtimeを使えばいいです.
    • polyfill.io
  • presets-env+実際の圧縮はすでに大部分の体積のpolyfillを最適化することができましたが、いくつかの最新のブラウザバージョンにとっては、どのpolyfillも資源を浪費しています.
  • この時polyfill.ioはこの問題を解決することができます.polyfill.ioは、サービス側でレンダリングされた方法で要求からuseragentの情報を取得し、対応するpolyfillを返す.しかし、ブラウザのバージョンが多すぎて、国内にはカバーがついている360/qqなどのブラウザがあるということです.
    • Virtual Boxでホストと仮想マシンと仮想マシンの間の相互通信構成