systemjsAan de slag met systemjs


Opmerkingen

Deze sectie geeft een overzicht van wat systemjs is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen systemen vermelden en een link naar de gerelateerde onderwerpen bevatten. Aangezien de Documentatie voor systemjs nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

Installatie of instellingen

Gedetailleerde instructies voor het instellen of installeren van systemjs.

SystemJS gebruiken om moment.js te laden

SystemJS maakt het mogelijk om modulaire javacsript-code te schrijven en te gebruiken die afhankelijk is van ECMAScript 6 import- en exportoverzichten . Een goed voorbeeld is de bibliotheek moment.js, die is begonnen met het publiceren van ECMAScript 6 broncode op npm sinds 2.10.0 release van moment.js.

Vereisten installeren

npm install moment
npm install systemjs
npm install traceur
 

Opmerking: SystemJS vereist een transpiler om ECMAScript 6 javacsript te compileren tot een code die kan worden uitgevoerd in de huidige versies van browsers en node.js, die momenteel geen ECMAScript 6-modules ondersteunen. De huidige versie van SystemJS gebruikt en vereist standaard traceur, dus we moeten het installeren, maar SystemJS kan worden geconfigureerd om traceur, babel of typescript te gebruiken (met behulp van enkele plug-ins).

Voorbeeldcode toevoegen

maak bestand 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}`;
}
 

Dit is een zeer eenvoudige javascript-module, die ook laat zien dat u naast import en export andere nieuwe ECMAScript 6-functies kunt gebruiken.

Het uitvoeren in node.js

maak een bestand 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)
    });
 

Dit bestand gebruikt SystemJS.import onze laden test.js bestand en uitvoeren van test() functie uit te trekken, in plaats van de normale require . SystemJS moet worden geconfigureerd met SystemJS.config() zodat broncode kan vinden traceur en moment modules. Het pad van moment in map verwijst naar moment/src directory waar de ECMAScript 6-versie van moment.js broncode zich bevindt.

U kunt dit bestand uitvoeren met

node main.js
 

Uitvoeren in de browser

maak een bestand 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>
 

Het enige verschil met de code node.js is dat we SystemJS laden met de tag <script> plaats van require en we voegen tekst aan het HTML-document toe met behulp van appendChild plaats van het in de console te tonen.