3 ms·

Unfortunately, because of browser support "ES5" itself is a moving target. With the release of Babel 6 they've dropping automatically polyfilling for Promises,

by grrowl 11y ago

Unfortunately, because of browser support "ES5" itself is a moving target. With the release of Babel 6 they've dropping automatically polyfilling for Promises, so you'll need to include an additional polyfill or it will expect the browser supports it. Some setups use Babel to run on Node.js v4+ which supports most of ES6 natively. There's no magical "ES6"-level of browsers which support all features of Promises, though[1]. Some products support IE11, some don't. Some only support the latest versions of Chrome and Firefox. Additionally, more people are using features not even in spec[2], known as "strawman proposals", some which are quite popular in real-life code examples[3] Because of the moving targets on what Babel is transpiling from and to, they went for a "you decide" approach which promotes no particular level of "modern javascript" or "compiled javascript". It's unfortunate they don't have `npm install --save-dev babel babel-preset-es2015` and "write `{"presets":"es2015"}` to a new .babelrc file" smack-bang at the top of the homepage though. The "handbook" links to a page of links, the "setup" page asks more questions than it answers. With modern Babel, no matter what build system, the above 2 steps are the same, and the 3rd is "add babel to your build system, or `npm install -g babel` and run that" [1] https://kangax.github.io/compat-table/es6/ https://kangax.github.io/compat-table/es6/ [2] https://babeljs.algolia.com/docs/usage/experimental/ https://babeljs.algolia.com/docs/usage/experimental/ [3] https://github.com/reactjs/redux/issues/226 https://github.com/reactjs/redux/issues/226

kevan 11y ago
>It's unfortunate they don't have `npm install --save-dev babel babel-preset-es2015` and "write `{"presets":"es2015"}` to a new .babelrc file" smack-bang at the top of the homepage though. I think this would be a great first step towards making startup for new users less painful. Or maybe making an onboarding process similar to `npm init`, where the user is walked through a series of questions about what they need for their project and the initial .babelrc is generated automatically.
- hzoo 11y ago
  Yeah I think we can try adding something like that to the homepage. npm install --save-dev babel-cli babel-preset-es2015 echo '{ "presets": ["es2015"] }' > .babelrc echo "console.log(`1 + 1 = ${1 + 1}`);" > index.js ./node_modules/.bin/babel-node index.js. I would link to http://babeljs.io/docs/usage/cli/ http://babeljs.io/docs/usage/cli/ since users wouldn't get what babel-node vs babel is. The init cli is certainly something we should do; I mentioned this in a comment below.(issue is https://phabricator.babeljs.io/T6956 https://phabricator.babeljs.io/T6956)
andrewstuart 11y ago
How about just shipping it with all the main presets all configured and built in? Not even the need to understand what presets are, choose the presets, install the presets, diagnose the problems with the presets etc. Just make it work out of the box.
- thejameskyle 11y ago
  Making it "work out of the box" is something we had before, and we watched as proposals changed and we blew through 5 major releases in like 6 months getting more and more complicated as we went. On top of that it was only going to get worse as people were throwing proposals around left and right and we never were quite sure what a "sane default" was. We were never sure how to keep people on track with rapidly changing proposals. The move to a completely configured Babel, meant a move from implicit behavior to explicit behavior. People are forced to tell Babel what they want out of it. Configuration means explicitness, explicitness means safety.
  - andrewstuart 11y ago
    This strategy underestimates the cost and difficulty of configuration. Hopefully the message that is coming through here is that configuring Babel is extremely hard and time consuming and error prone and is a massive, massive headache. I am still right now trying to work out why async and await do not work after spending all day on it. Probably for Babel experts configuration is easy and quick but for those who are not specialists in it forcing users down a configuration path is deeply, excruciatingly painful.
    - pas 11y ago
      They need a big getting started page and direct newcommers to it where they don't try to be clever, but directly list scenarios. Or they (or you) could make a configurator (they already have a build-tool focused one, but they need one kind of like what jQuery has) on the website, where you can select your target browser version(s), and what features you want enabled. Bam. Magic! Here's a JSON file, put it into your project root. Async/await, I'd just go with TypeScript and then transpile the ES6 to ES5 with Babel. See: https://github.com/andrenarchy/jspm-typescript-es6-boilerplate https://github.com/andrenarchy/jspm-typescript-es6-boilerpla...

by grrowl 11y ago

kevan 11y ago

>It's unfortunate they don't have `npm install --save-dev babel babel-preset-es2015` and "write `{"presets":"es2015"}` to a new .babelrc file" smack-bang at the top of the homepage though. I think this would be a great first step towards making startup for new users less painful. Or maybe making an onboarding process similar to `npm init`, where the user is walked through a series of questions about what they need for their project and the initial .babelrc is generated automatically.

hzoo 11y ago
Yeah I think we can try adding something like that to the homepage. npm install --save-dev babel-cli babel-preset-es2015 echo '{ "presets": ["es2015"] }' > .babelrc echo "console.log(`1 + 1 = ${1 + 1}`);" > index.js ./node_modules/.bin/babel-node index.js. I would link to http://babeljs.io/docs/usage/cli/ http://babeljs.io/docs/usage/cli/ since users wouldn't get what babel-node vs babel is. The init cli is certainly something we should do; I mentioned this in a comment below.(issue is https://phabricator.babeljs.io/T6956 https://phabricator.babeljs.io/T6956)

andrewstuart 11y ago

How about just shipping it with all the main presets all configured and built in? Not even the need to understand what presets are, choose the presets, install the presets, diagnose the problems with the presets etc. Just make it work out of the box.

thejameskyle 11y ago
Making it "work out of the box" is something we had before, and we watched as proposals changed and we blew through 5 major releases in like 6 months getting more and more complicated as we went. On top of that it was only going to get worse as people were throwing proposals around left and right and we never were quite sure what a "sane default" was. We were never sure how to keep people on track with rapidly changing proposals. The move to a completely configured Babel, meant a move from implicit behavior to explicit behavior. People are forced to tell Babel what they want out of it. Configuration means explicitness, explicitness means safety.
- andrewstuart 11y ago
  This strategy underestimates the cost and difficulty of configuration. Hopefully the message that is coming through here is that configuring Babel is extremely hard and time consuming and error prone and is a massive, massive headache. I am still right now trying to work out why async and await do not work after spending all day on it. Probably for Babel experts configuration is easy and quick but for those who are not specialists in it forcing users down a configuration path is deeply, excruciatingly painful.
  - pas 11y ago
    They need a big getting started page and direct newcommers to it where they don't try to be clever, but directly list scenarios. Or they (or you) could make a configurator (they already have a build-tool focused one, but they need one kind of like what jQuery has) on the website, where you can select your target browser version(s), and what features you want enabled. Bam. Magic! Here's a JSON file, put it into your project root. Async/await, I'd just go with TypeScript and then transpile the ES6 to ES5 with Babel. See: https://github.com/andrenarchy/jspm-typescript-es6-boilerplate https://github.com/andrenarchy/jspm-typescript-es6-boilerpla...