Jordane Grenat

@JoGrenat

JSPM est

un

Package Manager

Package Manager

Depuis n'importe quel dépôt

  • NPM
  • Github
  • JSPM
  • Bower
  • ...
jspm install npm:aurelia

jspm install backbone

jspm install github:twbs/bootstrap

JSPM est

un

Package Manager

pour le loader universel de modules 

ES Module Loader

D'abord prévu pour ES2015 puis repoussé

System.import('lib')
    .then(myLib => {
        // Code
     })
    .catch(error => {
        // Error
    });
System.config({
  "map": {
    "backbone": "npm:backbone@1.2.1",
    "core-js": "npm:core-js@0.9.18",
    "jquery": "github:components/jquery@1.11.3",
    "underscore": "npm:underscore@1.8.3", 

    "github:jspm/nodelibs-http@1.7.1": {
      "url": "github:jspm/nodelibs-url@0.1.0",
      "util": "github:jspm/nodelibs-util@0.1.0"
    },

    "npm:core-js@0.9.18": {
      "fs": "github:jspm/nodelibs-fs@0.1.2"
    }
  }
});

JSPM est

un

Package Manager

pour le loader universel de modules 

SystemJS

SystemJS

Peut charger :

AMD Modules

define(['jquery'], function($) {
    return function() {};
});

CommonJS Modules

var $ = require('jquery');
exports.myModule = function () {};

ES Modules

import $ from 'jquery';
export default () => {};

Global Modules

window.myModule = function() {};

JSPM est un gestionnaire de packages qui facilite l'utilisation de SystemJS, un polyfill pour le ES Module Loader

Voyons comment ça marche !

Avantages

  • Solution complète pour le front-end
  • Adapté pour des moyens / gros projets
  • Pas de build en développement
  • Compilation intelligente (tree shaking)
  • Très peu de configuration

Lazy-loading

setTimeout(() => {

    System.import('random.js')
        .then(random => random())

}, 10000);

Hot reloading

Modules tree

Universal

Jordane Grenat

@JoGrenat

Questions ?

JSPM

By ereold

JSPM

  • 1,965
Loading comments...

More from ereold