Babel-polyfillに関する知識

5550 ワード

@babel/polyfillを使って、互換性の問題を心配することなく、任意のes 2015+の環境でコードを作成することができます.グローバル変数に原生に似た方法を追加します.でもwebpackは今まで配置がとても複雑で、webpack 4が0配置を始めたばかりです.プロジェクトの中でwebpackの構成が必要ならば、ctrl+c ctrl+vであるかもしれません.更新が間に合わなかったら、polyfillに対して誤解があります.例えば、プロジェクトの中にはbabel-plugin-transform-runtimebabel-polyfillが同時に現れます.この文章はbabel-polyfillに関する問題を解いていきます.
polyfillとcore-js
  • は、簡単に言えばbabel-polyfillpolyfillとを含んでいます.
  • 、babel 7.4.0から@babel/polyfillを直接core-jsregenerator-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-envuseBuiltIns: "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などのブラウザがあるということです.