systemjs'yi kullanmaya başlama

moment.js’yi yüklemek için SystemJS kullanma

SystemJS, ECMAScript 6 import ve export ifadelerine dayanan modüler javacsript kodunun yazılmasına ve kullanılmasına izin verir. Buna iyi bir örnek, moment.js’nin 2.10.0 sürümünden bu yana ECMAScript 6 kaynak kodunu npm’de yayınlamaya başlayan moment.js kitaplığıdır.

Ön koşulları yükleme

npm install moment
npm install systemjs
npm install traceur

Not: SystemJS, ECMAScript 6 javacsript’i tarayıcıların ve node.js’nin güncel sürümlerinde çalıştırılabilecek bir kodda derlemek için bir aktarıcı gerektirir; bunların hiçbiri şu anda ECMAScript 6 modüllerini desteklememektedir. SystemJS’nin şu anki sürümü varsayılan olarak traceur kullanıyor ve gerektiriyor, bu yüzden onu yüklememiz gerekiyor, ancak SystemJS traceur, babel veya typescript (bazı eklentilerin yardımıyla) kullanacak şekilde yapılandırılabilir.

Örnek kod ekleme

test.js dosyasını oluşturun:

import moment from 'moment';

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

Bu çok basit bir javascript modülüdür ve ‘import’ ve ’export’ dışında diğer yeni ECMAScript 6 özelliklerini de kullanabileceğinizi gösterir.

node.js’de çalıştırma

“main.js” dosyasını oluştur

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)
    });

Bu dosya, ’test.js’ dosyamızı yüklemek ve normal ‘require’ yerine ’test()’ işlevini çalıştırmak için SystemJS.import’u kullanır. SystemJS, “traceur” ve “moment” modüllerinin kaynak kodunu bulabilmesi için “SystemJS.config()” kullanılarak yapılandırılmalıdır. “map” içindeki “moment” yolu, mom.js kaynak kodunun ECMAScript 6 sürümünün bulunduğu “moment/src” dizinini gösterir.

Bu dosyayı kullanarak çalıştırabilirsiniz.

node main.js

Tarayıcıda çalıştırma

“index.html” dosyasını oluştur

<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>

’node.js’ kodundan tek fark, SystemJS’yi ‘require’ yerine ‘