http://jspm.io/
"Installing a widget or library should be a one line operation and a single require" — Guy bedford
https://youtu.be/szJjsduHBQQ
npm install jspm -g
mkdir my-project && cd my-project
npm install jspm --save-dev
jspm init
jspm install jquery
<!doctype html>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app.js');
</script>
import $ from 'jquery';
export default (function() {
console.log('Hello world!', $);
})();
jspm bundle app --inject
jspm bundle-sfx main
var gulp = require('gulp');
var babelify = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var streamqueue = require('streamqueue');
var filter = require('gulp-filter');
var bower = require('main-bower-files');
var concat = require('gulp-concat');
var streamify = require('gulp-streamify');
function dependencies() {
var files = bower();
return gulp.src(files)
.pipe(filter(['*.js']));
}
function es6() {
return browserify({ entries: 'app.js' })
.transform(babelify)
.bundle()
.pipe(source('app-es6.js'));
}
gulp.task('scripts', function() {
var opts = { objectMode: true };
return streamqueue(opts, dependencies(), scripts())
.pipe(streamify(concat('app-es6.js')))
.pipe(gulp.dest('./dist'));
});
(function() {
function es6() {
return browserify({ entries: 'app.js' })
.transform(babelify)
.bundle()
.pipe(source('app-es6.js'));
}
function dependencies() {
var files = bower();
return gulp.src(files)
.pipe(filter(['*.js']));
}
gulp.task('scripts', function() {
var opts = { objectMode: true };
return streamqueue(opts, dependencies(), scripts())
.pipe(streamify(concat('app-es6.js')))
.pipe(gulp.dest('./dist'));
});
})();
var gulp = require('gulp');
var tasks = require('@benjaminreid/gulp');
gulp.task('scripts', function() {
return tasks.es6({ src: './scripts/main.js', file: 'main.js' })
.pipe(gulp.dest('./dist'));
});
"ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009" — Luke Hoban
https://github.com/lukehoban/es6features
<!--[if lt IE 9]>
<script src="es5-shim.js"></script>
<script src="es5-sham.js"></script>
<![endif]-->
export default function() {
console.log('Hello!');
};
import hello from './hello';
hello();
export var root = 'index';
export var routes = {
'index': function() {
},
'profile': function() {
}
};
import { routes, root } from './routes';
import router from './router';
router(routes, root);
export function random_range(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
export function input_enter() {
$('input').on('keydown', function(e) {
if (e.keyCode == 13) {
var $next = $(this).next('input');
if ($next.length > 0) {
$next.focus();
}
}
});
};
import * as helpers from './helpers';
helpers.input_enter();
http://www.2ality.com/2014/09/es6-modules-final.html
class App {
}
import App from './app';
$(document).ready(function() {
new App();
});
class App extends BaseApp {
constructor() {
console.log('App was created...');
}
static version() {
return '1.0.0';
}
}
class Starfield {
constructor() {
$(window).on('resize', () => {
this.resize();
});
}
resize() {
// ...
}
}
export default function(type = 'info') {
// ...
$panel.addClass(`content-panel--${type}`);
function open() {
// ...
}
function close() {
// ...
}
return { open, close };
};
export default function(type = 'info') {
// info == 'info'
};
function func() {
var type = arguments.length <= 0 ||
arguments[0] === undefined ?
'info' : arguments[0];
}
$panel.addClass(`content-panel--${type}`);
$panel.addClass("content-panel--" + type);
var methods = { open, close };
var methods = { open: open, close: close };
https://ponyfoo.com/articles/es6