babel-preset-envがやってくれないこと
基本的にbabel-preset-envが変換してくれるのは文法だけなので、ターゲットブラウザに存在しない新しいクラスやメソッドについては何もしてくれません。例えばPromise とか Array.of とか。そういうものを使いたいときは2通りの方法があります。
はい、タイトルで出落ちしてますね。
babel-polyfill
その名の通り、ポリフィルです。とりあえずこれを
import しておけば、ターゲットブラウザに足りないクラスやメソッドを補完してくれます。実は、
babel-preset-env のオプションに useBuiltIns: true を指定しておくと、ターゲットブラウザがネイティブ対応していない機能だけ個別に import してくれます。これを指定しない場合はとりあえず全部
import →ネイティブ対応していない機能だけポリフィる みたいな処理をするので、不要なファイルが含まれてしまいます。欠点としては、
importしないとダメなので、ソースコードに変更が必要- 冪等でないので、間違えて複数回
importすると死ぬる - ソース内で使っていないクラスやメソッドも問答無用でポリフィる
babel-plugin-transform-runtime
クラスやメソッドを使っている場所でインラインで別のコードに変換するので、正確にはポリフィルではありません。なので、ソース内で使っていないければ一切影響はありません。
また、これはプラグインなので、babelの
plugins オプションに指定しておけばソースコードを1行も変える必要はなく、複数回 import してしまう心配もありません。ただし、
- 使っている場所でその都度変換するので、多数の場所で使っていればコードが無駄に大きくなる
- ネイティブ対応していようがいまいが問答無用で変換するので非効率
あれ、あれれ…？
やってほしいこと
カンのいい人なら気づいたとおもいますが、この2つのいいとこ取りをした機能がほしいんです。具体的には、例えば
Promise に関して言うと、- ターゲットブラウザが
Promiseがネイティブで実装されていなくて - コード内で
Promiseを使っている場合のみ
useBuiltIns: true + babel-polyfillは前者は満たすけど後者は満たさない（ネイティブ実装されていなければ、使っていようが使っていまいが埋め込む）babel-plugin-transform-runtimeは前者は満たさないけど後者は満たす（ネイティブ実装されていようがいまいが、使っているところだけ埋め込む）
という、とても中途半端な状態なのです…
いろいろ調べたけどそういう機能はなさげでした。残念…
いつか実装されることを信じて！
0 件のコメント:
コメントを投稿