gulp-angular構成でIE11でハマった。


 ま た I E か 

Angular1系のコードをes6で書いて、gulp-concatで連結、gulp-babelでes5に戻し、gulp-uglifyでミニファイするって感じの構成ですが、IE11のみ全く動かない(DOMが描画されない)問題が発生してハマりました。

gulpのタスク構成はこんな感じ

var gulp = require('gulp');
var concat = require('gulp-concat');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');

gulp.task('build', function () {
    gulp.src('./**/*.js')
        .pipe(concat('bundle.min.js'))
        .pipe(babel())
        .pipe(uglify())
        .pipe(gulp.src('./dist'))
});

「angularjs ie11」あたりでググってみるとstackoverflowで似たような問題が

http://stackoverflow.com/questions/27351713/angular-js-not-working-in-ie-11
http://stackoverflow.com/questions/12957625/angularjs-controllers-and-use-strict/12966954#12966954

どうやら、babelでES5に落としたときに付加される”use strict”文がIE11だけ他のブラウザと挙動が違うらしく、angularのモジュールの読み込みに失敗するらしい。

「babel use strict」でググって
http://stackoverflow.com/questions/33821312/how-to-remove-global-use-strict-added-by-babel

によれば、

gulp.task('build', function () {
    gulp.src('./**/*.js')
        .pipe(concat('bundle.min.js'))
        .pipe(babel({
            blacklist:["useStrict"]
         }))
        .pipe(uglify())
        .pipe(gulp.src('./dist'))
});

と書けばよいらしい?

てなわけで試したらIE11でも動くようになりました。

前職はだいたいいらんことするのはIE8でしたが、たまに「IE9だけ発生する不具合」「IE10だけ発生する不具合」ってのがあってバグフィックスの難易度はこっちのほうが高かった気がします。

今回はIE11だけ発生していて、IE9とかだと平気な顔して動いてました。厄介なことにIE11、まだ公式サポートが残っているんですよね。。。

今後はIE11が今までのIE8みたいな扱われ方をされるようになるんでしょうか。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です