webpack+bableでIE11が動かない!?

相変わらず最近JS書いているのですが、慣れ親しんだ(?)classとか使いたくて書き方を変えようとしました。

で、いろいろGoogle先生に教えてもらったところ、どうやらモダンブラウザでないとclassとは使えないっつー話。

IEよ、やはりオマエか

まぁ、環境的にも時代的にもIEはムシしても良さげだったのだけれども、後になってゴチャゴチャゴニョゴニョIE問題発生も困るので、webpack+babelでトランスパイルしてIEでも問題ないようにしておこうかと。

で、webpack.config.jsでbabelを読み込んで、npm run dev してみたら・・・構文エラー

開発者ツールで見たら、アロー関数がエラー原因。

(()=>{ ... })();

なにそれ?ムカつく〜babelちゃんと仕事しろよ!どうすんだよこれ・・・と半狂乱になりかけたけれども、いつものように親切な人がいて助かった!

https://qiita.com/yuto-ono/items/19ca9cd03225b5d88a1c

まさに自分のところもこれでした。webpack.config.jsで

module.exports = {

  mode: "development",
 
  entry: ["./assets/js/index.js"],
 
  output: {
    filename: "app.js",
    path: path.join(__dirname, 'htdocs/js'),
    environment: {
      arrowFunction: false //<--- これでアロー関数を無効化
 
 
    }
},
.
.
.

めでたくIEでもエラー無く実行可能になりました!

WordPressやMT、PHPなどのコーディングが仕事の中年おじさんです。 趣味でバンド(ギター&ボーカル)もやっていて、海外ドラマ(特にSFモノ)が大好きです。 いろいろまとめておくためにブログを立ち上げまっす!MASU!。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA