如何修复javascript错误导致jQuery无法在IE中正确加载？

Question

I'm debugging a problem that's recently affected our build and broke compatibility with Internet Explorer browsers. We haven't changed our JavaScript codebase in months, but after a recent deployment, it seems jQuery's "$" stopped working in IE, breaking the page completely for that browser. Most function calls on "$" return some form of "Object doesn't support property or method 'x'", and it seems that the "$" variable was assigned the wrong object in most cases.

jQuery's issue is just the most latent symptom, if I go around poking jQuery's "$" out of every error I come across, I eventually find similar issues with other variables. But again, our codebase hasn't changed, only our build date.

I've tried looking for the easy stuff, like missing semi-colons or similar errors. And I read on some other threads that another issue could be conflicting element id's on the page, but that doesn't seem to be the case either. I've tried reverting the codebase back to a couple of months ago, and also no joy. I've considered infrastructure and network, but it happens on client machines and development machines, both inside and out of our internal net.

The last thing that makes sense to me, since it stopped working around last Friday, is some update to one of the dependencies, as maybe when the deployment happened a dependency got updated and changed the final artifact on the build. My hunch says that it's maybe Babel, but I don't know how I can confirm it, since I'm not familiar enough with Bower or the way Angular builds to prove it.

My working theory is that maybe Babel updated or something else caused the build to break recently (maybe babel-helper-evaluate-path?), since my research seems to point to that being a compiler for JavaScript so that it runs similarly on multiple platforms.

 "devDependencies": {
    "babel-core": "6.26.3",
    "babel-helper-evaluate-path": "^0.5.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-minify": "^0.5.0",
    "browser-sync": "^2.11.0",
    "del": "^1.2.0",
    "es6-promise": "^3.1.2",
    "express": "^4.13.4",
    "gulp": "^3.8.10",
    "gulp-angular-htmlify": "^0.4.0",
    "gulp-angular-templatecache": "^1.7.0",
    "gulp-babel": "7.0.1",
    "gulp-changed": "^1.1.0",
    "gulp-compass": "2.0.4",
    "gulp-concat": "^2.4.1",
    "gulp-css-flip": "^0.4.0",
    "gulp-cssnano": "^2.1.0",
    "gulp-expect-file": "0.0.7",
    "gulp-filter": "^2.0.2",
    "gulp-html-prettify": "0.0.1",
    "gulp-if": "^1.2.5",
    "gulp-ignore": "^1.2.1",
    "gulp-inject": "^1.3.1",
    "gulp-jshint": "^1.11.0",
    "gulp-jsvalidate": "^2.0.0",
    "gulp-less": "^1.3.9",
    "gulp-livereload": "^2.1.1",
    "gulp-load-plugins": "^0.10.0",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-rename": "^1.2.0",
    "gulp-rtlcss": "^0.1.4",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-sync": "^0.1.4",
    "gulp-uglify": "1.5.1",
    "gulp-util": "^3.0.1",
    "jshint-stylish": "^2.0.0",
    "less": "^1.7.5",
    "lodash": "^4.6.1",
    "lodash._basecreate": "^3.0.3",
    "lodash.isobject": "^3.0.2",
    "marked": "^0.3.2",
    "phantomjs-prebuilt": "^2.1.4",
    "rimraf": "2.2.8",
    "through2": "^0.6.3",
    "yargs": "^3.7.2"
  },

The initial error shows up on this line:

    var now = $.now(),
        promise;

Where the call to "$.now()" is broken as there isn't a jQuery reference inside of "$" on an IE runtime.

Answer 1

Take a look at your polyfills.ts and uncomment accordingly starting from here:

    /**************** BROWSER POLYFILLS*****************/

/** IE9, IE10 and IE11 requires all of the following polyfills. **/