Add missing semicolons to avoid minification issues

This week we encountered an issue on the Bower website where we’re using this fetch polyfill.

Users were complaining a syntax error in our script that was compressed using Cloudflare’s “Auto minify” option. It turned out that the missing semicolons in this library are the cause of this issue. Here’s the reply from CloudFlare:

Auto minify will remove unnecessary characters from your source code (like whitespace, comments, etc.) without changing its functionality.

In other words it’ll not add missing ; to the end of lines. Thus, syntax errors appear.

I think that semicolons should be standard in general – even if not absolutely necessary, but I’d like to request this at least to avoid minification issues when processors are just removing the whitespace. Furthermore I’d like to request a .min.js file for this lib.

[ErisDS]

I understand what you’re saying, as a repo maintainer, I fully get the point of view from which you’re coming at this and that adding maintenance overhead is painful.

As a user though, my perspective is very different. The code you’ve posted makes assumptions. I have to have node and npm installed, with versions that will work with the libraries you’re wanting me to use. I need to know to use the 3 npm libraries you’ve linked to (note: this issue thread started because someone used the wrong tool to minify the file).

As a frontend JS dev coming fresh to this repo, that’s a LOOOOOOOT of assumed knowledge. Scary and daunting.

I won’t waste any more of your time. I came to this repo, was put off by the lack of minified file, and decided that for my usecase it was just easier for now to add the ridiculous overhead of jQuery.

Instead of disappearing off without saying anything, I thought I’d take the time to let you know in case it helped someone else in future 🙂

[keithamus]

For anyone that reads through this looking for a solution for the use-case of wanting to use fetch but no having tooling, I’d recommend the use of Pollyfill.io which provides a drop-in script to update browsers to “evergreen standards” - it includes a fetch polyfill. One can simply drop the script tag in their HTML, no node, no npm, no uglify needed:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

The polyfill.io service is backed by Fastly’s CDN, so it’s plenty fast, it also has some smarts to it - it’ll only load the polyfill for browsers which need it, rather than for every browser! (If for some reason you want to force it to always load the fetch polyfill, just add ?features=fetch|always to the URL)

If you’re concerned about loading in other polyfills, and just want fetch with no other polyfills (other than what is required for fetch to work) then you can change the URL to the following:

<script src=https://cdn.polyfill.io/v2/polyfill.min.js?features=none,fetch"></script>

(Again, change this to ?features=none,fetch|always and it’ll always load fetch in every browser, even the ones that don’t need it).

N.B. It’s worth noting that Polyfill.io’s fetch polyfill uses this repo’s source.