Retty Advent Calendar 2019 13日目の記事です。
昨日は渡邉さんの記事で、「BigQueryだけで統計的因果推論を行いたかった」でした。
qiita.com
はじめに
今年の10月に入社した渡辺です。
前職ではバックエンドエンジニアとして PHP を使用して開発しておりました。
Retty ではチームで仕事に取り組むため、チーム内で議論・調整した結果バックエンドエンジニアがフロントの修正をすることもあります。
今回は、配属初日に Babel と向き合ったことをお話いたします。
Babel や webpack について理解が不十分なところがございます。
誤った内容がある場合はご指摘ください。
IE 11で画像が表示されない
環境
babel-core:v6.26.3
webpack: v4.29.0
node_modules/whatwg-url の URLSearchParams で、分割代入しているためエラーが発生してました。
そこで、whatwg-url をバベってくださいというのがタスクの内容でした。
IE 11での分割代入 (Destructuring assignment) 構文の対応状況(2019/12/8時点)
これまで、フロントエンドについてはあまり触れることはなかったので、バベる？？ Babel ？？ webpack ？？といった状態でした。 なので、先ず Babel 、 webpack について調べることから始めました。
Babel について
Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
Babel は JavaScript のコンパイラ(トランスコンパイラ)です。
主に ES2015(ES6) で以降の新しい構文を ES5 の古い構文に変換するために使用します。
webpack について
JavaScript や CSS などの静的モジュールバンドラーです。
参考：webpack
モジュールをまとめる前に、 babel-loader で Babel を読み込みトランスコンパイルすることができます。
試したこと１
webpack.config.js の exclude オプションを変更して、 node_modules の whatwg_url と tr46 をバベる
https://qiita.com/yassh/items/b939f76f6a6442ebeb26 の記事を参考に以下のように whatwg_url と tr46 をバベるように設定しました。
exclude: {
include: /node_modules/,
exclude: [/node_modules\/whatwg-url\//, /node_modules\/tr46\//],
},
▷結果
コンソールエラーは変わらず、画像が表示されないままでした。
また、以下のように記述し直しましたが結果は変わらなかったため、方針を変えることにいたしました。
module: {
rules: [
{
test: /\.js$/,
use: [{ loader: 'babel-loader' }],
exclude: /node_modules/,
},
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [['env', { targets: { ie: '11' } }]],
},
},
],
include: [
/node_modules\/data-urls\/.*/,
/node_modules\/jsdom\/.*/,
/node_modules\/whatwg-url\/.*/,
/node_modules\/tr46\/.*/,
/node_modules\/webidl-conversions\/.*/,
],
},
],
},
試したこと２
url-search-params-polyfill、universal-url を import する
babel-polyfill はインストール済みで root の js ファイルで import されております。
それぞれ npm installして import します。
root の js ファイルで import します。
import 'url-search-params-polyfill';
whatwg_url を universal-url に変更します。
import { URLSearchParams } from 'universal-url';
▷結果
コンソールエラーが消えて画像が正しく表示されました 🎉
解決方法
最終的にurl-search-params-polyfill、universal-url を import して解決いたしました。
ここで使用した polyfill とは、機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。
まとめ
これまでフロントエンドにあまり触れていなかったため、わからないところが多く解決まで時間がかかってしまいました。今回は Babel が6系だったので上記の方法で解決いたしましたが、 Babel の最新バージョン7.7.0では babel/polyfill の設定方法が大きく変わっております。バベる際は Babel のバージョンを必ず確認してください。今後もフロントエンドに携わっていくので引き続きインプットしていこうと思います。
