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

JSPM

By Hadrien Eu