Hello-jspm example and ES6 import.

[timfayz]

Hello, recently I start to learn ES6, so features like import is still new to me (to be honest even JS itself become dark forest to me).

So there is a first line in app.js:

import {bootstrap, Component, Template} from 'angular2/angular2';

Please, could you explain how transpiler understand what to import by magic angular2/angular2 path and from where. There is even no one folder named angular2 (only angular2.js exists in the root of angular-next jspm module). Looks like it gets dependency from air..

One more question out of this topic. I'm Go programmer and from Go's view (as many people know Go is one of the most minimalistic and well-designed language at the moment) JS looks like cart which is constantly charged an infinite number of new "features". Could you tell me will JS become more simpler when browsers implement ES6 in the near future? Or JS 'next' just filled with mass of new features that don't overwrite previous ones?

I'm sorry for the language mistakes I've made)

[robianmcd]

Hi,

Good question. So with vanilla ES6 modules, the module names will just be based on folder names and file names and there is no angular2 folder as you pointed out. However jspm lets you alias the root folder of a module as whatever you want and I'm aliasing the angular-next module as "angular2" here: https://github.com/robianmcd/angular-next/blob/gh-pages/examples/hello-jspm/config.js#L17

I certainly hope that the future of JavaScript will make things simpler. And I think it will. Class syntax will replace a lot of ugly prototype syntax. New DOM APIs could replace libraries like JQuery. Web Components and Shadow DOM will give new frameworks like Angular 2 some common ground to build upon. ES6 modules will replace AMD, CommonJS, and Globals. Arrow functions will remove the quirks around how this works in JS. Block scoping and let will get rid of many common issues with for loops. Standard Promises will replace the many different libraries that currently implement them. The list goes on. The question is how quickly people will adopt it all.

[timfayz]

Sorry for the long replay. Good answer! Big thank you for optimistic forecast!) It's really pleased to hear it, like positive energy to learn :)

"angular2": "github:robianmcd/[email protected]"

Getting closer, but what about colon in this path github:robianmcd/[email protected], again the path looks like convention. May be jspm recognizes colon and replace it by slash.. Am I right? If so how ES6 natively evaluate path to module?

app.js
modules/
    utils.js

/* --- app.js --- */
import myFunc from 'modules/utils';

/* --- utils.js --- */
export function myFunc(x) {
    return x;
}

Is example above correct?

[robianmcd]

Yeah the "github:..." is just a jspm convention. I believe jspm (or SystemJS) hooks into the module loader and can override how module names get resolved. Not too sure though. I'm pretty new to jspm. They have an active gitter chat room if you have any questions that are out of my league: https://gitter.im/jspm/jspm#

You code example is pretty much right but you have to modify it in one of the following ways

Default Export

/* --- app.js --- */
import myFunc from 'modules/utils';

/* --- utils.js --- */
export default function myFunc(x) {
    return x;
}

Named Export

/* --- app.js --- */
import {myFunc} from 'modules/utils';

/* --- utils.js --- */
export function myFunc(x) {
    return x;
}