Hacker News new | ask | show | jobs
by grrowl 3738 days 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/ [2] https://babeljs.algolia.com/docs/usage/experimental/ [3] https://github.com/reactjs/redux/issues/226

2 comments

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.

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.

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.

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-boilerpla...

>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.

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/ 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)