webpack4に乗り換えたら、IE11が動かなくなった話

7470 ワード
es6 フロントエンド jQuery webpack JavaScript JavaScript テキストリンク

去年、webpack4が出ましたね

新しいもの好きな僕は、まんまとwebpack４に乗り換えました

僕のフロントの開発環境

  • webpack4でjsのみをバンドル
  • scssやejs等はgulpでコンパイル
  • 画像等もgulpで最適化
  • ライブラリは主にjQueryを使用

それぞれのバージョンは下記

"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"gulp": "^3.9.1",
"babel-core": "^6.26.0",

jQuery v3.3.1

あれIE動かねぇ

オワタ＼(^^)／

やったこと

まずpolyfillを追加

require('babel-polyfill');

→変わらず構文エラー

productionモードでコンパイル

npx webpack --production

→変わらず構文エラー

オワタ＼(^^)／

原因

原因は、多分jQueryの関数の中でes6を書いたことっぽいです。

例１）
ページロード時にメインのクラスを読み込む

import UIController from './UI/Controller.es6';
$(window).on('load',e=>{
 new UIController();
})

例２）
あるクラスの要素に繰り返し処理をする

$('.hoge').each((i,e)=>{
 $(e).text(i);
})

これらがうまくコンパイルされてねぇ。。。。

対策

僕がとった対策は下記です。

  • webpack4で一旦productionモードでコンパイル
  • gulpのgulp-babelでさらに、コンパイルされたjsコードをさらにコンパイル

→動いた！！

gulpの設定


const gulp = require('gulp');
const babel = require('gulp-babel');
var config = require('../config').js;
const uglify = require('gulp-uglify');
var saveLicense = require('uglify-save-license');
gulp.task('babel', () =>{
  return  gulp.src(config.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify({output: {comments: saveLicense}}))
        .pipe(gulp.dest(config.dest))
});

package.json

"scripts": {
 "release": "npm-run-all -s release:*",
 "release:webpack":"webpack --production",
 "release:gulp":"gulp babel"
}

同じように詰まってる人の解決になれば幸いです＾＾

Cシリーズ:multiple markers at this lineのerrorについて
Javaでthreadクラスを継承することとRunnableインタフェースを実現することの違い