Babel-polyfillに関する知識
5550 ワード
@babel/polyfillを使って、互換性の問題を心配することなく、任意のes 2015+の環境でコードを作成することができます.グローバル変数に原生に似た方法を追加します.でもwebpackは今まで配置がとても複雑で、webpack 4が0配置を始めたばかりです.プロジェクトの中でwebpackの構成が必要ならば、ctrl+c ctrl+vであるかもしれません.更新が間に合わなかったら、polyfillに対して誤解があります.例えば、プロジェクトの中には
polyfillとcore-jsは、簡単に言えば 、babel 7.4.0から@babel/polyfillを直接
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): polyfillとpreset-env
tagets
targettsは、polyfillがどのような方法を導入するかを設定することができます.
use BuiiltInsは2つの特に有用な属性を持ち、usageとentryは、2つの属性を使用して、直接 entryの使い方:プロジェクトの を使用します. usageの使い方: includiesはie 11では互換性がないので、包装結果: は は である.は です. babel-loader+ です.そのため、プロジェクト自体に互換性が要求されている場合は、Babel-loaderを使って対応しています.よくあるarray.fromもpolyfillをします.prest-env+useBuiiltInsを必要としています.新しい文法をロードしますが、バッグの大きさを心配する必要はありません.手動でもないです.
は、babel-presete-envの公式文書で 注意が必要なのは、TC39 stage 4の提案ではない場合は、やはり自分で手動で を導入してくれません.
polyfillとplugin-tranform-runtimeもし長い時間webpackを使ったことがあるならば、きっと 実際に しか使えません. polyfill.io presets-env+実際の圧縮はすでに大部分の体積のpolyfillを最適化することができましたが、いくつかの最新のブラウザバージョンにとっては、どのpolyfillも資源を浪費しています. この時polyfill.ioはこの問題を解決することができます.polyfill.ioは、サービス側でレンダリングされた方法で要求からuseragentの情報を取得し、対応するpolyfillを返す.しかし、ブラウザのバージョンが多すぎて、国内にはカバーがついている360/qqなどのブラウザがあるということです.
babel-plugin-transform-runtime
とbabel-polyfill
が同時に現れます.この文章はbabel-polyfill
に関する問題を解いていきます.polyfillとcore-js
babel-polyfill
と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";
core-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 BuiiltInsuse BuiiltInsは2つの特に有用な属性を持ち、usageとentryは、2つの属性を使用して、直接
preset-env
を参照して対応するパケットである.preset-env
persetsのoptionsにcore-js
を使って、tagetsオプションに協力して、importの最低バージョンだけが必要な方法のスペーサー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"
}
]
]
}
}
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',
……
}
useBuiltIns: "entry"
だけを使用して、ファイルサイズは86.3 kb @babel/polyfill
またはexperimentの状態を見ることができますが、vue-cliのソースでは、デフォルトのパッケージ化されたappのpresetsの構成を見ることができます.use BultitInsは@babel/preset-env
ですので、安心して使うことができます.@babel/polyfill
を設定してください.usage
は他のstageのシンタクスpolyfillとplugin-tranform-runtime
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
を使えばいいです.