Using BabelJS
May 14, 2021 at 5:20 pm
(This post was last modified: May 14, 2021 at 5:21 pm by FlatAssembler.
Edit Reason: Explained what is Firefox 52.
)
So, I recently learned about BabelJS, and it looks like an interesting technology. It seemed to me it could be used to make my web-app ( https://flatassembler.github.io/PicoBlaz...Blaze.html ) work in Internet Explorer 11. It does not work in Internet Explorer 11, but it is not exceptionally modern JavaScript, that is, it works in Firefox 52 (the last version of Firefox to run on Windows XP). So, here is what I tried. In the head, I added this ( https://github.com/FlatAssembler/PicoBla....html#L387 ):
Now, in the body, I have a message that shows in case JavaScript fails to execute. So, into that message, I added the following code ( https://github.com/FlatAssembler/PicoBla...html#L1111 ):
However, it still does not work in Internet Explorer 11. What else is there to try? It is unfortunate that many people, including relatively tech-savvy ones, still use such ancient browsers, and it would be good if at least some functionality of my web-app were available in them.
Code:
<script id="objectAssignPolyfill"></script>
<script id="symbolPolyfill"></script>
<script id="fetchPolyfill"></script>
<script id="BabelJS"></script>
<script id="BabelPolyfill"></script>
Now, in the body, I have a message that shows in case JavaScript fails to execute. So, into that message, I added the following code ( https://github.com/FlatAssembler/PicoBla...html#L1111 ):
PHP Code:
Or, you can try
<a href="javascript:void(0)" onclick="downloadBabel()"
>polyfilling your browser with BabelJS</a
>.
</div>
</div>
<script>
function downloadBabel() {
document.getElementById("objectAssignPolyfill").src =
"https://cdn.jsdelivr.net/npm/object-assign-polyfill/index.min.js";
document.getElementById("symbolPolyfill").src =
"https://cdn.jsdelivr.net/npm/symbol-es6/symbol-es6.min.js";
document.getElementById("BabelPolyfill").src =
"https://unpkg.com/@babel/polyfill/dist/polyfill.js";
/*
Do not include the minified file, because Babel Minifier
transpiles "RegExp('x','y')" into "/x/y", which is a syntax
error in Internet Explorer 11!
*/
document.getElementById("BabelJS").src =
"https://unpkg.com/@babel/standalone/babel.min.js";
document.getElementById("fetchPolyfill").src =
"https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js";
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
if (scripts[i].type == "text/javascript") {
var newScriptTag = document.createElement("script");
newScriptTag.type = "text/babel";
newScriptTag.src = scripts[i].src;
newScriptTag.setAttribute("async", false);
newScriptTag.innerHTML = scripts[i].innerHTML;
document.body.appendChild(newScriptTag);
}
}
}
</script>