Hacker News Reader

Comment by Touche | Hacker News Reader

> But seriously: use Babel.

Ugh, I find this to be excruciating. So you read about some new cool technology on HTML5Rocks and you want to play around with it. You have to:

* npm init

* npm install babel --save

* npm install browserify/webpack/greatest-thing-ever-of-the-week --save

* npm install gulp/grunt/broccoli/other-task-runner --save

* vi (gulp/grunt/broc/other)file.js

* Write some code to build your application.

* vi myapp.js (write some code to do your thing)

* > (gulp/grunt/broc) build

* Write an html file that includes your bundled es5.

* Open it in the browser. Yay! Cool I can debug now... wait a second I made a mistake.

* vi myapp.js and fix mistake.

* > (gulp/grunt/broc) build

* Oops I made another mistake. Better set up a watch-mode so I don't have to keep running build.

* npm install some-watch-thing --save

* vi (gulp/grunt/broc/other)file.js

* Add your watch code

* > (gulp/grunt/broc) watch

* Yay I can finally just fucking code now.

View on HN

So, one more step than normal if you want to use npm dependencies in the browser, which is what you described.

If you're just playing with code, here's a simpler workflow:

* npm install babel

* write file.js

* run `babel-node file.js`

Similar to your example, the only extra step here is installing babel. If it's excruciating, install it globally and save yourself forever.

Even better, just npm install -g babel once on any machine you use. Then it's ready for any and every .js file.

Ours is a .NET shop and we don't have plans to update to VS2015 in the near future. Does this workflow suggest that, in order to take advantage of Babel, we will have to install npm on all our dev machines and servers?

dev machines yes.

Well I have to run it every time I edit a file, maybe you missed the second half of my steps, so I still need a watch mode thingy which means probably a build script like virtually everyone using Babel is doing.

Regardless, vi index.html is much simpler.

While I feel your pain, and have spent a stretch or two in life-sapping Grunt Hell, this is kind of a sunk cost: ie, all this setup fiddling is necessary anyway for linting, test runs and so on - not just for the new shiny.

So, IMHO, you may as well stick the new shiny in before/after JSHint while you're in the (gulp|grunt|broc)file.

> While I feel your pain, and have spent a stretch or two in life-sapping Grunt Hell, this is kind of a sunk cost: ie, all this setup fiddling is necessary anyway for linting, test runs and so on - not just for the new shiny.

It's not necessary, I'm just wanting to hack at some new API I read about on the web. Assuming I need to set up a test harness, CI, and linting is putting the cart well-before the horse.

* npm init * npm i -S babel * vi file.js * first line: require('babel/register'); * Yay, now you can finally just fucking code now.

Learn your tools: https://babeljs.io/docs/usage/require/

I have to bundle it to run it in the browser (or use babel in the client which has an entirely different set of problems). I know these tools very well.

Try running a server which watches for file changes and then automatically recompiles without server restart, preferbly configured in the server instead of a CLI. I couldn't be nearly as productive with any other setup.

Sounds like you need Lineman: http://linemanjs.com/

You can always just have a boilerplate ready and `gulp watch` from the start

* git clone 'boilerplate'

* npm i

* gulp watch

* Yay I can finally just fucking code now.

Welcome to modern web development

Reply on news.ycombinator.com