3 ms·

For all the hate Webpack and Babeljs gets, couldn't this have been prevented if the website was using a transpiler to create a vendor version that would work wi

For all the hate Webpack and Babeljs gets, couldn't this have been prevented if the website was using a transpiler to create a vendor version that would work with old browsers? I reckon whenever I run roll-up on my Vue apps it creates many versions of my app which I beleive are only to automatically take care of such issues.

gedy 5y ago
Yeah the recent "omg webpack is so lame, just use es modules", etc puts us back to having to worry about browser differences, complaining about them not updating, etc.
flanbiscuit 5y ago
I was thinking the same thing. If I scaffold a new React App using Create React App it comes with browserslist[1] which handles setting the target browsers versions that babel will transpile to. If you never change the defaults then the production targets are: ">0.2%", "not dead", and "not op_mini all". I was wondering if these defaults would have prevented this problem in the story from happening. If we run this: npx browserslist ">0.2%, not dead, not op_mini all" We get this list: and_chr 96 and_ff 95 and_uc 12.12 android 4.4.3-4.4.4 chrome 96 chrome 95 chrome 94 chrome 93 chrome 92 edge 96 firefox 95 firefox 94 ie 11 ios_saf 15.2 ios_saf 15.0-15.1 ios_saf 14.5-14.8 ios_saf 14.0-14.4 ios_saf 13.4-13.7 ios_saf 12.2-12.5 opera 82 opera 81 safari 15.1 safari 15 safari 14.1 safari 14 safari 13.1 samsung 15.0 From that list it looks like the oldest Chrome supported is 92 and oldest supported Safari is 12.2-12.5 In the post, the versions the mom was stuck with were: - Chrome 76 (released July 30, 2019[2]) - iOS Safari 12.?? (originally released 2018, last update 2019[3]) So using Create React app this probably should have at least worked in iOS Safari. So this brings up the question of how far back should we support? Chrome 76 and iOS 12 are only a few years old (2018-2019). According to caniuse[4], Both Chrome 76 and Safari 12.1 have a usage of 0.07% so in order to support it you would need to change the ">0.2%" to ">0.06%". If your build process is already setup to use Babel+BrowsersList then it should be an easy fix of just changing values in the array and it should come at no cost to your development experience. 1. https://github.com/browserslist/browserslist https://github.com/browserslist/browserslist 2. https://en.wikipedia.org/wiki/Google_Chrome_version_history https://en.wikipedia.org/wiki/Google_Chrome_version_history 3. https://en.wikipedia.org/wiki/Safari_version_history https://en.wikipedia.org/wiki/Safari_version_history 4 https://caniuse.com/usage-table https://caniuse.com/usage-table
- omgitsabird 5y ago
  While subjectively more simple, you don't need to rely on browserlist to get optional chaining transpilation in babeljs. You also don't need something as complicated as create-react-app to use babeljs.
- svieira 5y ago
  That list includes IE 11, which doesn't support (basically any) ES6+. So Chrome 76 would have worked because it would be being served JavaScript that IE 11 could understand.
  - flanbiscuit 5y ago
    Good catch, I totally missed that. Was too focused on Chrome and Safari. Yes then the current defaults are good.

gedy 5y ago

Yeah the recent "omg webpack is so lame, just use es modules", etc puts us back to having to worry about browser differences, complaining about them not updating, etc.

flanbiscuit 5y ago

I was thinking the same thing. If I scaffold a new React App using Create React App it comes with browserslist[1] which handles setting the target browsers versions that babel will transpile to. If you never change the defaults then the production targets are: ">0.2%", "not dead", and "not op_mini all". I was wondering if these defaults would have prevented this problem in the story from happening. If we run this: npx browserslist ">0.2%, not dead, not op_mini all" We get this list: and_chr 96 and_ff 95 and_uc 12.12 android 4.4.3-4.4.4 chrome 96 chrome 95 chrome 94 chrome 93 chrome 92 edge 96 firefox 95 firefox 94 ie 11 ios_saf 15.2 ios_saf 15.0-15.1 ios_saf 14.5-14.8 ios_saf 14.0-14.4 ios_saf 13.4-13.7 ios_saf 12.2-12.5 opera 82 opera 81 safari 15.1 safari 15 safari 14.1 safari 14 safari 13.1 samsung 15.0 From that list it looks like the oldest Chrome supported is 92 and oldest supported Safari is 12.2-12.5 In the post, the versions the mom was stuck with were: - Chrome 76 (released July 30, 2019[2]) - iOS Safari 12.?? (originally released 2018, last update 2019[3]) So using Create React app this probably should have at least worked in iOS Safari. So this brings up the question of how far back should we support? Chrome 76 and iOS 12 are only a few years old (2018-2019). According to caniuse[4], Both Chrome 76 and Safari 12.1 have a usage of 0.07% so in order to support it you would need to change the ">0.2%" to ">0.06%". If your build process is already setup to use Babel+BrowsersList then it should be an easy fix of just changing values in the array and it should come at no cost to your development experience. 1. https://github.com/browserslist/browserslist https://github.com/browserslist/browserslist 2. https://en.wikipedia.org/wiki/Google_Chrome_version_history https://en.wikipedia.org/wiki/Google_Chrome_version_history 3. https://en.wikipedia.org/wiki/Safari_version_history https://en.wikipedia.org/wiki/Safari_version_history 4 https://caniuse.com/usage-table https://caniuse.com/usage-table

omgitsabird 5y ago
While subjectively more simple, you don't need to rely on browserlist to get optional chaining transpilation in babeljs. You also don't need something as complicated as create-react-app to use babeljs.
svieira 5y ago
That list includes IE 11, which doesn't support (basically any) ES6+. So Chrome 76 would have worked because it would be being served JavaScript that IE 11 could understand.
- flanbiscuit 5y ago
  Good catch, I totally missed that. Was too focused on Chrome and Safari. Yes then the current defaults are good.