How to use browser.js to solve es6 class issue in IE 11

Question

I am using javascript classes and ran into the SCRIPT1002 issue in IE 11, where IE is unable to interpret the 'class' keyword that is available in es6. I have been reading that using babel is a way to work around this unfortunate issue. However, I am having issues understanding how to properly do this. below is my code. What do I need to add to allow IE 11 to properly interpret a js class?

header including babel.js (browser.js is being loaded properly)

<!-- babel -->
<script type="text/babel" src="<?php echo  $GLOBALS["COMMON_ROOT"]; ?>/scripts/babel-5.8.29/browser.js"></script>

class in javascript file casuing the SCRIPT 1002 error

class assessmentAnswer {
    constructor(answerID, questionID, answerText, imagePath) {
      this._answerID = answerID;
      this._questionID = questionID;
      this._answerText = answerText;
      this._imagePath = imagePath;
    }

    getAnswerID(){
        return this._answerID;
    }

    getQuestionID(){
        return this._questionID;
    }

    getAnswerText(){
        return this._answerText;
    }

    getImagePath(){
        return this._imagePath;
    }

    getAll(){
        return this.getAnswerID()+","+this.getQuestionID()+","+this.getAnswerText()+","+this.getImagePath();
    }
}

This code runs fine in Firefox.

Why not just use a prototype? That's all the class syntax does anyway — evolutionxbox, Oct 11 '16 at 22:58
Are you setting `type="text/babel"` on your scripts that you want to run Babel on? — Frxstrem, Oct 11 '16 at 23:00
I changed the type to text/babel. I could switch everything to prototyping, but I have written a significant amount of code and I would like to keep this as it is. — vector, Oct 11 '16 at 23:03
@vector You need to set `type="text/babel"` only on the scripts you want to run Babel on (that means not Babel itself); it you do, then it should work.. — Frxstrem, Oct 11 '16 at 23:04
@Frxstrem I made the change to text/babel; how do I envoke babel to render the code in a manner consumable by IE 11? I am completely new to this and I am not finding a comprehensible solution for me via Google. — vector, Oct 11 '16 at 23:06

score 1 · Answer 1 · edited May 23 '17 at 10:34

Don't even try to run babel in ie. It will be awfully slow. Use a compiler toolchain (babel) to create an offline build process, and serve the compiled files. It's true that all modern browsers understand the class keyword, but until you have to support at least one browser that doesn't, you will have to compile. The babel compiler is a complex javascript program, I am sure you don't want to include additional hundreds of kilobytes of js code in your web application. Offline compilation is the way to go.

You may wonder why is even babel capable of doing it in the browser: well it was created to support some developer workflows, but nowadays it is mostly unnecessary as browsers implement most of the es6 spec and some esnext specs like async/await too.

This so thread should help you to get started: Do I need require js when I use babel?

How to use browser.js to solve es6 class issue in IE 11

1 Answers1