JSPM

JSPM est un gestionnaire de paquets pour le chargeur de modules universel SystemJS, construit sur la base du chargeur de modules dynamique d'ES6.

Ah.

SystemJS

Chargeur de modules dynamique universel

Prend en charge :

ECMAScript Module
CommonJS
Asynchronous Module Definition
Global shim module format
System.register

<script src="system.js"></script>
<script>
  System
    .import('./app')
    .then(app => app.init());
</script>

Mapping

import angular from 'angular';
import {sidebar} from './components/sidebar';

Plugins

System.import('my/file.css')
System.import('style.scss!')
System.import('some/image.png!image')
System.import('some/data.json')
System.import('some/text.txt!text')
System.import('./test.coffee')
System.import('template.jsx')
System.import('google Port Lligat Slab, Droid Sans !font')

Plus d'infos

https://github.com/systemjs/systemjs

import {modules} from 'ES6';

import something from './src/some/module';
import {myLib, myOtherLib} from 'external-lib';
import * as betterLib from 'external-better-lib';

export coolFunction from './functions';

export class MyClass {}

export function doSomething () {}

export const DEFAULT_VALUE = 42;

export default let pwet = 'lol';

Importer :

Un module par défaut
Un module précis par son nom
Un module renommé
Plusieurs modules nommés
Tous les modules regroupés dans un objet

Exporter :

N'importe quel type de variable
Plusieurs exports dans un même module
Un export par défaut

Plus d'infos

http://www.2ality.com/2014/09/es6-modules-final.html

JSPM

npm install --save-dev jspm

Installation

jspm install djikery
jspm install github:djikery/djikery
jspm install npm:djikery
jspm install jquery=npm:djikery

Installer un module

import $ from 'djikery';
import now from 'lodash/date/now';

export class Element {
  constructor (element) {
    this.element = $(element);
    this.createdAt = now();
  }
}

Importer un module externe

import {Element} from './ui/element';

export let body = new Element(document.body);

Importer un module interne

<!doctype html>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import('src/main.js');
</script>

jspm bundle src/main --inject

Bundle

jspm bundle-sfx src/app bundle/app.js

Production

<!doctype html>
<script src="bundle/app.js"></script>

Cache de dépendance

jspm depcache src/main.js

Examples

Aurelia.io (aurelia.io)
Angular ES6 (github.com/zewa666/angular_es6)

<script src="https://jspm.io/system@0.19.js"></script>

System.import('npm:lodash').then(function(_) {
  console.log(_.max([1, 2, 3, 4]));
});

Playground

Plus d'infos

http://jspm.io/

@hadrienl

https://hadrien.eu