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
JSPM
- 1,221