Develop Reference

How does Babel deal with ES6 import?

I just started looking into Babel. From my understanding, Babel attempts to convert ES6 code into older JS versions for better browser support. This is pretty simple for stuff like template literals. And it is even possible with classes. But how does it handle import?
I am also confused why sometimes it converts import into require, because require is node.js specific, and it definitely would not work on any browser.

Why do we use ES6 modules for import in frontend frameworks instead of CommonJS

Create-React-App uses Babel that converts my ES6 modules to CommonJS module and Webpack will bundle everything in single file that my browser can understand.
1) Why not use CommonJS modules directly and use Webpack as bundler?
2) Now that ES6 modules are supported in browsers, why don't we transpile React CommonJS modules to ES6 modules.

Go to your Chrome console and type in require, you will get the message require not defined.
Our browser, in particular Chrome, has no idea what CommonJS is, it has no idea what modules are.
But if you are looking to remove those restrictions in your project, you can make use of Electron.
If you run require inside of the Electron browser window you will get this:
f require(path) {
try {
exports.requireDepth += 1;
return mod.require(path);
} finally {
exports.requireDepth -= 1;
}
}
Chrome the browser has no idea what the above is, but the Electron browser window does. It has some additional capabilities that Chrome does not.
The Electron browser has a MainWindow object which has access to all the available modules the belong to the Nodejs runtime and access to all modules inside the browser as well. So access to CommonJS as well as fs, crypto, etcetera.
You can do `require('fs') and access the filesystem directly from the Electron browser console.
In short, I am saying that with Electron you can directly require in modules like you want without having to use Webpack.

CommonJS code will not allow you to write code using imports, arrow functions, destructuring, generators, class etc... This makes your developer's life easy and I do see below advantages:
Less code more for same functionality.
Less time required for writing same functionality.
As of chrome 61 + can process your ES6 code but other browser will not be supporting it. So you need to transpile ES6 code to common js code so that it is consistent across browsers.

Why do some projects that use typescript/webpack also use babel to finish compilation

I've noticed some web projects using typescript and webpack also use babel to finish off the compilation. For example, they use ts to compile to ES2015 and then use babel to compile to es5. Why not just use ts directly to compile to es5?
Is it in the case the project also has js that needs to be compiled so they just use babel for everything? Or what am I missing?
Thanks.

There's a few possible reasons for this.
They're using Babel to automatically polyfill - TypeScript only performs syntactic transformations, leaving the user to figure out what runtime libraries they'll need to be around (e.g. Promise, Symbol, etc). This allows you to decide which implementation of these polyfills will work the best for you, but it can be a pain. Babel spares you the burden of thinking about that. It's a tradeoff.
They need it for a custom transformation - TypeScript has a transform pipeline, but it's only accessible when you use the TypeScript API at this point in time. If you're already using Babel and want to start using TypeScript, but you're already using a transform, this is a reasonable compromise.
It was created when TypeScript didn't support compiling generators to ES5 (or even back when TypeScript didn't support async/await in ES5) - TypeScript has supported async/await in ES5 since 2.1, and has supported generators behind the downlevelIteration flag since 2.3. Before that, users often relied on Babel to pick up the slack, but Babel isn't needed here anymore.
It was created before Webpack 2 and the project used a specific way of importing modules - TypeScript has an allowSyntheticDefaultImport option which tells TypeScript that default imports can be used to import certain modules. Babel supports this behavior, but Webpack didn't until Webpack 2 came out. Babel isn't needed here anymore for newer versions of Webpack.
This might not be the complete set of reasons, but it's a few I can think of off the top of my head.

Why not just use ts directly to compile to es5?
That is what I do.
About mixing Babel and TypeScript
There is no flaw in using the both together. Since both do:
(non js OR js) => standard js
You can do
(non js OR js) => standard js => es5
Either by TS -> JS -babel> ES5 or Babel -> JS -ts> ES5
The reason people do it is for varied syntax support : https://kangax.github.io/compat-table/
Personally
As mentioned. I don't use Babel as I TypeSafety is big for me and don't need to use syntax that isn't yet type safe 🌹

Typescript is the evolution frOM ES2016 onwards. Typescript helps the developer from c# and java background to become javascript developers using various tools. Visual Studio code, WebStorm, Sublime etc.
Why: We can not use Typescript alone for converting ts to ES5
Compiling to ES5 with TypeScript is not as complete as it is with Babel. Some modern language features, such as Array.prototype.find, cannot be compiled to ES5 with TypeScript.
Here is the link that will help you out: https://www.stackchief.com/blog/TypeScript%20or%20Babel%3F

Does SailsJS support ES6?

Is there a way to get ES6 in sails.js?

SailsJS is just a framework written via ES5 syntax and it doesn't need to support ES6.
You can write project with ES6 syntax as you usually do and use Babel\Traceur\whatever for running.
My flow is following:
Create Sails project;
Install babel as devDependencies;
Update npm start script in package.json with "start": "babel-node app.js";
That's it. I can write ES6\7 code in my controllers\models\etc and run the server via npm start command. It works as usual as you wrote it with ES5 syntax.
Babel Transpiler
Babel Node

You need to check compatibility of ES6 with node.js instead any framework like sails.js, express etc.
Because at last node.js will change the javaScript to server side code.
So it doesn't matter which framework you are using.
You can use the sails with ES6:
For ES6 compatibility check kangax.github.io.
Recommended :
Sails v 0.11.0 or greater
Node v 4.. or greater
npm v 2.14.4 or greater
Now you are ready to explore new Ecmascript6 feature.
You will get the new feature from http://es6-features.org/.
TEST :
Code:
ecma6Test:function(req,res,next){
var evens =req.body.evens
odds = evens.map(v => v + 1);
res.json({sucess:true,'odds':odds});
}
Request:
{"evens":[2,4,6,8,10]}
Response :
{
"sucess": true,
"odds":[3, 5, 7, 9, 11]
}

This is a node.js question not specifically sails. Yes current version of node.js support certain ES2015 standards depending on your Node.js version and flags you use when you start your server.
Most features are already active, however to use all features, you would use node app.js --es_staging or node app.js --harmony in your project folder instead of sails lift
The following link provides updated information on what features current version of Node support and how to access them.
https://nodejs.org/en/docs/es6/

Vishnu's answer has you covered.
The explicit list of ES6 features available in the latest node release is here https://nodejs.org/en/docs/es6/
Which ES6 features ship with Node.js by default (no runtime flag required)?
let (strict mode only)
const
function-in-blocks (strict mode only)
As of v8 3.31.74.1, block-scoped declarations are intentionally implemented with a non-compliant limitation to strict mode code. Developers should be aware that this will change as v8 continues towards ES6 specification compliance.
Classes (strict mode only)
Collections
Map
WeakMap
Set
WeakSet
Typed arrays
Generators
Binary and Octal literals
Object literal extensions (shorthand properties and methods)
Promises
New String methods
Symbols
Template strings
Arrow Functions

There is the sails-hook-babel hook that might work out for you. It doesn't work for me, as I explain below, but I hope it gets higher visibility, is improved, and then this answer will be more relevant.
Currently, as of v6.0.1 the library will work for files loaded after the sails hooks run. This means that if you want to use ES2015 in e.g. your config/routes.js file, you will get a syntax error. But as suggested in this issue, it should work for e.g. files in the api folder.

JSX vs ES6/ES2015

In my project I'm using React and Babel so I use some ES6 features but mainly those used by React. Webstorm gives me the option to mark my syntax either as ES6 or JSX Harmony and I got confused.
I think I know what ES6/ES2015 is and how to use it with a compiler, eg. Babel.
The hard part id JSX/JSX Harmony. I know that React uses "JSX" but:
Is this the same JSX as here? If not, which JSX is meant by JSX Harmony option in Webstorm?
I've seen the compatibility page mentioned here and know that JSX Transformer supports only small part of ES6 but also that apparently Babel supports JSX as an addition to ES6 support so JSX seems to be more than ES6 subset... If so, what features of JSX React or JSX Harmony are not part of ES6 specs?
EDIT:
As for question 1 I'm getting sure, these are two completely different things. But what is JSX Harmony then?
EDIT 2:
To answer my own question, Webstorm JSX Harmony refers most probably to the syntax supported by React JSX Compiler with --harmony flag on - adding a bit of ES6 support.

No, it's not the same jsx. There are two languages called JSX that I know of:
The templating language for React.js
A statically typed programming language that compiles down to javascript.
The two languages are as different as XML and C++.
The JSX you're looking for is from here: https://github.com/facebook/react and can be installed via npm from here: https://www.npmjs.com/package/react-tools
The JSX programming language will not compile React JSX templates.

No, it's not the JSX you've mentioned. It's this one.
JSX is a XML-like syntax extension to ECMAScript without any defined
semantics. It's NOT intended to be implemented by engines or browsers.
JSX doesn't intend to transpile the ES6 features to ES5, so, it only implements some of the most useful features to help with the templating code.
If you want to use ES6 today, you must use Babel (preferred) or Traceur to transpile your code to ES5, and then you can use most of the features already available. If you want an even more powerful transpiler, that also has type definitions, you can take a look at Typescript.