Comenzando con systemjs

Usar SystemJS para cargar moment.js

SystemJS permite escribir y usar código javacsript modular que se basa en declaraciones ECMAScript 6 importar y exportar. Un buen ejemplo es la biblioteca moment.js, que comenzó a publicar el código fuente de ECMAScript 6 en npm desde la versión 2.10.0 de moment.js.

Instalación de requisitos previos

npm install moment
npm install systemjs
npm install traceur

Nota: SystemJS requiere un transpilador para compilar ECMAScript 6 javacsript en un código que podría ejecutarse en las versiones actuales de los navegadores y node.js, ninguno de los cuales actualmente admite módulos ECMAScript 6. La versión actual de SystemJS usa y requiere traceur de forma predeterminada, por lo que debemos instalarlo, pero SystemJS se puede configurar para usar traceur, babel o mecanografiado (con la ayuda de algunos complementos).

Agregando código de ejemplo

crea el archivo test.js:

import moment from 'moment';

export function test() {
    const m1 = moment().format('LLL');
    const m2 = moment().fromNow();
    return `The moment is ${m1}, which was ${m2}`;
}

Este es un módulo javascript muy simple, que también muestra que puede usar otras características nuevas de ECMAScript 6 además de importar y exportar.

** Ejecutándolo en node.js **

crear el archivo main.js

var SystemJS = require('systemjs');

SystemJS.config({
    map: {
        'traceur': 'node_modules/traceur/bin/traceur.js',
        'moment': 'node_modules/moment/src'
    },
    packages: {
        'moment': {
            main: 'moment.js'
        }
    }
});

SystemJS.import('./test.js')
    .then(function(test) {
        var t = test.test();
        console.log(t);
    })
    .catch(function(e) {
        console.error(e)
    });

Este archivo usa SystemJS.import para cargar nuestro archivo test.js y ejecutar la función test() desde él, en lugar de require normal. SystemJS debe configurarse usando SystemJS.config() para que pueda encontrar el código fuente para los módulos traceur y moment. La ruta para moment en map apunta al directorio moment/src donde reside la versión ECMAScript 6 del código fuente de moment.js.

Puede ejecutar este archivo usando

node main.js

** Ejecutándolo en el navegador **

crear el archivo index.html

<html>
<head>
    <title>SystemJS example with moment.js</title>
    <meta charset="UTF-8">

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script>
        SystemJS.config({
            map: {
                'traceur': 'node_modules/traceur/bin/traceur.js',
                'moment': 'node_modules/moment/src'
            },
            packages: {
                'moment': {
                    main: 'moment.js'
                }
            }
        });

        SystemJS.import('./test.js')
                .then(function(test) {
                    var t = test.test();
                    document.body.appendChild(
                        document.createTextNode(t)
                    );
                })
                .catch(function(e) {
                    console.error(e)
                });

    </script>
</head>
<body>
</body>
</html>

Las únicas diferencias con el código node.js es que estamos cargando SystemJS usando la etiqueta <script> en lugar de require y estamos agregando texto al documento HTML usando appendChild en lugar de mostrarlo en la consola.

Instalación o Configuración

Instrucciones detalladas sobre cómo configurar o instalar systemjs.