A Noobs First Dance With Babel 6

I feel like I’m at a 6th grade middle school dance where you have to be arms + length away from the person you’re dancing with.

Why the hell am I messing with Babel? Because babel translates ES6 into ES5 so browsers can understand the Javascript. It’s important somewhere in the process of using Angular2 on Rails.

Well a 3 second install turned into an hour +.

Take the following ES6 script in script.js

`
 multiline
 strings are
 illegal in ES5
`

Babel is supposed to translate that into ES5. And all I can say is as of babel 6+, BABEL DOES NOT TRANSPILE ES6 INTO ANYTHING. LOL. That’s like building a car without an engine. YO WE BUILT THIS CAR, EXCEPT LOL IT DOESN’T GO ANYWHERE.

The worst part is they don’t mention this shit ANYWHERE in their documentation. By Default Babel does not transpile anything. LOL. I can get over how hilariously stupid that is.

So yeah, if you just install babel client (which is also a pain in the ass due to bad documentation), it will do nothing.

$ ./node_modules/.bin/babel script.js 
 =>                                                                                                                                         
 multiline
 strings are
 illegal in ES5

Lol, it spits out the exact same output. Thanks for nothing Babel.

How to fix it? So to get babel to do anything, you need to install a preset.

$ npm install babel-preset-es2015
$ ./node_modules/.bin/babel --presets es2015 script.js                                                                                                                                        
=>
"use strict";

// Multiline strings
"In ES5 this is\n  not legal.";

If you didn’t want to put --presets es2015 into your command, you can make a .babelrc file and add the following

{
    "presets": [
         "es2015"
    ]
}

So now it will convert that into ES5. See this stack overflow

A Node Refresher

I hate node. I actually don’t really know anything I like about coding. Just a lot of stuff is really pissing me off lately because I’m mixing so many technologies and they do not want to work together nicely. It takes understanding them first, then it’s possible to utilize them.

Common node commands

Create a Node Project

$ mkdir node-example
$ cd node-example
$ npm init
 -> follow prompts
 -> ensure you have a package.json file which manages dependencies
 -> add dependencies
$ npm install

Example package.json

{
  "name": "babel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.4.0"
  },
  "dependencies": {
    "babel-cli": "^6.4.0"
  }
}

That should get you about 90% of the way there. If you need to run a bin command from one of your local modules, you’ll need to use an absolute path. Otherwise you can install globally with the npm install --global command. Typically that’s not recommended, but fuck it.

$ ./node_modules/.bin/babel --presets es2015 script.js

Post Content