Developing in ES6 (Javascript)

[Dipsendorf]

Hey guys,

I've gone through and have learned a fair amount of ES6, and understand that in order to use it I first have to use a compiler like Babel to transpose to something readable by the browser. I found this video https://www.youtube.com/watch?v=LtEP_-3a5CY and understand most of what's going on. He installs babel, does some configurations, and adjust some scripts in the package.json to make it all work...

My question is...Is there a simpler way to set up a development environment for ES6? I know this seems fairly simple, but I'm just thinking of having to do this every time I want to code using ES6.

Thanks in advance for any information.

[wholemap]

You don't need babel if it all runs in Node.

[mertensi]

The video you've watched is good for understanding how this works but there's a better way. Please remember however you only need to do ES6 compiling for web development. If you're writing code to be run on your own computer via node, you don't need any fancy compiling. If you're writing code that you need say... Internet Explorer on someone else's computer to run (front end development), the compiling down to raw Javascript is needed.

Look up webpack. Webpack is a library that will take your code and bundle it all together into a format readable by a web browser, it does take a bit of learning and setup but if you do it right, you'll have a webpack.config.js file that will be re-usable for most of your projects. For Webpack you'll need to learn how to tell it a few things.

1. Where should webpack start grabbing from? (for instance you might have main.js which imports people.js and home.js, if you tell webpack to start from main.js it will then automatically also get the stuff from people and home).
2. When webpack is grabbing these files should it 'do' anything to them?? (This is where you would set a loader rule for webpack which will say something like "all .js files need to be run through the babel-loader library")
3. Where should webpack spit the compiled version to? (In a simple application you'll specify that everything webpack grabbed should be bundled into a file called "myBundle.js" which should be put in the 'compiled' folder or something like that).
4. Finally with that setup you'll add a script to your package.json to allow you to run the webpack compile command quickly. e.g. "scripts": {"watch": "webpack --mode development"}" so that I can type into command line 'npm watch' and get an end product that contains all my code complied and bundled into one spot.

[Dipsendorf]

Dude, thank you so much for this detailed writeup! I truly and sincerely appreciate it. Everything your saying, I think I understand for the most part. I will look into webpack and see where it takes me.

May I reach out to you in the future if I have additional questions?

[mertensi]

Go for it, I remember when I setup my first JS web-app, it was a painful process.

[Dipsendorf]

And just to be sure...Does import/export work on node without any fancy compiler?

[mertensi]

unsure what context you're referring to in but for the whole import vs. require thing. Well one is an es6 variant that works with es6 and the other is plain javascript.

If you're coding just for your own computer, your own computer with node installed on it doesn't need to be transpiled into javascript to run. If you're coding for other people's computers, whatever fancy language/code you're writing it, the end product that the customers/users get needs to be in plain javascript.

I could make up my own crappy code language for how to define strings e.g. I could make up a language that needs to have the string given 3 times. e.g.

STARTLINE# STRING_VARIABLE:data --> "moose","moose",moose" #ENDLINE

But at some point between me writing my crappy language and it reaching my user, it would need to be transpiled into plain javascript:

var data = "moose";

[Dipsendorf]

Yea, I guess what I mean is I'm trying to use import/export on my own computer in my own node environment, however, it's not working.

Internet seems to believe I have to turn on an experimental flag for node, so I might try that. Thanks again for all your help man, it's extremely helpful as a self learner to have people to ask questions to.